/* ==== css-style ==== */
: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}
/* ==== css-x-new ==== */
/* StarLake 主题 · 首页补充样式
 * 设计稿里只画了搜索按钮和手机菜单按钮、没有画展开后的样子；这里沿用时间胶囊下拉面板（.rdrop）的玻璃质感，
 * 只在点开时出现，不改变首页默认的样子。 */
html.sl-nosearch .hd .ib:not(.menu){display:none}
.slmenu{position:absolute;right:0;top:52px;min-width:220px;padding:10px;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;pointer-events:auto;z-index:6}
.slmenu.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s}
.hd .slmenu nav{display:flex;flex-direction:column;gap:0;font-size:var(--fs-15);letter-spacing:.12em}
.hd .slmenu nav a,.slmenu .slms{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-radius:12px;font-size:var(--fs-15);letter-spacing:.12em;color:rgba(238,242,250,.82);background:transparent;border:0;width:100%;text-align:left;cursor:pointer;font-family:inherit}
.hd .slmenu nav a:hover,.slmenu .slms:hover,.hd .slmenu nav a:focus-visible,.slmenu .slms:focus-visible{background:rgba(238,242,250,.08);color:#EEF2FA;outline:none}
.hd .slmenu nav a[aria-current]{color:#EEF2FA;font-weight:600;border-bottom:0}
.hd .slmenu nav a[aria-current]::after{content:'';width:6px;height:6px;border-radius:50%;background:#FFB38A;margin-left:auto}
.slmenu .slms{margin-top:6px;border-top:1px solid rgba(238,242,250,.12);border-radius:0 0 12px 12px;padding-top:2px}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){.slmenu{left:0;right:0;min-width:0;top:52px}}
@media (prefers-reduced-motion:reduce){.slmenu,.slmenu.open{transition:none}}

/* 空天空的提示：视野里一个星官都没有时出现在天空空处（引擎第 11 组），按钮沿用边缘标签的玻璃胶囊 */
.slempty{position:absolute;z-index:3;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;animation:slEmptyIn .5s ease both;max-width:calc(100% - 24px)}
/* 宽度按内容算（不受摆放位置影响），排位置时量到的大小就是显示出来的大小 */
.slempty{width:max-content;max-width:min(calc(100% - 24px),620px)} /* 按钮多时折成两三行，不铺满整排 */
.slempty[hidden]{display:none}
.slempty>span{font:500 var(--fs-11) var(--mono);letter-spacing:.14em;color:rgba(238,242,250,.8);text-shadow:0 1px 6px rgba(0,0,0,.6);white-space:nowrap}
html[data-ink="dark"] .slempty>span{color:rgba(18,26,42,.72);text-shadow:0 1px 6px rgba(255,255,255,.5)}
.slempty>div{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;pointer-events:auto}
.slempty button{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;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.slempty button b{font-family:var(--serif);font-weight:900;font-size:var(--fs-13)}
.slempty button:hover,.slempty button:focus-visible{background:rgba(255,255,255,.14);outline:none}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){.slempty button{height:28px;padding:0 10px;font-size:var(--fs-11)}}
@keyframes slEmptyIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.slempty{animation:none}}

/* 文章提示卡打开时，被它盖住的星官名字、边缘标签、空天空提示淡出让路（引擎第 14 组） */
.lbls .cl.sl-tipy,.edges .eh.sl-tipy,.slempty.sl-tipy{opacity:0!important;pointer-events:none!important;transition:opacity .2s ease}
/* 星官名字放不下时：先收起说明只留星官名；仍和别的名字重叠时，篇数少的那个淡出 */
.cl.sl-cmpct small{display:none}
.cl.sl-lblx{opacity:.28}
/* 空天空提示出现时，边缘标签淡出（提示里已经列出同一组星官） */
.hero.sl-emp .edges{opacity:0}.hero.sl-emp .edges .eh{pointer-events:none}
/* 空天空提示里的星官按钮和边缘标签同样的文字，说明部分稍淡；「回到此刻」用同样的胶囊（白天也看得清） */
.slempty button span{opacity:.82}
/* 手机：有星官映在湖里时（看地平线下的星官），首屏正文淡出隐藏，倒影放大加深、名字加深阴影；收起后恢复（引擎第 14 组 l） */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq .lede{transition:color .6s ease,text-shadow .6s ease,opacity .45s ease,visibility 0s}
  html.sl-peekw .lede{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility 0s .45s}
  html.sl-peekw .ovl .subl .ln{stroke:rgba(255,255,255,.95);stroke-width:1.4}
  html.sl-peekw .ovl .subs .s .tw{transform:scale(1.6)}
  html.sl-peekw .ovl .subbg{fill:url(#gSub2)}
  html.sl-peekw .cl.sub{text-shadow:0 1px 10px rgba(6,24,48,.9),0 0 2px rgba(6,24,48,.6)}
}

/* 首屏正文和地平线（引擎第 15 组）：正文位置由引擎按正文高度算出（--ledeTop），放不下时分档收紧（.sl-t1 / t2 / t3） */
html.fq .lede h1 .l1,html.fq .lede h1 .l2{white-space:nowrap} /* 标题两行各自不折行，放不下时引擎逐级缩小字号 */
@media (orientation:landscape), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .lede{top:var(--ledeTop,150px)}
  html.fq .lede p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  html.fq .lede.sl-t1 h1{font-size:44px}
  html.fq .lede.sl-t1 p{font-size:var(--fs-15);line-height:1.8;margin-top:12px}
  html.fq .lede.sl-t1 .btns{margin-top:18px}
  html.fq .lede.sl-t1>.now{margin-top:12px}
  html.fq .lede.sl-t2 h1{font-size:40px;margin-top:14px}
  html.fq .lede.sl-t2 p{font-size:var(--fs-15);line-height:1.75;margin-top:10px;-webkit-line-clamp:2}
  html.fq .lede.sl-t2 .btns{margin-top:16px}
  html.fq .lede.sl-t2 .b1,html.fq .lede.sl-t2 .b2{height:38px}
  html.fq .lede.sl-t2>.now{margin-top:10px}
  /* 档 3（矮屏、横屏手机）：说明收进「怎么读这片星空」，点开在正文下方展开；隐藏状态行（时间在顶部胶囊里） */
  html.fq .lede.sl-t3 h1{font-size:32px;margin-top:10px;line-height:1.22}
  html.fq .lede.sl-t3 .why{display:inline-block;margin-top:8px;padding:2px 0;border:0;background:none;color:var(--hi2);font:inherit;font-size:var(--fs-13);text-decoration:underline;text-underline-offset:3px;cursor:pointer;pointer-events:auto}
  html.fq .lede.sl-t3 .why::after{content:' ↓';text-decoration:none}
  html.fq .lede.sl-t3.more .why::after{content:' ×'}
  html.fq .lede.sl-t3 p{display:none;position:absolute;left:0;top:calc(100% + 12px);width:min(520px,calc(100vw - 112px));max-width:none;margin:0;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-14);line-height:1.7;-webkit-line-clamp:unset;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:30}
  html.fq .lede.sl-t3.more p{display:block}
  html.fq .lede.sl-t3 .btns{margin-top:12px}
  html.fq .lede.sl-t3 .b1,html.fq .lede.sl-t3 .b2{height:36px;padding:0 16px;font-size:var(--fs-13)}
  html.fq .lede.sl-t3>.now{display:none}
}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq .lede>.now{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.fq .lede.sl-t1 h1{font-size:22px;margin-top:6px}
  html.fq .lede.sl-t1 .why{margin-top:4px;font-size:var(--fs-12)}
  html.fq .lede.sl-t1 .btns{margin-top:8px}
  html.fq .lede.sl-t1>.now{margin-top:6px}
  html.fq .lede.sl-t2 h1{font-size:20px;margin-top:6px}
  html.fq .lede.sl-t2 .why{margin-top:2px;font-size:var(--fs-12)}
  html.fq .lede.sl-t2 .btns{margin-top:6px}
  html.fq .lede.sl-t2 .b1,html.fq .lede.sl-t2 .b2{height:32px;padding:0 14px;font-size:var(--fs-13)}
  html.fq .lede.sl-t2>.now{display:none} /* 时间、时辰在顶部时间胶囊里，太阳、月相、天气在时间面板里 */
}

/* 云雨雾天：还没取样过的星官名字先不露出来（engine 第 16 组 b），取样后连同衬底、字色一起出现，不先出默认衬底再换 */
html.fq.wx-dull .lbls .cl.sl-hpend{visibility:hidden}
html.fq.wx-dull .lbls .cl.sl-hnt::before{transition:none}

/* ===== 首屏优化（引擎第 17 组配套样式） ===== */
/* 17-1 电影感：暗角只在右上、左下、右下三角（正文在左上，不压正文）；胶片颗粒极淡 */
html.fq .stage::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 90% at 100% 0%,rgba(0,0,0,.16),transparent 55%),radial-gradient(110% 80% at 0% 100%,rgba(0,0,0,.16),transparent 55%),radial-gradient(120% 90% at 100% 100%,rgba(0,0,0,.2),transparent 55%)}
html.fq[data-phase=day] .stage::before{opacity:.45}
html.fq .stage::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");background-size:160px 160px}
html.fq .stage .sl,html.fq .stage .sl2,html.fq .stage .fx{z-index:3}
@media (prefers-reduced-motion:reduce){html.fq .stage::after{display:none}}

/* 17-2 星官名字：只剩「名字 + 分类 · N 篇」；代班是一个小角标，不再是一串说明 */
html.fq .cl small .sl-dai{display:inline;margin-left:6px;font:500 var(--fs-10)/1 var(--mono);letter-spacing:.18em;color:#FFC9A5;font-style:normal;opacity:.92}
html.fq .cl small .sl-dai::before{content:'·';margin-right:6px;color:inherit;opacity:.6}
html.fq .cl.ink-d small .sl-dai{color:#9A5A2E}
/* 坏天气（云雨雪雾）里的星官：星点保留亮核、光晕放大（透过薄云的样子）；白天灰白天空上连线用深色描边 + 浅色线芯 */
html.fq.wx-dull .ovl .sts .s:not(.empty) .h{transform:scale(1.35);transform-box:fill-box;transform-origin:center}
html.fq.wx-dull .ovl .sts .s:not(.empty) .sp{opacity:.35}
html.fq.wx-dull .ovl.day .lns{filter:drop-shadow(0 0 1.6px rgba(14,30,60,.95)) drop-shadow(0 0 .6px rgba(14,30,60,.9))}
html.fq.wx-dull .ovl.day .sts{filter:drop-shadow(0 0 1.4px rgba(14,30,60,.9))}
html.fq.wx-dull .ovl.day .ln{stroke:rgba(255,255,255,.82)}

/* 17-3 边缘标签 / 胶囊：同一套玻璃质感和按下反馈 */
html.fq .eh,html.fq .pan button,html.fq .slempty button,html.fq .tray button{transition:background .18s ease,border-color .18s ease,transform .18s ease}
html.fq .eh:active,html.fq .pan button:active,html.fq .slempty button:active{transform:translateY(-50%) scale(.97)}
html.fq .pan button:active,html.fq .slempty button:active{transform:scale(.96)}
html.fq .eh:focus-visible,html.fq .pan button:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
/* 转动时底部罗盘的方位字亮起（hero.turning 由引擎在镜头转动时加上） */
html.fq .cmp span{transition:color .25s ease,text-shadow .25s ease}
html.fq .hero.turning .cmp span{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.65),0 0 2px rgba(255,255,255,.9)}
html.fq .hero.turning .cmp i.b{background:#fff}

/* 17-4 面板打开时其他浮层退后：提示卡（sl-focus）、时间面板（sl-tpo）打开时，星官名字和边缘标签淡到 .4，关掉恢复 */
html.fq .lbls .cl,html.fq .edges .eh{transition:opacity .25s ease}
html.fq.sl-tpo .lbls .cl:not(.sl-tipy),html.fq.sl-tpo .edges .eh:not(.sl-tipy){opacity:.4}
html.fq.sl-focus .edges .eh:not(.sl-tipy):not(:hover){opacity:.55}

/* 17-5 月亮（或低垂的太阳）落在正文区时，贴字晕影在它周围留一个柔和的洞（--slmx/--slmy 由引擎给出，相对正文晕影框） */
html.fq .hero.sl-hole .lede::before{-webkit-mask-image:radial-gradient(circle at calc(var(--slmx,0px) + 90px) calc(var(--slmy,0px) + 70px),transparent 0 44px,#000 110px);mask-image:radial-gradient(circle at calc(var(--slmx,0px) + 90px) calc(var(--slmy,0px) + 70px),transparent 0 44px,#000 110px)}

/* 17-6 大屏（≥1600）：正文按比例放大，不再像贴在角落里 */
@media (min-width:1600px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .lede{width:640px;left:96px}
  html.fq .lede:not(.sl-t1):not(.sl-t2):not(.sl-t3) h1{font-size:56px}
  html.fq .lede:not(.sl-t2):not(.sl-t3) p{font-size:var(--fs-15);max-width:580px}
  html.fq .lede .kk{font-size:var(--fs-12)}
  html.fq .hd{left:96px;right:96px}
  html.fq .cl b{font-size:var(--fs-22)}html.fq .cl b.big{font-size:var(--fs-28)}html.fq .cl small{font-size:var(--fs-11)}
}
/* 平板（700–1100）：正文收窄，给右边的星官留出位置 */
@media (orientation:landscape) and (max-width:1099px){
  html.fq .lede{width:min(560px,calc(100vw - 420px));left:48px}
  html.fq .hd{left:48px;right:48px}
}

/* 17-7 手机：正文区一层柔和衬底（随页面底色），倒影里的星不再透过文字闪 */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq .lede::before{left:-16px;right:-16px;top:-14px;bottom:-12px;border-radius:18px;background:radial-gradient(closest-side,color-mix(in srgb,var(--pg,#070a12) 62%,transparent),color-mix(in srgb,var(--pg,#070a12) 28%,transparent) 70%,transparent)}
  html.fq .hud.ink-dark .lede::before{background:radial-gradient(closest-side,rgba(255,255,255,.42),rgba(255,255,255,.18) 70%,transparent)}
  /* 小屏紧凑档（天空不足 340px 高，引擎加 hero.sl-cmp）：星官名字只留名字，边缘标签只留名字和箭头 */
  html.fq.sl-cmp .lbls .cl small{display:none}
  html.fq.sl-cmp .edges .eh span{display:none}
  html.fq.sl-cmp .edges .eh{height:26px;padding:0 9px}
}
/* 窄手机（≤360）：头部挤不下——时间胶囊只留时间、配乐胶囊只留图标、间距收紧，菜单按钮完整 */
@media (max-width:360px){
  html.fq .hd .hr2{gap:6px}
  html.fq .tpill{padding:0 8px 0 10px;gap:5px}
  html.fq .tpill .tps{display:none}
  html.fq .mpill{padding:0 8px;gap:6px}
  html.fq .mpill .pl,html.fq .mpill .pa{display:none}
  html.fq .hd .logo{font-size:var(--fs-18)}
}
@media (max-width:330px){
  html.fq .hd .logo{font-size:var(--fs-15);letter-spacing:0}
  html.fq .tpill .tpt{font-size:var(--fs-12)}
}

/* 17-8 背景星官（引擎第 17 组 k）：淡虚线 + 小名字，悬停亮起；夜里天空够清时才出现（.ovl.gh-on） */
html.fq .ovl .ghosts{opacity:0;transition:opacity .8s ease;pointer-events:none}
html.fq .ovl.gh-on .ghosts{opacity:1}
html.fq .ovl .gh line{stroke:rgba(196,210,240,.22);stroke-width:.8;stroke-dasharray:2 3;transition:stroke .25s}
html.fq .ovl .gh circle:not(.ghh){fill:rgba(222,232,255,.6)}
html.fq .ovl .gh .gn{font:600 var(--fs-11) var(--serif);fill:rgba(214,224,248,.46);text-anchor:middle;letter-spacing:.12em;paint-order:stroke;stroke:rgba(6,10,24,.55);stroke-width:2.5px;transition:fill .25s}
html.fq .ovl .gh .ghh{fill:transparent;pointer-events:none}
html.fq .ovl.gh-on .gh .ghh{pointer-events:all}
html.fq .ovl.gh-on .gh:hover .gn{fill:rgba(240,244,255,.96)}
html.fq .ovl.gh-on .gh:hover line{stroke:rgba(206,218,246,.5)}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){html.fq .ovl .gh .gn{font-size:var(--fs-10)}}

/* 17-9 主体预算之外的静音星官（引擎第 17 组 m）：细虚线、淡名字、星点不发光、不弹提示卡；点名字升为主体 */
html.fq .ovl .ln.mute{stroke-dasharray:2 3;opacity:.4}
html.fq .ovl .s.mute .h,html.fq .ovl .s.mute .sp,html.fq .ovl .s.mute .rip{opacity:0!important}
html.fq .ovl .s.mute .c{opacity:.6}
html.fq .ovl .s.mute .hit{pointer-events:none}
html.fq .cl.mute{pointer-events:auto;cursor:pointer;opacity:.55;transition:opacity .25s}
html.fq .cl.mute small{display:none}
html.fq .cl.mute b{font-size:var(--fs-15)!important;font-weight:700}
html.fq .cl.mute:hover{opacity:.95}
html.fq .cl.mute::after{content:'点一下看它';margin-left:8px;font:500 var(--fs-10) var(--mono);letter-spacing:.1em;opacity:0;transition:opacity .2s}
html.fq .cl.mute:hover::after{opacity:.8}
/* 17-10 边缘标签「另 N 个」和它的面板（引擎第 17 组 n） */
html.fq .eh.more b{font-family:var(--mono);font-weight:600;font-size:var(--fs-11);letter-spacing:.1em}
html.fq .slmore{pointer-events:auto;animation:slEmptyIn .25s ease both}
html.fq .slmore button span{margin-left:4px}
/* ==== css-gl ==== */
/* ===== 2026-10-18 WebGL 背景层 ===== */
.skygl,.skyov{position:absolute;left:0;top:0;display:block;pointer-events:none}
html.sl-gl .stage .sky{visibility:hidden}
/* 首屏三角暗角在场景底部（第二屏的接缝处）淡掉，不留分界线 */
html.fq .stage::before{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 320px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 320px),transparent)}
/* ==== css-moments-b ==== */
/* ===== 「瞬间」方案 B · 聚焦阅读（2026-10-18 确认）=====
   钟面不变；右侧 = 当前这条（时间、文字 3 行 + 16:9 照片 / 视频，与文字上下对齐，超出跑马灯）+ 翻页 + 5 条目录。
   手机：钟面下方 = 时间胶囊 + 当前这条。PC 上右侧整体不超出钟面的上下边。 */
#moments .mside .ml,#moments .mside .mx{display:none !important}
#moments .mb{position:relative}
#moments .mb-chips{display:none}
#moments .mb-dot{display:block;flex:none;width:8px;height:8px;border-radius:50%;background:#9DB8FF;box-shadow:0 0 6px rgba(157,184,255,.7)}
#moments .mb-dot.d{background:#E0843C;box-shadow:0 0 6px rgba(224,132,60,.7)}
#moments .mb-feat{padding:24px 28px 20px;border-radius:20px;background:var(--card);border:1px solid rgba(127,200,224,.24);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#moments .mb-fh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#moments .mb-fh .mb-dot{transform:scale(1.4)}
#moments .mb-fh b{font:600 var(--fs-28)/1 var(--mono);color:var(--acc);letter-spacing:.02em}
#moments .mb-meta{font:500 var(--fs-11) var(--mono);color:var(--ink3);letter-spacing:.04em;white-space:nowrap}
#moments .mb-meta em{font-style:normal;color:var(--ink3);opacity:.8}
#moments .mb-fb{display:flex;gap:18px;margin:16px 0 16px;align-items:flex-start}
#moments .mb-tx{flex:1;min-width:0;height:calc(var(--fn,3) * 1.75em);font:600 var(--fs-18)/1.75 var(--serif);color:var(--ink);overflow:hidden}
#moments .mb-mq{display:block;will-change:transform}
#moments .mb-tx.ov{-webkit-mask-image:linear-gradient(#000 calc(100% - 14px),transparent);mask-image:linear-gradient(#000 calc(100% - 14px),transparent)}
#moments .mb-th{position:relative;flex:none;display:block;overflow:hidden;border-radius:8px;--h:calc(var(--fn,3) * 19px * 1.75);width:calc(var(--h) * 16 / 9);height:var(--h);background:#11162a;border:1px solid rgba(220,230,255,.14);cursor:zoom-in;transition:border-color .2s}
#moments .mb-th:hover{border-color:rgba(127,200,224,.6)}
#moments .mb-th img{display:block;width:100%;height:100%;object-fit:cover}
#moments .mb-th .pl{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(5,8,18,.55);box-shadow:0 0 0 1px rgba(255,255,255,.25)}
#moments .mb-th .pl::after{content:'';position:absolute;left:10px;top:7.5px;border-style:solid;border-width:5.5px 0 5.5px 8px;border-color:transparent transparent transparent #fff}
#moments .mb-th em{position:absolute;right:4px;bottom:3px;padding:0 4px;border-radius:4px;background:rgba(5,8,18,.62);font:600 var(--fs-10)/15px var(--mono);font-style:normal;color:#fff}
#moments .mb-th em:empty{display:none}
#moments .mb-th.xs{--h:22px;border-radius:5px}#moments .mb-th.xs .pl{transform:scale(.5)}#moments .mb-th.xs em{display:none}
#moments .mb-nav{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px}
#moments .mb-idx{font:500 var(--fs-12) var(--mono);color:var(--ink3);letter-spacing:.1em}
#moments .mb-nav button{width:36px;height:36px;margin-left:8px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--ink);cursor:pointer;font-size:var(--fs-18);line-height:1;transition:background-color .15s,transform .1s}
#moments .mb-nav button:hover{background:rgba(127,200,224,.1)}#moments .mb-nav button:active{transform:scale(.92)}
#moments .mb-in{animation:mbIn .35s ease}
@keyframes mbIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#moments .mb-toc{margin-top:12px;display:grid;gap:2px}
#moments .mb-row{display:grid;grid-template-columns:14px 50px 46px minmax(0,1fr) 40px;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;cursor:pointer;outline:none;transition:background-color .2s}
#moments .mb-row:hover{background:rgba(127,200,224,.06)}
#moments .mb-row:focus-visible{box-shadow:inset 0 0 0 1px rgba(127,200,224,.6)}
#moments .mb-row.on{background:rgba(127,200,224,.1)}
#moments .mb-row b{font:600 var(--fs-14) var(--mono);color:var(--acc)}
#moments .mb-row small{font:500 var(--fs-11) var(--mono);color:var(--ink3)}
#moments .mb-row span{font-size:var(--fs-14);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#moments .mb-row.on span{color:var(--ink)}
#moments .mb.tight .mb-row{padding-top:5px;padding-bottom:5px}#moments .mb.tight .mb-toc{margin-top:6px}#moments .mb.tight .mb-feat{padding-top:18px;padding-bottom:14px}
html[data-phase=day] #moments .mb-feat{border-color:rgba(44,111,180,.22)}
html[data-phase=day] #moments .mb-row.on{background:rgba(44,111,180,.08)}
.mb-lbx{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(3,5,12,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mb-lbx[hidden]{display:none}
.mb-lbx .fr{position:relative;width:min(960px,100%);aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.mb-lbx .fr img{width:100%;height:100%;object-fit:cover;display:block}
.mb-lbx .fr .pl{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(5,8,18,.5);box-shadow:0 0 0 1.5px rgba(255,255,255,.4)}
.mb-lbx .fr .pl::after{content:'';position:absolute;left:25px;top:19px;border-style:solid;border-width:13px 0 13px 20px;border-color:transparent transparent transparent #fff}
.mb-lbx .cp{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 14px;background:linear-gradient(transparent,rgba(0,0,0,.72));font-size:var(--fs-14);color:#EAF0FF}
.mb-lbx .cp b{font:600 var(--fs-14) ui-monospace,Menlo,monospace;color:#8FD0E6;margin-right:8px}
.mb-lbx .cp small{display:block;margin-top:2px;font:500 var(--fs-11) ui-monospace,Menlo,monospace;color:#8D98B3}
.mb-lbx .x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(5,8,18,.6);color:#fff;font-size:var(--fs-18);cursor:pointer}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  #moments .mb-toc{display:none}
  #moments .mb-chips{display:flex;gap:5px;overflow-x:auto;margin:0 0 12px;padding:2px 0;scrollbar-width:none}
  #moments .mb-chips::-webkit-scrollbar{display:none}
  #moments .mb-chip{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:5px;height:36px;padding:0 7px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer;font:600 var(--fs-13) var(--mono);color:var(--ink2)}
  #moments .mb-chip .mb-dot{width:6px;height:6px}
  #moments .mb-chip.on{border-color:rgba(127,200,224,.5);background:rgba(127,200,224,.12);color:var(--acc)}
  #moments .mb-feat{padding:18px 18px 14px;border-radius:16px}
  #moments .mb-fh b{font-size:var(--fs-22)}
  #moments .mb-fb{gap:12px;margin:12px 0 14px}
  #moments .mb-tx{font-size:var(--fs-15);line-height:1.7;height:calc(var(--fn,3) * 1.7em)}
  #moments .mb-th{--h:calc(var(--fn,3) * 16px * 1.7);border-radius:6px}
  .mb-lbx{padding:12px}
}
@media (prefers-reduced-motion:reduce){#moments .mb-in{animation:none}}
/* ==== css-now-chip ==== */
/* 2026-10-18 面板稳定 · 根本原因：首屏 .hud 整层 pointer-events:none，只有按钮 / 链接 / 输入框能接收鼠标，
   面板的背景和文字是「透明」的——鼠标移到文字或按钮间隙上就算离开面板（0.45 秒后自动关），点空白处算点在面板外（立刻关），在空白处拖动会拖动背后的星空。
   打开的面板（时间胶囊、顶部色带、行内时间、侧边时间条、手机菜单）整块接收鼠标。 */
.tpw.open .rdrop,.rtop.open .rdrop,.nw.open .rdrop,.rside.open .rdrop,.slmenu.open{pointer-events:auto}
/* 时间按钮和下拉面板之间的「桥」，鼠标从按钮移到面板时不会掉出去 */
.tpw .rdrop::before,.rtop .rdrop::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
/* 2026-10-18「回到此刻」标签：拖动过时间 / 转过朝向后出现在画面底部中间 */
.hero .sl-now{position:absolute;z-index:8;pointer-events:none;left:50%;bottom:64px;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px 0 13px;border-radius:999px;border:1px solid rgba(127,200,224,.45);background:rgba(8,12,26,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#EEF2FA;font:600 var(--fs-13) -apple-system,'PingFang SC',sans-serif;letter-spacing:.04em;cursor:pointer;box-shadow:0 12px 30px -14px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .25s,transform .3s,visibility 0s .3s,background-color .2s}
.hero .sl-now.on{pointer-events:auto;opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .3s,background-color .2s}
.hero .sl-now:hover{background:rgba(20,30,56,.78)}
.hero .sl-now:focus-visible{outline:2px solid #7FC8E0;outline-offset:2px}
.hero .sl-now svg{color:#7FC8E0;flex:none}
.hero .sl-now b{font:600 var(--fs-12) ui-monospace,'SF Mono',Menlo,monospace;color:#9FD6EA}
.hero .sl-now b:empty{display:none}
html[data-phase=day] .hero .sl-now{background:rgba(255,255,255,.72);color:#14213A;border-color:rgba(44,111,180,.35)}
html[data-phase=day] .hero .sl-now svg,html[data-phase=day] .hero .sl-now b{color:#2C6FB4}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){.hero .sl-now{bottom:58px;height:36px;font-size:var(--fs-13)}}
@media (prefers-reduced-motion:reduce){.hero .sl-now{transition:none}}
/* ==== css-v274 ==== */
/* v27.4：手机上「怎么读这片星空 / ××的星空笔记」——不再是标题上方带底色的浮层，而是在标题下面就地展开（同 10-18 方案）：
   文字直接写在画面上，字色按背后的画面逐行取（第六十轮的规则），不加衬底；展开时边缘标签和瞬间卡片让开 */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq .lede p{position:static;display:none;margin:8px 0 0;padding:0;max-width:none;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--hi2);font-size:var(--fs-14);line-height:1.75}
  html.fq .lede.more p{display:block;animation:slWhyIn .35s ease both}
  html.fq .lede .why::after{content:' ↓'}
  html.fq .lede.more .why::after{content:' ×'}
  html.fq .lede{transition:transform .3s ease}
}
@keyframes slWhyIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.fq .lede.more p{animation:none}html.fq .lede{transition:none}}
/* ==== css-v275 ==== */
/* v27.5 → v27.8 生活配乐胶囊（电脑端）：宽度按「生活配乐」时锁定，播放前后一样宽；
   文字由 SL_PILL 显示：新句从下方淡入（模糊到清晰），旧句向上淡出；放不下的长句先停再缓缓滚动，两侧边缘柔和渐隐。手机上仍只有小月亮。 */
@media (orientation:landscape), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .mpill{width:auto;max-width:none;padding:0 12px 0 10px;gap:7px;transition:background-color .4s ease}
  html.fq .mpill span.sl-vp{position:relative;display:block;flex:1 1 auto;min-width:0;height:1.45em;line-height:1.45em;overflow:hidden;text-overflow:clip}
  html.fq .mpill .sl-ln{position:absolute;left:0;top:0;white-space:nowrap;font-style:normal;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.75,.25,1),filter .5s ease;will-change:opacity,transform}
  html.fq .mpill .sl-ln.pre{opacity:0;transform:translateY(.6em);filter:blur(2px);transition:none}
  html.fq .mpill .sl-ln.out{opacity:0;transform:translateY(-.55em);filter:blur(2px);transition:opacity .42s ease,transform .5s cubic-bezier(.4,0,.6,1),filter .42s ease}
  html.fq .mpill .sl-ln b{display:inline-block;font-weight:inherit}
  html.fq .mpill .sl-sz{visibility:hidden;text-decoration:none;white-space:nowrap}
  /* 播放中：暂停键默认隐藏，把位置让给歌词；鼠标移到胶囊上（或用键盘聚焦）时淡入，歌词右端同时柔和地让出位置。没有鼠标的设备照常显示 */
  @media (hover:hover){
    html.fq .mpill{position:relative}
    html.fq .mpill[aria-pressed=true] .pa{position:absolute;right:12px;top:50%;margin-top:-5px;opacity:0;transition:opacity .25s ease}
    html.fq .mpill[aria-pressed=true]:hover .pa,html.fq .mpill[aria-pressed=true]:focus-visible .pa{opacity:1}
    html.fq .mpill[aria-pressed=true]:hover span.sl-vp,html.fq .mpill[aria-pressed=true]:focus-visible span.sl-vp{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent calc(100% - 14px));mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent calc(100% - 14px))}
    html.fq .mpill[aria-pressed=true]:hover span.sl-vp.mq,html.fq .mpill[aria-pressed=true]:focus-visible span.sl-vp.mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 34px),transparent calc(100% - 14px));mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 34px),transparent calc(100% - 14px))}
  }
  html.fq .mpill span.sl-vp.mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 14px),transparent)}
}
@media (prefers-reduced-motion:reduce){html.fq .mpill .sl-ln{transition:opacity .3s ease!important;transform:none!important;filter:none!important}}
/* ==== css-v275-sub ==== */
/* v27.5 · 水下星官的名字：像隔着一层水看——字小一号、偏冷白、略透明；投影只留一层很轻的，阴雨雾天也不垫胶囊 */
.cl.sub{color:#E4ECF6;opacity:.9;text-shadow:0 1px 3px rgba(4,10,20,.45)}
.cl.sub b{font-size:var(--fs-15);font-weight:600;letter-spacing:.04em}
.cl.sub small{opacity:.72}
html.sl-peekw .cl.sub{opacity:.96;text-shadow:0 1px 4px rgba(4,10,20,.55)}
html.fq.wx-dull .cl.sub,html.fq.wx-dull .cl.sub{--ha:0;text-shadow:0 0 1px rgba(4,10,20,.5),0 1px 3px rgba(4,10,20,.4)}
html.fq.wx-dull .cl.sub::before{display:none}
/* ==== css-v279 ==== */
/* v27.9 时间胶囊：天弧 + 下一个天象；可拖动；拨到别的时刻时变成「回到此刻」 */
.tpill{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tpill .tarc{display:block;flex:none;line-height:0}
.tpill .tarc svg{display:block;overflow:visible}
.tpill .tarc .hz{stroke:currentColor;stroke-opacity:.28;stroke-width:1;stroke-dasharray:1.5 2}
.tpill .tarc .lo{fill:none;stroke:rgba(150,170,220,.45);stroke-width:1.4;stroke-linecap:round}
.tpill .tarc .hi{fill:none;stroke:#FFC98F;stroke-width:1.6;stroke-linecap:round}
.tpill .tarc .dot{fill:#E6ECFA;filter:drop-shadow(0 0 3px rgba(220,230,255,.9));transition:fill .4s}
.tpill .tarc .dot.sun{fill:#FFD8A0;filter:drop-shadow(0 0 4px rgba(255,190,110,.95))}
.tpill .tarc .dot.dusk{fill:#F2B8C8;filter:drop-shadow(0 0 3px rgba(240,170,200,.9))}
.tpill .tpt{font:600 var(--fs-13) var(--serif);letter-spacing:.02em}
.tpill .tps{display:inline!important;font:600 var(--fs-12) var(--mono);opacity:.8}
html.fq .tpill .tps{display:inline!important}
.tpill:hover .tarc .lo{stroke:rgba(170,190,240,.7)}
.tpill.drag{cursor:grabbing}
.tpill.drag .tarc .dot{r:3.2}
.tpill.hint .tarc .dot{r:3.2}
.tpill.away{border-color:transparent;background:rgba(255,184,112,.94);color:#3A200C;box-shadow:0 6px 18px -8px rgba(255,150,60,.7);animation:tpAway 2.4s ease-out 1}   /* 醒目的琥珀色实心胶囊：白天、夜里都看得清 */
.tpill.away .tarc .hz{stroke:#3A200C;stroke-opacity:.35}
.tpill.away .tarc .lo{stroke:rgba(58,32,12,.45)}
.tpill.away .tarc .hi{stroke:#8A4512}
.tpill.away .tarc .dot,.tpill.away .tarc .dot.sun,.tpill.away .tarc .dot.dusk{fill:#fff;filter:drop-shadow(0 0 2px rgba(120,60,10,.8))}
.tpill.away .tps{opacity:.75}
.tpill.away .tpt{font-family:-apple-system,'PingFang SC',sans-serif}
@keyframes tpAway{0%{box-shadow:0 0 0 0 rgba(255,184,112,.6)}100%{box-shadow:0 0 0 12px rgba(255,184,112,0)}}
@media (orientation:landscape), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){ .tpill{padding:0 11px 0 12px;gap:7px} }
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){ .tpill{padding:0 10px 0 9px;gap:5px} .tpill .chev{display:none} .tpill .tpt{font-size:var(--fs-12)} .tpill .tps{font-size:var(--fs-11)} }
@media (prefers-reduced-motion:reduce){ .tpill.away{animation:none} }
/* ==== css-v280 ==== */
/* ===== v28.0「瞬间」：WebGL 星盘 + 布局整理 ===== */
.dcol{position:relative}
.dial .dgl{position:absolute;pointer-events:none;display:block}
.dial.gl .ring{background:none!important}
.dial.gl .gr,.dial.gl .hand,.dial.gl .tipd,.dial.gl .mst .mh,.dial.gl .mst .msp,.dial.gl .mst .mring{display:none}
.dial.gl .mst .md,.dial.gl .mst.d .md{fill:transparent;filter:none}
.dial.gl .mst .mtw{animation:none}
.dial.gl .tk{stroke:rgba(220,230,255,.32)}
.dial.gl .ctr small{color:rgba(220,228,245,.62)}.dial.gl .ctr b{color:#F1F4FB;text-shadow:0 0 18px rgba(150,180,255,.35)}.dial.gl .ctr span{color:rgba(225,232,248,.82)}
.dial.gl .mlab{fill:rgba(240,244,252,.92)}
.dial .hn{display:none}
.dleg{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin-top:16px;font:500 var(--fs-12) var(--mono);letter-spacing:.04em;color:var(--ink3)}
.dleg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dleg i{width:7px;height:7px;border-radius:50%;background:#B9C9FF;box-shadow:0 0 6px rgba(157,184,255,.85)}
.dleg i.d{background:#FFC995;box-shadow:0 0 6px rgba(255,170,100,.85)}
.dleg i.o{width:12px;height:12px;background:none;box-shadow:none;border:1px solid rgba(160,185,240,.55);position:relative}
.dleg i.o::after{content:'';position:absolute;inset:2.5px;border-radius:50%;border:1px solid rgba(160,185,240,.35)}
/* 卡片 */
#moments .mb-fh{flex-wrap:nowrap}
#moments .mb-idx{margin-left:auto;font:500 var(--fs-11) var(--mono);color:var(--ink3);letter-spacing:.08em;white-space:nowrap}
#moments .mb-nav{display:none}
#moments .mb-tw{flex:1;min-width:0}
#moments .mb-tx{height:calc(var(--fn,3) * 1.75em);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--fn,3);overflow:hidden}
#moments .mb-tx.ov{-webkit-mask-image:none;mask-image:none}
#moments .mb-tx .mb-mq{display:inline;transform:none!important}
#moments .mb-tx.open{display:block;-webkit-line-clamp:unset;height:auto}
#moments .mb-more.off{visibility:hidden;pointer-events:none}
#moments .mb-more{margin-top:6px;padding:0;border:0;background:none;cursor:pointer;font:600 var(--fs-13) var(--mono);letter-spacing:.06em;color:var(--acc)}
#moments .mb-more::after{content:' ↓'}#moments .mb-more[aria-expanded=true]::after{content:' ↑'}
#moments .mb-more:hover{text-decoration:underline;text-underline-offset:3px}
#moments .mb-fb{margin-bottom:4px}
#moments .mb-row{position:relative}
#moments .mb-row:hover{background:rgba(127,200,224,.045)}
#moments .mb-row.on::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.mmore{display:none}
@keyframes mbSwL{from{transform:translateX(18px);opacity:.4}to{transform:none;opacity:1}}
@keyframes mbSwR{from{transform:translateX(-18px);opacity:.4}to{transform:none;opacity:1}}
#moments .mb-feat.swl .mb-in{animation:mbSwL .3s ease}#moments .mb-feat.swr .mb-in{animation:mbSwR .3s ease}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  #moments .sh>.btn{display:none}
  #moments .dw{grid-template-columns:minmax(0,1fr)}#moments .dcol,#moments .mside{min-width:0}
  #moments .dial{width:min(320px,100%);height:auto;aspect-ratio:1/1}   /* 窄屏（320 宽）时钟面跟着缩小，保持居中 */
  #moments{overflow-x:clip}   /* 星盘外侧辉光不撑出横向滚动 */
  #moments .sh p{font-size:var(--fs-15);line-height:1.7}
  .dleg{margin-top:12px;font-size:var(--fs-11);gap:6px 12px}
  #moments .mb{--fn:4}
  #moments .mb-tx{height:calc(var(--fn,4) * 1.7em)}
  #moments .mb-tx.open{height:auto}
  #moments .mb-fb{flex-direction:column;gap:12px}
  #moments .mb-th{order:-1;width:100%;height:auto;aspect-ratio:16/9;max-height:190px;border-radius:10px}
  #moments .mb-fh b{font-size:var(--fs-22)}
  #moments .mb-meta{overflow:hidden;text-overflow:ellipsis;min-width:0}
  #moments .mb-idx{font-size:var(--fs-11)}
  #moments .mb-feat{touch-action:pan-y}
  .mmore{display:flex;align-items:center;justify-content:center;width:100%;margin-top:18px;height:46px;box-sizing:border-box}
}
@media (prefers-reduced-motion:reduce){#moments .mb-feat.swl .mb-in,#moments .mb-feat.swr .mb-in{animation:none}}
/* ==== css-v281 ==== */
/* ===== v28.1「影像」：WebGL 云河 / 银河 ===== */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){html.fq .gw{width:min(358px,calc(100% - 32px));height:auto;aspect-ratio:358/440}html.fq .gw .ph img{height:auto}}   /* 手机：照片区跟屏幕宽度等比缩放 */
#gallery .ph{cursor:zoom-in;outline:none}
#gallery .ph img{transition:transform .25s ease,filter .25s ease,box-shadow .25s ease}
@media (hover:hover){#gallery .ph:hover img{transform:scale(1.035);filter:brightness(1.06)}}
#gallery .ph:focus-visible img{box-shadow:0 0 0 2px var(--acc),0 14px 30px -14px rgba(30,60,110,.45)}
.gl-lbx{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:56px 72px 40px;background:rgba(3,5,12,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:background-color .3s ease,backdrop-filter .3s ease}
.gl-lbx.on{background:rgba(3,5,12,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gl-lbx[hidden]{display:none}
.gl-lbx figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;max-height:100%}
.gl-lbx img{display:block;max-width:min(1100px,100%);max-height:calc(100vh - 190px);width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform-origin:center}
.gl-lbx figcaption{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:4px 12px;width:min(1100px,100%);margin-top:14px;color:#EAF0FF;font-size:var(--fs-14);opacity:0;transform:translateY(6px);transition:opacity .3s ease .12s,transform .3s ease .12s}
.gl-lbx.on figcaption{opacity:1;transform:none}
.gl-lbx figcaption b{font-size:var(--fs-15)}
.gl-lbx figcaption span{color:#B9C3DA;min-width:0}
.gl-lbx figcaption em{font:500 var(--fs-12) ui-monospace,Menlo,monospace;font-style:normal;color:#8D98B3;justify-self:end}
.gl-lbx figcaption a{grid-column:1 / -1;justify-self:start;font:600 var(--fs-13) ui-monospace,Menlo,monospace;color:#8FD0E6;text-decoration:none}
.gl-lbx figcaption a:hover{text-decoration:underline;text-underline-offset:3px}
.gl-lbx button{position:absolute;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:background-color .2s}
.gl-lbx button:hover{background:rgba(255,255,255,.18)}
.gl-lbx button:focus-visible{outline:2px solid #8FD0E6;outline-offset:2px}
.gl-lbx .x{right:16px;top:14px;width:40px;height:40px;font-size:var(--fs-22)}
.gl-lbx .pv,.gl-lbx .nx{top:50%;width:48px;height:48px;margin-top:-24px;font-size:var(--fs-28)}
.gl-lbx .pv{left:14px}.gl-lbx .nx{right:14px}
html.gl-lock{overflow:hidden}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  .gl-lbx{padding:56px 12px 24px}
  .gl-lbx img{max-height:calc(100vh - 220px);border-radius:4px}
  .gl-lbx .pv,.gl-lbx .nx{display:none}
  .gl-lbx figcaption{grid-template-columns:1fr auto;font-size:var(--fs-14)}
  .gl-lbx figcaption span{grid-column:1 / -1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){.gl-lbx,.gl-lbx figcaption,#gallery .ph img{transition:none}}
#gallery.ggl{position:relative;z-index:0}
#gallery .ggl{position:absolute;left:0;z-index:-1;pointer-events:none;display:block}
#gallery.ggl .gband,#gallery.ggl .gw>i{display:none}
#gallery.ggl .ph figcaption{text-shadow:0 1px 3px rgba(20,40,80,.35)}
html[data-phase=night] #gallery.ggl .ph figcaption{text-shadow:0 1px 4px rgba(4,6,16,.9),0 0 10px rgba(4,6,16,.6)}
/* ==== css-v282 ==== */
/* ===== v28.2 看晴天 / 看晴夜（首屏信息行末尾的天气按钮） ===== */
.lede .nwr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.lede .nwr .now{min-width:0}
.lede .wxo{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 8px;border-radius:999px;border:1px solid rgba(238,242,250,.42);background:rgba(10,16,32,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--hi2);font:500 var(--fs-11)/1 var(--mono);letter-spacing:.03em;cursor:pointer;white-space:nowrap;transition:background-color .25s,border-color .25s,color .25s,transform .1s}
.lede .wxo[hidden]{display:none}
.lede .wxo .wa{font-weight:700;color:var(--hi)}
.lede .wxo .wn{color:var(--hi);opacity:.85}
.lede .wxo .ic{flex:none;color:#FFC46B;filter:drop-shadow(0 0 3px rgba(255,190,100,.6))}
.lede .wxo:hover{background:rgba(10,16,32,.48);border-color:rgba(238,242,250,.55)}
.lede .wxo:active{transform:scale(.96)}
.lede .wxo:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
html[data-ink=dark] .lede .wxo{border-color:rgba(19,33,58,.3);background:rgba(255,255,255,.28)}
html[data-ink=dark] .lede .wxo:hover{background:rgba(255,255,255,.45)}
html[data-ink=dark] .lede .wxo .ic{color:#E08A2C;filter:none}
.lede .wxo.on,html[data-ink=dark] .lede .wxo.on{border-color:transparent;background:rgba(255,184,112,.94);color:#3A200C;box-shadow:0 6px 18px -8px rgba(255,150,60,.7)}
.lede .wxo.on .wa{color:#3A200C}.lede .wxo.on .ic{color:#3A200C;filter:none}
.lede .wxo.hint .ic{animation:wxoHint 2.4s ease-out 1}
@keyframes wxoHint{0%,100%{transform:none;filter:drop-shadow(0 0 3px rgba(255,190,100,.6))}30%{transform:scale(1.35) rotate(25deg);filter:drop-shadow(0 0 9px rgba(255,200,110,1))}60%{transform:scale(1.1);filter:drop-shadow(0 0 5px rgba(255,190,100,.8))}}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  .lede .wxo{height:32px;padding:0 13px 0 10px;font-size:var(--fs-12);gap:7px}
  .lede .nwr{gap:8px 10px}
}
@media (prefers-reduced-motion:reduce){.lede .wxo{transition:none}.lede .wxo.hint .ic{animation:none}}
/* ==== css-v283 ==== */
/* ===== v28.3 手机：看晴天改成轻的文字切换（样式同「怎么读这片星空 ↓」） ===== */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  .lede .nwr{display:block;margin-top:8px}   /* 按钮行 → 信息行留 8px（原来贴在一起） */
  .lede .wxo.txt{display:inline-flex;align-items:center;gap:0;height:auto;margin-top:4px;padding:2px 0;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;animation:none;
    font:inherit;font-size:var(--fs-13);font-weight:500;letter-spacing:0;color:var(--hi2);text-decoration:underline;text-underline-offset:3px}
  .lede .wxo.txt[hidden]{display:none}
  .lede .wxo.txt .wa{font-weight:500;color:inherit}
  .lede .wxo.txt .wn{opacity:1;color:inherit;text-decoration:none}
  .lede .wxo.txt::before{content:'';display:inline-block;width:5px;height:5px;margin:0 7px 1px 0;border-radius:50%;background:#f3c38f;box-shadow:0 0 6px rgba(243,195,143,.8)}
  .lede .wxo.txt.hint::before{animation:wxoDot 2.4s ease-out 1}
  .lede .wxo.txt:hover,html[data-ink=dark] .lede .wxo.txt,html[data-ink=dark] .lede .wxo.txt:hover{background:none;border:0}
  .lede .wxo.txt.on,html[data-ink=dark] .lede .wxo.txt.on{background:none;box-shadow:none;color:#FFC98F}
  .lede .wxo.txt.on{text-shadow:0 1px 3px rgba(0,0,0,.45)}
  html[data-ink=dark] .lede .wxo.txt.on,.ink-dark .lede .wxo.txt.on{color:#9A4E14;text-shadow:0 0 6px rgba(255,255,255,.55)}   /* 亮天空上用深琥珀 */
  .lede .wxo.txt.on::before{background:#FFB870}
}
@keyframes wxoDot{0%,100%{transform:none}30%{transform:scale(2.2);box-shadow:0 0 12px rgba(243,195,143,1)}}
@media (prefers-reduced-motion:reduce){.lede .wxo.txt.hint::before{animation:none}}
/* ==== css-v288 ==== */
/* ===== v28.8 首屏信息行的间距 ===== */
.lede .nwr{margin-top:14px}                                   /* 电脑端：按钮行 → 信息行（原来贴在一起） */
.lede .now{letter-spacing:.04em}
.lede .now .nseg{white-space:nowrap}                          /* 一段之内不断行（「太阳 -1° 地平线下」） */
.lede .now .nsep{display:inline-block;font-style:normal;margin:0 .5em;opacity:.72}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  .lede .nwr{margin-top:10px}
  .lede .now .nsep{margin:0 .42em}
}
/* ==== css-v289 ==== */
/* ===== v28.9 音乐胶囊：歌词跑马灯（从右边进入、从左边出去）；不再淡入淡出 ===== */
@media (orientation:landscape), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .mpill .sl-ln.run,html.fq .mpill .sl-ln.st{transition:none;opacity:1;filter:none;will-change:transform}
  html.fq .mpill .sl-ln.st{transform:none}
  html.fq .mpill span.sl-vp.mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent)}
}
/* ==== css-v290 ==== */
/* v29.0 的卡片连线在 v29.2 取消（按要求）；保留这个样式块的位置 */
/* ==== css-v293 ==== */
/* ===== v29.3 天气按钮：「看晴天 / 看晴夜」做成按钮里一枚太阳色的小标签（深棕字），左边的实况天气保持中性 ===== */
.lede .wxo:not(.on):not(.txt){padding-right:4px}
.lede .wxo:not(.on):not(.txt) .wa{display:inline-flex;align-items:center;height:18px;padding:0 8px;margin-left:2px;border-radius:999px;background:linear-gradient(180deg,#FFD58A,#FFB95E);color:#4A2A08;text-shadow:none;box-shadow:0 2px 8px -3px rgba(255,160,60,.6)}
.lede .wxo:not(.on):not(.txt):hover .wa{background:linear-gradient(180deg,#FFDD9C,#FFC06A)}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){.lede .wxo:not(.on):not(.txt) .wa{height:22px;padding:0 9px}}
/* ==== css-v294 ==== */
/* ===== v29.4 极简天气按钮：整颗胶囊是太阳色「☀ 看晴天」；切换后是安静的半透明「← 回到实况」 ===== */
.lede .wxo:not(.txt):not(.on){gap:5px;padding:0 12px 0 9px;border-color:transparent;background:linear-gradient(180deg,#FFD58A,#FFB95E);color:#4A2A08;box-shadow:0 4px 14px -6px rgba(255,150,60,.65)}
.lede .wxo:not(.txt):not(.on):hover{background:linear-gradient(180deg,#FFDD9C,#FFC06A);border-color:transparent}
html[data-ink=dark] .lede .wxo:not(.txt):not(.on){border-color:transparent;background:linear-gradient(180deg,#FFD58A,#FFB95E)}
.lede .wxo:not(.txt):not(.on) .ic,html[data-ink=dark] .lede .wxo:not(.txt):not(.on) .ic{color:#9A5410;filter:none}
.lede .wxo:not(.txt):not(.on) .wa{display:inline;height:auto;padding:0;margin:0;background:none;box-shadow:none;color:#4A2A08;font-weight:700}
.lede .wxo.on:not(.txt),html[data-ink=dark] .lede .wxo.on:not(.txt){border-color:rgba(238,242,250,.42);background:rgba(10,16,32,.34);color:var(--hi2);box-shadow:none}
html[data-ink=dark] .lede .wxo.on:not(.txt){border-color:rgba(19,33,58,.3);background:rgba(255,255,255,.28)}
.lede .wxo.on:not(.txt) .wa{color:inherit}.lede .wxo.on:not(.txt) .ic{color:inherit;filter:none}
/* ==== css-v10-nohalo ==== */
/* v10（2026-10-23）：任何场景都不给标题加衬底——去掉夜里正文背后那层暗化（v30.5 方案 A）、手机正文的衬底（17-7）、阴雨雪雾霾时星官名字背后的光晕块（wx-dull）。
   可读性改由字本身的阴影负责：一圈很细的描边式阴影 + 一层柔和的宽阴影（强度跟着文字背后天空的实测亮度走，见 --lsA），不在背景上画任何形状。 */
html.fq .lede::before, html.fq[data-phase="night"] .hud:not(.ink-dark) .lede::before, html.fq .hud.ink-dark .lede::before, html.fq.wx-dull .cl::before { display:none !important; content:none !important; }
html.fq .hud .lede { text-shadow: 0 0 1px rgba(4,10,24,.92), 0 1px 2px rgba(4,10,24,.8), 0 2px 12px rgba(4,10,24,var(--lsA,.4)), 0 0 30px rgba(4,10,24,calc(var(--lsA,.4) * .7)); }
html.fq .hud.ink-dark .lede { text-shadow: 0 0 1px rgba(255,255,255,.95), 0 1px 2px rgba(255,255,255,.85), 0 2px 12px rgba(255,255,255,var(--lsA,.45)), 0 0 30px rgba(255,255,255,calc(var(--lsA,.45) * .8)); }
html.fq.wx-dull .cl, html.fq.wx-dull .cl.sub { text-shadow: 0 0 1px rgba(var(--halo),.95), 0 1px 2px rgba(var(--halo),.85), 0 1px 10px rgba(var(--halo),.6), 0 0 24px rgba(var(--halo),.4); }
/* ==== css-v305 ==== */
/* v30.5 方案 A（电脑）：夜里正文背后一层很淡的暗化，星点、银河在文字这一块弱下去；白天深色字不加 */
@media (orientation:landscape), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq[data-phase="night"] .hud:not(.ink-dark) .lede::before{display:block;left:-110px;right:-80px;top:-70px;bottom:-50px;background:radial-gradient(closest-side,color-mix(in srgb,var(--pg,#070a12) 58%,transparent),color-mix(in srgb,var(--pg,#070a12) 24%,transparent) 66%,transparent)}
}
/* ==== css-v306 ==== */
/* v30.6 电脑大屏：按浏览器实际显示区域等比放大（--slS 由引擎给出，基准 1920×950 为 1，最大 2） */
@media (min-width:1600px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .hd{left:calc(96px * var(--slS,1));right:calc(96px * var(--slS,1));top:calc(22px * var(--slS,1));height:calc(44px * var(--slS,1))}
  html.fq .hd .logo{font-size:calc(var(--fs-18) * var(--slS,1))}
  html.fq .hd nav{gap:calc(32px * var(--slS,1));font-size:calc(var(--fs-14) * var(--slS,1))}
  html.fq .hd nav a{padding:calc(8px * var(--slS,1)) 0}
  html.fq .hr2{gap:calc(10px * var(--slS,1))}
  html.fq .tpill,html.fq .mpill,html.fq .wpill{height:calc(38px * var(--slS,1));font-size:calc(var(--fs-13) * var(--slS,1))}
  html.fq .tpill{padding:0 calc(12px * var(--slS,1)) 0 calc(14px * var(--slS,1));gap:calc(7px * var(--slS,1))}
  html.fq .tpill .tpt,html.fq .tpill .tps{font-size:calc(var(--fs-13) * var(--slS,1))}
  html.fq .mpill{padding:0 calc(14px * var(--slS,1)) 0 calc(10px * var(--slS,1));gap:calc(8px * var(--slS,1));max-width:calc(240px * var(--slS,1))}
  html.fq .ib{width:calc(38px * var(--slS,1));height:calc(38px * var(--slS,1))}
  html.fq .lede{width:calc(640px * var(--slS,1));left:calc(96px * var(--slS,1))}
  html.fq .lede .kk{font-size:calc(var(--fs-12) * var(--slS,1))}
  html.fq .lede:not(.sl-t1):not(.sl-t2):not(.sl-t3) h1{font-size:calc(56px * var(--slS,1));margin-top:calc(18px * var(--slS,1))}
  html.fq .lede:not(.sl-t2):not(.sl-t3) p{font-size:calc(var(--fs-15) * var(--slS,1));max-width:calc(580px * var(--slS,1));margin-top:calc(14px * var(--slS,1))}
  html.fq .btns{gap:calc(10px * var(--slS,1));margin-top:calc(22px * var(--slS,1))}
  html.fq .b1,html.fq .b2{height:calc(42px * var(--slS,1));padding:0 calc(20px * var(--slS,1));font-size:calc(var(--fs-14) * var(--slS,1))}
  html.fq .lede .now{font-size:calc(var(--fs-11) * var(--slS,1))}
  html.fq .lede>.now{margin-top:calc(16px * var(--slS,1))}
  html.fq .cl b{font-size:calc(var(--fs-22) * var(--slS,1))}html.fq .cl b.big{font-size:calc(var(--fs-28) * var(--slS,1))}html.fq .cl b.sm{font-size:calc(var(--fs-18) * var(--slS,1))}html.fq .cl small{font-size:calc(var(--fs-11) * var(--slS,1))}
  html.fq .eh{height:calc(30px * var(--slS,1));padding:0 calc(12px * var(--slS,1));font-size:calc(var(--fs-12) * var(--slS,1))}
  html.fq .eh span{font-size:calc(var(--fs-11) * var(--slS,1))}
  html.fq .mcap{width:calc(240px * var(--slS,1));padding:calc(11px * var(--slS,1)) calc(13px * var(--slS,1));border-radius:calc(14px * var(--slS,1))}
  html.fq .mcap small{font-size:calc(var(--fs-10) * var(--slS,1))}
  html.fq .mcap p{font-size:calc(var(--fs-14) * var(--slS,1));margin-top:calc(5px * var(--slS,1))}
}
/* ==== css-v307 ==== */
/* v30.7 电脑大屏：首屏以下的文章、瞬间、影像、页脚按同一倍数等比放大（--slS 由首屏引擎给出，基准 1920×950 为 1，最大 2） */
@media (min-width:1600px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq #catalog,html.fq #moments,html.fq #gallery>.sh,html.fq #gallery>.gw,html.fq #gallery>.gcta,html.fq .ft{zoom:var(--slS,1)}
}
/* ==== css-v309 ==== */
/* v30.9 第一批 · 细节与手感（patch41） */
:root{--sl-ease:cubic-bezier(.16,1,.3,1)}
/* G1 页头：1101–1240 宽，以及 700–1100 横屏（平板横放、小笔记本）：导航间距收紧，时间胶囊只留天弧图标和时间（「月落」这类字收起，读屏仍读完整说明） */
@media (min-width:1100px) and (max-width:1240px), (orientation:landscape) and (max-width:1099px){
  .hd nav{gap:22px}
  html.fq .hd .tpill .tpt{display:none}
}
/* ≤ 1080 横屏：导航收进菜单按钮，和手机同一个菜单（菜单里有搜索） */
@media (orientation:landscape) and (max-width:1099px){
  .hd{grid-template-columns:1fr auto}
  .hd nav{display:none}
  .ib{display:none}.ib.menu{display:grid}
}
/* F1 悬停（只在有鼠标的设备上） */
@media (hover:hover){
  .hd nav a{position:relative;transition:color .2s ease}
  .hd nav a:not([aria-current])::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:currentColor;opacity:.55;transform:scaleX(0);transition:transform .24s var(--sl-ease)}
  .hd nav a:hover{color:var(--ti)}
  .hd nav a:hover::after{transform:scaleX(1)}
  .b1,.b2,.btn,.gcta a{transition:transform .2s var(--sl-ease),box-shadow .24s ease,background-color .2s ease,border-color .2s ease,filter .2s ease}
  .b1:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--hi) 35%,transparent),0 10px 26px -12px var(--hi)}
  .b2:hover{border-color:var(--hi);background:color-mix(in srgb,var(--hi) 7%,transparent)}
  .btn:hover{border-color:var(--ink2);background:color-mix(in srgb,var(--ink) 6%,transparent)}
  .gcta a:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 12px 28px -14px rgba(125,205,232,.85)}
  html[data-ink=dark] .gcta a:hover{box-shadow:0 12px 28px -14px rgba(20,33,58,.7)}
  .gcta a svg,.mo .ar{display:inline-block;transition:transform .24s var(--sl-ease)}
  .gcta a:hover svg,.mo:hover .ar{transform:translateX(3px)}
  /* 文章行：整行可点；星点放大、标题右移、日期换成 →（三列位置写死，箭头和日期叠在同一格，不把日期挤到下一行） */
  .cc li{position:relative}
  .cc li>i{grid-column:1;grid-row:1}.cc li>a{grid-column:2;grid-row:1}.cc li>time{grid-column:3;grid-row:1}
  .cc li a::before{content:'';position:absolute;inset:0}
  .cc li i.g{transition:transform .24s var(--sl-ease),filter .24s ease}
  .cc li a{transition:text-indent .24s var(--sl-ease)}
  .cc li time{transition:opacity .16s ease}
  .cc li::after{content:'→';grid-column:3;grid-row:1;justify-self:end;font:600 var(--fs-13) var(--mono);color:var(--acc);opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .24s var(--sl-ease);pointer-events:none}
  .cc li:hover i.g{transform:scale(1.4);filter:brightness(1.35)}
  .cc li:hover a{text-indent:4px}
  .cc li:hover time{opacity:0}
  .cc li:hover::after{opacity:1;transform:none}
  /* 卡片：描边变亮，小星图连线亮起 */
  .cc{transition:border-color .24s ease}
  .cc:hover{border-color:color-mix(in srgb,var(--ink2) 45%,transparent)}
  .disc line{transition:stroke .3s ease}
  .cc:hover .disc line{stroke:rgba(225,235,255,.9)}
  html[data-ink=dark] .cc:hover .disc line{stroke:rgba(44,80,130,.8)}
}
/* F1 按下 */
.b1:active,.b2:active,.btn:active,.gcta a:active{transform:scale(.97);transition-duration:.08s}
/* F3 键盘焦点：统一 2px 强调色焦点环，外扩 3px */
:is(a,button,[role=button],select,summary):focus-visible{outline:2px solid var(--acc);outline-offset:3px}
html.fq .eh:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .b1:hover,.gcta a:hover,.b1:active,.b2:active,.btn:active,.gcta a:active{transform:none}
  .gcta a:hover svg,.mo:hover .ar,.cc li:hover i.g,.cc li:hover::after{transform:none}
  .cc li:hover a{text-indent:0}
  .hd nav a:not([aria-current])::after{transition:none}
}
/* ==== css-v310 ==== */
/* v31.0 第二～四批（patch42） */
/* B1 字号阶梯（11 档） */
:root{--fs-10:10px;--fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-15:15px;--fs-18:18px;--fs-22:22px;--fs-28:28px;--fs-40:40px;--fs-48:48px}
/* B4 眉题：中文字距 .06em（英文仍是 .2em） */
.kk .zh{letter-spacing:.06em}
/* C1 区块间距：按屏宽连续变化（390 宽和 1440 宽为两端），首屏到第一个区块不变 */
:root{--sec-gap:clamp(88px, 5.33vw + 67px, 144px);--sec-in:clamp(24px, 1.52vw + 18px, 40px)}
#moments.sec{padding-top:var(--sec-gap)}
#gallery.sec.gal{padding-top:var(--sec-gap)}
.ft{margin-top:var(--sec-gap)}
#catalog .grid,#moments .dw,#gallery .gw{margin-top:var(--sec-in)}
/* 1600 宽以上：文章、瞬间区和页脚整块按 --slS 放大（v30.7），这里给基准值；影像区本身不放大，单独乘 --slS */
@media (min-width:1600px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq{--sec-gap:144px;--sec-in:40px}
  html.fq #gallery.sec.gal{padding-top:calc(144px * var(--slS,1))}
}
/* ---------- 第三批 · 首屏与响应式 ---------- */
/* A2 电脑也用「怎么读这片星空」，和手机同一种展开方式：说明默认收起；点开后就地展开在入口下面（不加衬底，字色按背后画面逐行取），
   整个正文块向上移出说明的高度（位移由引擎 whyFit 计算），按钮和状态行留在原处；收起后回到原位 */
@media (orientation:landscape), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .lede .why,html.fq .lede.sl-t1 .why,html.fq .lede.sl-t2 .why,html.fq .lede.sl-t3 .why{display:inline-block;margin-top:12px;padding:2px 0;border:0;background:none;color:var(--hi2);font:inherit;font-size:var(--fs-13);text-decoration:underline;text-underline-offset:3px;cursor:pointer;pointer-events:auto}
  html.fq .lede .why::after{content:' ↓';text-decoration:none}
  html.fq .lede.more .why::after{content:' ×'}
  html.fq .lede p,html.fq .lede.sl-t2 p,html.fq .lede.sl-t3 p{display:none;position:static;width:auto;max-width:520px;margin:10px 0 0;padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--hi2);text-shadow:inherit;font-size:var(--fs-15);line-height:1.85;-webkit-line-clamp:unset;overflow:visible}
  html.fq .lede.more p,html.fq .lede.sl-t2.more p,html.fq .lede.sl-t3.more p{display:block;animation:slWhyIn .35s ease both}
  html.fq .lede{transition:transform .3s ease}
}
@media (min-width:1600px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .lede:not(.sl-t2):not(.sl-t3) p,html.fq .lede p{max-width:calc(580px * var(--slS,1));margin-top:calc(10px * var(--slS,1));font-size:calc(var(--fs-15) * var(--slS,1))}
  html.fq .lede .why,html.fq .lede.sl-t1 .why,html.fq .lede.sl-t2 .why,html.fq .lede.sl-t3 .why{margin-top:calc(12px * var(--slS,1));font-size:calc(var(--fs-13) * var(--slS,1))}
}
@media (prefers-reduced-motion:reduce){html.fq .lede.more p,html.fq .lede.sl-t2.more p,html.fq .lede.sl-t3.more p{animation:none}html.fq .lede{transition:none}}
/* G2 平板竖屏（820×1180 一类）单独一档：页头、正文、边缘标签都在 48px 线；标题 40px，正文最宽 560px */
@media (orientation:portrait) and (min-width:600px) and (max-width:1100px) and (max-height:1599px){
  html.fq .hd{left:48px;right:48px}
  html.fq .lede{left:48px;right:auto;width:min(560px,calc(100vw - 96px))}
  html.fq .lede .kk{font-size:var(--fs-11)}
  html.fq .lede h1{font-size:40px;line-height:1.22;margin-top:12px}
  html.fq .lede.sl-t1 h1{font-size:36px}
  html.fq .lede.sl-t2 h1{font-size:32px}
  html.fq .lede .why{font-size:var(--fs-14);margin-top:10px}
  html.fq .lede p{font-size:var(--fs-15)}
}
/* ---------- 第四批 · 进场与动效 ---------- */
/* E1 进场：天空从页面底色淡入 1.2 秒；正文依次上浮 12px（间隔 80ms、每段 600ms） */
@keyframes slSkyIn{from{opacity:0}to{opacity:1}}
@keyframes slRise12{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.fq.sl-enter .stage{animation:slSkyIn 1.2s cubic-bezier(.33,0,.2,1) both}
html.fq.sl-enter .edges,html.fq.sl-enter .cmp,html.fq.sl-enter .pan{animation:slSkyIn .9s ease .5s both}
html.fq.sl-enter .lede h1 .l1,html.fq.sl-enter .lede h1 .l2{display:inline-block}
html.fq.sl-enter .lede>.kk,html.fq.sl-enter .lede h1 .l1,html.fq.sl-enter .lede h1 .l2,html.fq.sl-enter .lede>.why,html.fq.sl-enter .lede>.btns,html.fq.sl-enter .lede>.nwr,html.fq.sl-enter .lede>.now{animation:slRise12 .6s var(--sl-ease) both}
html.fq.sl-enter .lede>.kk{animation-delay:.2s}
html.fq.sl-enter .lede h1 .l1{animation-delay:.28s}
html.fq.sl-enter .lede h1 .l2{animation-delay:.36s}
html.fq.sl-enter .lede>.why{animation-delay:.44s}
html.fq.sl-enter .lede>.btns{animation-delay:.52s}
html.fq.sl-enter .lede>.nwr,html.fq.sl-enter .lede>.now{animation-delay:.6s}
/* E2 滚动入场：还没进入视口的区块先藏起来（由引擎在支持时加上，进入视口时移除并播放） */
html.fq .sl-rv,html.fq .sl-rvc>.cc,html.fq .sl-rvc>.dcol,html.fq .sl-rvc>.mside{opacity:0}
/* F2 文章与星图联动：卡片小星图里对应的星闪一下；天上那颗星外面扩一圈光 */
.disc circle.f2{transform-box:fill-box;transform-origin:center;animation:slF2d .9s cubic-bezier(.16,1,.3,1)}
@keyframes slF2d{0%{transform:scale(1)}22%{transform:scale(2.4);fill:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.95))}100%{transform:scale(1)}}
html[data-ink=dark] .disc circle.f2{animation-name:slF2dk}
@keyframes slF2dk{0%{transform:scale(1)}22%{transform:scale(2.4);fill:#2C6FB4;stroke:#2C6FB4}100%{transform:scale(1)}}
.ovl .f2r{fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.4;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;pointer-events:none;animation:slF2r 1s cubic-bezier(.22,.8,.3,1) both}
.ovl .f2c{fill:#fff;transform-box:fill-box;transform-origin:center;pointer-events:none;filter:drop-shadow(0 0 5px rgba(255,255,255,.95));animation:slF2c .9s ease-out both}
.ovl.day .f2r{stroke:rgba(20,44,86,.75)}
.ovl.day .f2c{fill:#FFF6E0;filter:drop-shadow(0 0 4px rgba(20,44,86,.6))}
@keyframes slF2r{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(3.6)}}
@keyframes slF2c{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.9)}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .disc circle.f2{animation-name:slF2dR}
  .ovl .f2r{display:none}
  .ovl .f2c{animation-name:slF2cR}
}
@keyframes slF2dR{0%,100%{filter:none}25%{fill:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.95))}}
@keyframes slF2cR{0%,100%{opacity:0}25%{opacity:1}}
/* ==== css-v311 ==== */
/* v31.1「另 N 个」就地展开：展开出来的标签逐个淡入，「收起 / 换一组」按钮略亮 */
html.fq .edges .eh.ehnew{animation:slEhIn .28s ease both;animation-delay:var(--d,0s)}
html.fq .edges .eh.l.ehnew{transform-origin:left center}
html.fq .edges .eh.r.ehnew{transform-origin:right center}
@keyframes slEhIn{from{opacity:0;transform:translateY(-50%) scale(.92)}to{opacity:1;transform:translateY(-50%)}}   /* 只缩不移：动画过程中不会碰到旁边的标签 */
html.fq .edges .eh.more.open{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.75)}
html.fq .edges .eh.more.open b{letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){html.fq .edges .eh.ehnew{animation:none}}
/* v31.1 ⑦ 边缘标签更纤细：高 22px（点按范围放大到 38px 以上），字号降一档（名字 11、说明 10），淡边框，名字粗体 700，说明用无衬线小字，箭头变淡 */
html.fq .edges .eh{height:calc(22px * var(--slS,1));padding:0 calc(9px * var(--slS,1));gap:calc(5px * var(--slS,1));border-color:rgba(255,255,255,.24);background:rgba(10,14,26,.34);font-size:calc(var(--fs-11) * var(--slS,1));line-height:1}
html.fq .edges .eh::after{content:'';position:absolute;left:-2px;right:-2px;top:-8px;bottom:-8px}
html.fq .edges .eh b{font-family:var(--serif);font-weight:700;font-size:calc(var(--fs-11) * var(--slS,1));letter-spacing:.04em}
html.fq .edges .eh span{font:400 calc(var(--fs-10) * var(--slS,1)) -apple-system,BlinkMacSystemFont,'PingFang SC','Noto Sans CJK SC',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em;opacity:.7}
html.fq .edges .eh .ehc,html.fq .slempty button .ehc{font-style:normal;opacity:.55;font-size:.95em}
html.fq .edges .eh:hover{border-color:rgba(255,255,255,.55);background:rgba(10,14,26,.46)}
html.fq[data-phase=day] .edges .eh{background:rgba(14,32,62,.4);border-color:rgba(255,255,255,.34)}
html.fq[data-phase=day] .edges .eh:hover{background:rgba(14,32,62,.52);border-color:rgba(255,255,255,.6)}
html.fq.wx-dull .edges .eh{background:rgba(10,20,40,.46)}
html.fq .edges .eh.more b{font:500 calc(var(--fs-10) * var(--slS,1)) -apple-system,BlinkMacSystemFont,'PingFang SC','Noto Sans CJK SC',sans-serif;letter-spacing:.08em}
html.fq .edges .eh.more.open{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq .edges .eh,html.fq.sl-cmp .edges .eh{height:22px;padding:0 8px;gap:4px;font-size:var(--fs-10)}
  html.fq .edges .eh b{font-size:var(--fs-11)}
  html.fq .edges .eh span{font-size:var(--fs-10)}
  html.fq .edges .eh::after{top:-9px;bottom:-9px}
}
/* v31.1 水下（映在湖里）的星官名字：一律浅色字 + 贴着字的深色光晕（不是一整块底）。原来下雨、阴天时按背后亮度换成深色字，
   又没有光晕，深色字配深色投影压在灰色湖面上，对比度只有 3 : 1 左右 */
html.fq .lbls .cl.sub,html.fq .lbls .cl.sub.ink-d,html.fq.wx-dull .lbls .cl.sub,html.fq.wx-dull .lbls .cl.sub.ink-d,html.sl-peekw .lbls .cl.sub{color:#F2F6FC;opacity:.97;text-shadow:0 0 1px rgba(6,12,26,.75),0 1px 2px rgba(6,12,26,.6),0 0 8px rgba(6,12,26,.5),0 0 18px rgba(6,12,26,.32)}
html.fq .lbls .cl.sub small,html.fq .lbls .cl.sub.ink-d small,html.fq.wx-dull .lbls .cl.sub.ink-d small{color:#DFE7F1;opacity:.94}
html.fq .lbls .cl.sub.ink-d small .sl-dai{color:#FFC9A5}
/* v31.1 手机「看看晴天的样子」：小圆点换成太阳 / 月亮 / 返回图标（颜色同电脑「看晴天」胶囊） */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  .lede .wxo.txt::before{content:none;display:none}
  .lede .wxo.txt{gap:6px}
  .lede .wxo.txt .ic{width:14px;height:14px;margin-left:-1px;color:#FFC46B;filter:drop-shadow(0 0 3px rgba(255,190,100,.6))}
  html[data-ink=dark] .lede .wxo.txt .ic,.ink-dark .lede .wxo.txt .ic{color:#E08A2C;filter:none}
  .lede .wxo.txt.on .ic{color:#FFB870;filter:none}
  html[data-ink=dark] .lede .wxo.txt.on .ic,.ink-dark .lede .wxo.txt.on .ic{color:#9A4E14}
}
/* ==== css-v312 ==== */
/* v31.2 时间面板：时刻文字由脚本按宽度排（贴边的左 / 右对齐）；日期、天气各自不折行，放不下时天气整体换到第二行 */
html.fq .tpw .rdh{flex-wrap:wrap;row-gap:5px}
html.fq .tpw .rdh b,html.fq .tpw .rdh .rdw{white-space:nowrap}
html.fq .tpw .rdh .rdw{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* 当天既没有月出也没有月落：第二行时刻文字是空的，不留空行 */
html.fq .tpw .rlab.two:not(:has(.ev.c)){height:18px}
/* 底部提示按短语换行 */
html.fq .tpw .rft .rph{font-style:normal;white-space:nowrap}
/* 新月前后的月出 / 月落：按钮里只写时刻，时间调淡；按钮行下面一行小字说明 */
html.fq .rev button.nm{color:rgba(238,242,250,.6)}
html.fq .rev button.nm small{opacity:.85}
html.fq .tpw .rnm{margin:8px 0 0;font:400 var(--fs-11)/1.4 -apple-system,BlinkMacSystemFont,'PingFang SC','Noto Sans CJK SC',sans-serif;letter-spacing:.04em;color:rgba(212,222,255,.62)}
/* ==== css-v313 ==== */
/* v31.3 瞬间大卡片：标签在正文下方单独一行（和「展开全文」同一行），不再混进正文 */
#moments .mb-ft{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
#moments .mb-ft .mb-more{margin-top:0}
#moments .mb-tags{display:flex;flex-wrap:wrap;gap:6px}
#moments .mb-tags a{display:inline-block;padding:3px 10px;border-radius:999px;font:500 var(--fs-12)/1.4 var(--mono);letter-spacing:.02em;color:var(--acc);text-decoration:none;background:rgba(127,160,220,.12);box-shadow:inset 0 0 0 1px rgba(127,160,220,.22);transition:background-color .2s}
#moments .mb-tags a:hover{background:rgba(127,160,220,.22)}
#moments .mb-tags a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* ==== css-v315 ==== */
/* v31.5 瞬间小图里的视频：用视频第一帧 */
#moments .mb-th video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;background:#11162a}
/* v31.5 竖屏照片 / 视频的小图：仍按 16:9 铺满，取景偏上（上方 30% 处居中） */
#moments .mb-th.pt img,#moments .mb-th.pt video{object-position:50% 30%}
/* v31.5 点开照片 / 视频：画面按原比例完整显示、不裁切；横屏画面说明在下方、和画面同宽 */
.mb-lbx .fr,.mb-lbx .fr.vd{width:fit-content;max-width:100%;aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;overflow:visible}
.mb-lbx .fr img,.mb-lbx .fr.vd video{display:block;width:auto;height:auto;max-width:min(1100px,100%);max-height:calc(100vh - 190px);object-fit:contain;border-radius:12px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.mb-lbx .fr img{min-width:min(320px,100%)}
.mb-lbx .fr.vd video{width:min(960px,100%)}
.mb-lbx .fr .pl{display:none}
.mb-lbx .cp,.mb-lbx .fr.vd .cp{position:static;background:none;padding:14px 4px 0;line-height:1.6}
.mb-lbx .cp .ct{display:block}
.mb-lbx .cmore{margin:2px 0 0;padding:0;border:0;background:none;color:#8FD0E6;font:600 var(--fs-12) ui-monospace,Menlo,monospace;cursor:pointer}
.mb-lbx .cmore[hidden]{display:none}
.mb-lbx .x{right:10px;top:10px;z-index:2}
/* 竖屏画面（电脑）：画面在左、尽量撑满屏高，说明在右侧一栏、和画面底边对齐 */
@media (orientation:landscape), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  .mb-lbx .fr.pt{display:flex;align-items:flex-end;gap:28px}
  .mb-lbx .fr.pt img,.mb-lbx .fr.pt.vd video{width:auto;min-width:0;height:calc(100vh - 96px);max-width:min(62vw,100%);max-height:calc(100vh - 96px)}
  .mb-lbx .fr.pt .cp{flex:none;width:300px;max-height:calc(100vh - 96px);overflow:auto;padding:0 0 4px;font-size:var(--fs-15)}
  .mb-lbx .fr.pt .x{right:auto;left:10px}
}
/* 手机：画面在上、说明在下；竖屏画面按比例缩小居中，不加黑边；说明超过 3 行时「展开」 */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  .mb-lbx .fr img,.mb-lbx .fr.vd video{width:auto;max-width:100%;max-height:calc(100vh - 240px);max-height:calc(100dvh - 240px)}
  .mb-lbx .fr:not(.pt) img,.mb-lbx .fr.vd:not(.pt) video{width:100%}
  .mb-lbx .fr.pt{margin:0 auto}
  .mb-lbx .fr.pt img,.mb-lbx .fr.pt.vd video{height:calc(100vh - 240px);height:calc(100dvh - 240px)}
  .mb-lbx .cp .ct{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .mb-lbx .cp .ct.open{display:block;max-height:30vh;overflow:auto}
  .mb-lbx .x{right:8px;top:8px}
}
/* ==== css-v316 ==== */
/* v31.6 瞬间卡片：‹ › 按钮、轮播进度线、切换动画不闪白、悬停提示 */
#moments .mb-feat{position:relative;overscroll-behavior-x:contain}
#moments .mb-in{animation:mbIn2 .28s ease}
@keyframes mbIn2{from{opacity:.3;transform:translateY(3px)}to{opacity:1;transform:none}}
#moments .mb-feat.swl .mb-in{animation:mbSwL .3s ease}
#moments .mb-feat.swr .mb-in{animation:mbSwR .3s ease}
#moments .mb-row.hv{background:rgba(127,200,224,.06)}
#moments .mb-nv{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
#moments .mb-fh .mb-nv .mb-idx{margin-left:0}
#moments .mb-ar{position:relative;flex:none;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid rgba(127,200,224,.28);background:rgba(127,200,224,.06);cursor:pointer;transition:background-color .2s,border-color .2s}
#moments .mb-ar::before{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;border:solid var(--acc);border-width:0 0 1.5px 1.5px;transform:translate(-30%,-50%) rotate(45deg)}
#moments .mb-ar.r::before{transform:translate(-70%,-50%) rotate(-135deg)}
#moments .mb-ar:hover{background:rgba(127,200,224,.16);border-color:rgba(127,200,224,.6)}
#moments .mb-ar:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
html[data-ink=dark] #moments .mb-ar{border-color:rgba(44,111,180,.3);background:rgba(44,111,180,.06)}
#moments .mb-prog{position:absolute;left:24px;right:24px;bottom:0;height:2px;border-radius:2px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s}
#moments .mb-prog::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(127,200,224,.15),var(--acc));transform:scaleX(0);transform-origin:left}
#moments .mb-prog.run{opacity:.75}
#moments .mb-prog.run::after{animation:mbProg linear forwards;animation-duration:inherit}
@keyframes mbProg{to{transform:scaleX(1)}}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  #moments .mb-ar{display:none}
  #moments .mb-prog{left:18px;right:18px}
  #moments .mb-feat.swl .mb-in{animation:mbSwL .3s ease}
  #moments .mb-feat.swr .mb-in{animation:mbSwR .3s ease}
}
@media (prefers-reduced-motion:reduce){#moments .mb-in,#moments .mb-feat.swl .mb-in,#moments .mb-feat.swr .mb-in{animation:none}#moments .mb-prog{display:none}}
/* ==== css-v319 ==== */
/* v31.9 平板竖屏（竖屏、宽 700–1100）：首页下方各区不再是拉宽的手机排版 */
@media (orientation:portrait) and (min-width:600px) and (max-width:1100px) and (max-height:1599px){
  .sec{padding-left:48px;padding-right:48px}
  .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 0;padding:0;overflow:visible;scroll-snap-type:none}
  .grid>.cc{width:auto;min-width:0}
  .grid>.cc.lat,.grid>.cc:last-child:nth-child(even){grid-column:1/-1}   /* 「最新」占整行，分类两列；分类是单数时最后一张也占整行，不留半行空位 */
  #moments .dial{width:min(380px,100%)}
  #moments .mb-fb{flex-direction:row;align-items:flex-start;gap:20px}
  #moments .mb-th{order:0;flex:none;width:240px;height:auto;aspect-ratio:16/9;max-height:none;border-radius:10px}
  #moments .mb-ar{display:inline-block}
  .mmore{width:fit-content;padding:0 28px;margin-left:auto;margin-right:auto}
  html.fq .gw{width:min(560px,calc(100% - 96px))}
  .gcta{display:flex;justify-content:center}
  .gcta a{display:inline-flex;width:auto;padding:0 28px}
}
/* ==== css-v320 ==== */
/* v32.0 平板竖屏：影像区的淡色光带铺满整个屏幕宽度（照片区放宽后，原来只比照片区宽 120px，能看到光带的左边缘） */
@media (orientation:portrait) and (min-width:600px) and (max-width:1100px) and (max-height:1599px){
  html.fq .gw .gband{left:calc(50% - 50vw);right:calc(50% - 50vw)}
}
/* ==== css-v321 ==== */
/* v32.1 竖屏电脑屏（1080P / 2K / 4K 竖放）：页头导航紧跟站名左对齐，不和右边的胶囊相碰 */
@media (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .hd{grid-template-columns:auto auto 1fr}
  html.fq .hd nav{margin-left:calc(56px * var(--slS,1))}
  html.fq .hd .hr2{justify-self:end}
}
/* ==== css-v323 ==== */
/* v32.3 多端横竖屏统一：尺寸变量（每档只改变量，规则只写一次；:is(#slz,*) 把这一层的优先级抬到最后生效） */
html.fq{--slM:clamp(48px, min(12.5vw - 80px, 2.5vw + 48px), 96px);--slH1:clamp(44px, min(1.5625vw + 28px, 1.25vw + 32px), 56px);--slLW:clamp(560px, 12.5vw + 400px, 640px);
  --fH2:40px;--fSub:clamp(15px, .15625vw + 13px, 16px);--fMom:18px;--fLi:clamp(15px, .15625vw + 13px, 16px);--fLb:1;--fSm:clamp(11px, .15625vw + 9px, 12px);--fTag:clamp(12px, .15625vw + 10px, 13px);--fNav:clamp(14px, .122vw + 12.66px, 15px);--fCap:12px;--fK:1}
/* D 平板横屏 / 小笔记本（横屏、宽 < 1280） */
@media (orientation:landscape) and (max-width:1279px){ html.fq{--fH2:34px;--fMom:16px;--fLb:.889} }
@media (orientation:landscape) and (max-width:1099px){ html.fq{--slLW:min(560px, calc(100vw - 420px))} }
/* B 手机横屏（横屏、高 < 480）：边距 24 + 安全区，标题按屏高 */
@media (orientation:landscape) and (max-height:479px){ html.fq{--slM:max(24px, calc(env(safe-area-inset-left, 0px) + 12px), calc(env(safe-area-inset-right, 0px) + 12px));--slH1:clamp(22px, 6.5vh, 28px);--slLW:min(max(46vw, 300px), 420px);
  --fH2:28px;--fSub:13px;--fMom:15px;--fLi:14px;--fLb:.889;--fSm:11px;--fTag:12px} }
/* A 手机竖屏 / C 平板竖屏 */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){ html.fq{--fH2:28px;--fSub:14px;--fMom:15px;--fLi:14px;--fLb:.833;--fSm:11px;--fTag:12px;--fNav:15px} }
@media (orientation:portrait) and (min-width:600px) and (max-width:1100px) and (max-height:1599px){ html.fq{--fH2:34px;--fSub:15px;--fMom:16px;--fLi:15px;--fLb:.889}
  html.fq .lede h1:is(#slz,*){font-size:clamp(36px, 2.4vw + 21.6px, 48px)}
  html.fq .lede.sl-t1 h1:is(#slz,*){font-size:calc(clamp(36px, 2.4vw + 21.6px, 48px) * .9)}
  html.fq .lede.sl-t2 h1:is(#slz,*){font-size:calc(clamp(36px, 2.4vw + 21.6px, 48px) * .8)}
  html.fq .gal>.sh:is(#slz,*){padding-left:48px;padding-right:48px} }
/* F 大屏（宽 ≥ 1920）与竖屏电脑屏：按倍数等比放大（区块整体 zoom，所以区块里的字号不再乘倍数） */
@media (min-width:1920px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){ html.fq{--slM:calc(96px * var(--slS,1));--slH1:calc(56px * var(--slS,1));--slLW:calc(640px * var(--slS,1));--fSub:16px;--fLi:16px;--fSm:12px;--fTag:13px;--fNav:15px;--fK:var(--slS,1)} }
/* 横屏布局（含手机横屏、平板横屏、电脑）：页头、首屏正文、下方各区共用同一条左线 */
@media (orientation:landscape), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .hd:is(#slz,*){left:var(--slM);right:var(--slM)}
  html.fq .lede:is(#slz,*){left:var(--slM);width:var(--slLW)}
  html.fq .lede:not(.sl-t1):not(.sl-t2):not(.sl-t3) h1:is(#slz,*){font-size:var(--slH1)}
  html.fq .lede.sl-t1 h1:is(#slz,*){font-size:calc(var(--slH1) * .92)}
  html.fq .lede.sl-t2 h1:is(#slz,*){font-size:calc(var(--slH1) * .84)}
  html.fq .lede.sl-t3 h1:is(#slz,*){font-size:calc(var(--slH1) * .67)}
  html.fq .sec:not(.gal):is(#slz,*),html.fq .gal>.sh:is(#slz,*),html.fq .ft:is(#slz,*){max-width:none;padding-left:var(--slSecP,24px);padding-right:var(--slSecP,24px)}
  html.fq .hd>nav:is(#slz,*){font-size:calc(var(--fNav) * var(--fK))}
}
/* 字号三类：展示（区块标题）/ 正文 / 标签；首屏和星空里的字 × --fK（大屏倍数），区块里的字由区块 zoom 放大 */
html.fq .lede .why:is(#slz,*),html.fq .lede p:is(#slz,*){font-size:calc(var(--fSub) * var(--fK))}
html.fq .lede .now:is(#slz,*),html.fq .lede .kk:is(#slz,*){font-size:calc(var(--fSm) * var(--fK))}
html.fq .lbls .cl:not(.sub):not(.mute) b:is(#slz,*){font-size:calc(22px * var(--fLb) * var(--fK))}
html.fq .lbls .cl:not(.sub):not(.mute) b.big:is(#slz,*){font-size:calc(28px * var(--fLb) * var(--fK))}
html.fq .lbls .cl:not(.sub):not(.mute) b.sm:is(#slz,*){font-size:calc(18px * var(--fLb) * var(--fK))}
html.fq .lbls .cl:not(.sub) small:is(#slz,*),html.fq .edges .eh:is(#slz,*){font-size:calc(var(--fSm) * var(--fK))}
html.fq .sh h2:is(#slz,*){font-size:var(--fH2)}
html.fq #moments .mb-tx:is(#slz,*){font-size:var(--fMom)}
html.fq .cc li:is(#slz,*){font-size:var(--fLi)}
html.fq #moments .mb-tags a:is(#slz,*){font-size:var(--fTag)}
html.fq .ph figcaption:is(#slz,*){font-size:calc(var(--fCap) * var(--gzc,1))}
/* B 手机横屏：页头收紧；瞬间区星盘按屏高缩小、卡片在右；灯箱照片占满屏高、说明在右 */
@media (orientation:landscape) and (max-height:479px){
  html.fq .hd:is(#slz,*){top:10px}
  html.fq .lede .kk:is(#slz,*){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.fq .lede h1:is(#slz,*),html.fq .lede[class] h1:is(#slz,*){font-size:var(--slH1)}   /* 手机横屏：标题不再分档缩小（分档只收起次要信息） */
  html.fq #moments .dw:is(#slz,*){grid-template-columns:auto minmax(0,1fr);gap:28px}
  html.fq #moments .dial:is(#slz,*){width:min(78vh, 36vw);height:min(78vh, 36vw)}
  html.fq #moments .mb-fh:is(#slz,*){flex-wrap:wrap;row-gap:6px}
  html.fq #moments .mb-fh b:is(#slz,*){font-size:var(--fs-22)}
  .gl-lbx:is(#slz,*){padding:16px 64px}
  .gl-lbx figure:is(#slz,*){flex-direction:row;align-items:center;gap:16px}
  .gl-lbx img:is(#slz,*){max-height:calc(100vh - 32px);max-width:calc(100vw - 344px)}
  .gl-lbx figcaption:is(#slz,*){width:200px;margin-top:0;grid-template-columns:1fr;align-self:center}
  .gl-lbx .pv:is(#slz,*),.gl-lbx .nx:is(#slz,*){width:40px;height:40px;margin-top:-20px}
}
/* 更矮的手机横屏（高 < 360，如 568×320）：首屏收起信息行（时间、天气在顶部胶囊里都有） */
@media (orientation:landscape) and (max-height:359px){ html.fq .lede .now:is(#slz,*){display:none} }
/* D：瞬间区卡片标题行放不下时换行（不撑出横向滚动） */
@media (orientation:landscape) and (max-width:1279px){ html.fq #moments .mb-fh:is(#slz,*){flex-wrap:wrap;row-gap:6px} }
/* 触屏：可点的小按钮把点按范围扩到约 44×44（字和图标不变大） */
@media (pointer:coarse){
  #moments .mb-ar:is(#slz,*){position:relative}
  #moments .mb-ar:is(#slz,*)::after{content:'';position:absolute;inset:-9px}
}
/* ==== css-v324 ==== */
/* v32.4 平板 / 笔记本竖屏（竖屏、宽 600–1100）：瞬间、影像按可用宽度排 */
@media (orientation:portrait) and (min-width:600px) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (min-width:600px) and (max-width:899px){
  html.fq #moments .dial:is(#slz,*){width:min(320px,100%)}
  html.fq #moments .mb-fb:is(#slz,*){flex-direction:column;gap:14px}
  html.fq #moments .mb-th:is(#slz,*){width:100%;height:auto;aspect-ratio:16/9;max-height:none;border-radius:10px}
  html.fq .gw.tp:is(#slz,*){width:calc(100% - 96px);max-width:none;height:auto;margin-left:auto;margin-right:auto}
  html.fq .gw.tp .ph img:is(#slz,*){height:auto;border-radius:10px}
  html.fq .gw.tp .ph figcaption:is(#slz,*){margin-top:8px;font-size:12px}
}
/* 宽 ≥ 768：星盘在左（42%，最大 400），卡片 + 瞬间列表在右 */
@media (orientation:portrait) and (min-width:768px) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (min-width:768px) and (max-width:899px){
  html.fq #moments .dw:is(#slz,*){grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:clamp(24px, 4vw, 40px);align-items:center}
  html.fq #moments .dial:is(#slz,*){width:min(400px,100%);margin:0 auto}
  html.fq #moments .mb-chips:is(#slz,*){display:none}
  html.fq #moments .mb-toc:is(#slz,*){display:grid;margin-top:10px}
}
/* ==== css-v326 ==== */
/* v32.6 竖屏：瞬间区不显示 5 条瞬间列表（只留当前卡片） */
@media (orientation:portrait){ html.fq #moments .mb-toc:is(#slz,*){display:none} }
/* ==== css-v327 ==== */
/* v32.7 手机 / 平板布局（竖屏）：瞬间 = 叠卡 + 流星带；影像 = 银河上的纵深轮播 */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq #moments .mb.sm .mb-chips:is(#slz,*),html.fq #moments .mb.sm .mb-toc:is(#slz,*){display:none}
  html.fq #moments .mb-stk:is(#slz,*){position:relative;touch-action:pan-y;transition:height .42s cubic-bezier(.2,.8,.2,1)}
  html.fq #moments .mb-card:is(#slz,*){position:absolute;left:0;right:0;top:0;overflow:hidden;padding:18px 18px 14px;border-radius:16px;background:linear-gradient(var(--card),var(--card)),var(--pg,#070a12);border:1px solid rgba(127,200,224,.24);transform-origin:50% 100%;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .42s,height .42s cubic-bezier(.2,.8,.2,1);box-shadow:0 18px 40px -22px rgba(0,0,0,.8);cursor:grab;user-select:none;-webkit-user-select:none}
  html.fq[data-phase=day] #moments .mb-card:is(#slz,*){border-color:rgba(44,111,180,.22)}
  html.fq #moments .mb-card.drag:is(#slz,*){transition:none}
  html.fq #moments .mb-card:is(#slz,*)>*{transition:opacity .3s}
  html.fq #moments .mb-card:not(.top):is(#slz,*)>*{opacity:0}
  html.fq #moments .mb-card .mb-in:is(#slz,*){animation:none}
  html.fq #moments .mb-card .mb-th:is(#slz,*){order:1}   /* 文字在上、图 / 视频在下 */
  html.fq #moments .mb-card img:is(#slz,*),html.fq #moments .mb-card video:is(#slz,*){-webkit-user-drag:none;pointer-events:none}
  /* 小流星：标题前的圆点拖一条往右上的尾巴 */
  html.fq #moments .mb-card .mb-dot:is(#slz,*){position:relative;overflow:visible}
  html.fq #moments .mb-card .mb-dot:is(#slz,*)::after{content:'';position:absolute;left:4px;top:3.5px;width:20px;height:1.5px;border-radius:1px;background:linear-gradient(90deg,rgba(220,230,255,.9),transparent);transform-origin:0 50%;transform:rotate(-35deg)}
  html.fq #moments .mb-card .mb-dot.d:is(#slz,*)::after{background:linear-gradient(90deg,rgba(246,192,138,.95),transparent)}
  html.fq #moments .mb-card .mb-fh b:is(#slz,*){margin-left:8px}
  /* 卡片成为最上面一张时，一颗流星沿上边缘划过 */
  html.fq #moments .mb-shoot:is(#slz,*){position:absolute;top:0;left:100%;width:46%;height:2px;pointer-events:none;opacity:0;border-radius:2px;background:linear-gradient(90deg,#fff,rgba(190,228,255,.75) 12%,rgba(159,190,255,.25) 55%,transparent)}
  html.fq #moments .mb-shoot:is(#slz,*)::before{content:'';position:absolute;left:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(200,230,255,.9)}
  html.fq #moments .mb-card.top .mb-shoot:is(#slz,*){animation:mbShoot 1.25s cubic-bezier(.35,.1,.25,1) .15s 1 both}
  html.fq #moments .mb-card.day .mb-shoot:is(#slz,*){background:linear-gradient(90deg,#fff3dc,rgba(246,192,138,.8) 12%,rgba(246,192,138,.25) 55%,transparent)}
  html.fq #moments .mb-card.day .mb-shoot:is(#slz,*)::before{box-shadow:0 0 10px 3px rgba(246,192,138,.9)}
  /* 流星带 */
  html.fq #moments .mb-band:is(#slz,*){margin-top:14px;border-radius:14px;overflow:hidden;border:1px solid rgba(127,208,230,.14);background:#070b1a;touch-action:pan-y;cursor:pointer;outline-offset:2px}
  html.fq #moments .mb-band svg:is(#slz,*){display:block;width:100%;height:auto}
  html.fq #moments .mb-band .tw:is(#slz,*){animation:gxTw 3.2s ease-in-out infinite}
  html.fq #moments .mb-band .m.on .tail:is(#slz,*){animation:mbTail .9s cubic-bezier(.3,.1,.2,1) both}
  html.fq #moments .mb-band .m.on .head:is(#slz,*),html.fq #moments .mb-band .pill.anim:is(#slz,*){animation:mbHead .9s ease both}
  html.fq #moments .mb-band .flash:is(#slz,*){opacity:0;transform-box:fill-box;transform-origin:center}
  html.fq #moments .mb-band .m.on.anim .flash:is(#slz,*){animation:mbFlash .9s ease-out .62s both}
  html.fq #moments .mb-bcap:is(#slz,*){text-align:center;font:500 var(--fs-11) var(--mono);color:var(--ink3);margin-top:6px}
  /* 影像：银河上的纵深轮播 */
  html.fq #gallery.gxm .gband:is(#slz,*),html.fq #gallery.gxm canvas.ggl:is(#slz,*){display:none}
  html.fq #gallery.gxm .gw.gx:is(#slz,*){position:relative;width:auto;max-width:none;height:auto;aspect-ratio:auto;margin:var(--sec-in,24px) 0 0;padding:44px 0 16px;overflow:hidden}
  html.fq #gallery.gxm .gxb:is(#slz,*){position:absolute;left:-30%;right:-30%;top:44%;height:120%;transform:translateY(-50%) rotate(-16deg);pointer-events:none;filter:blur(3px);
    background:radial-gradient(56% 30% at 50% 50%,rgba(236,240,255,.46),rgba(180,194,255,.22) 40%,rgba(120,140,220,.08) 66%,transparent 82%),radial-gradient(18% 34% at 34% 46%,rgba(240,166,196,.16),transparent 70%),radial-gradient(22% 30% at 68% 56%,rgba(150,175,255,.18),transparent 70%)}
  html.fq #gallery.gxm .gxd:is(#slz,*){position:absolute;left:-30%;right:-30%;top:44%;height:30%;transform:translateY(-50%) rotate(-16deg);pointer-events:none;opacity:.7;filter:blur(4px);
    background:radial-gradient(12% 40% at 18% 55%,rgba(3,5,12,.9),transparent 70%),radial-gradient(16% 30% at 44% 42%,rgba(3,5,12,.8),transparent 70%),radial-gradient(10% 40% at 62% 60%,rgba(3,5,12,.85),transparent 70%),radial-gradient(14% 30% at 84% 45%,rgba(3,5,12,.8),transparent 70%)}
  html.fq #gallery.gxm .gxs:is(#slz,*){position:absolute;inset:0;pointer-events:none}
  html.fq #gallery.gxm .gxs i:is(#slz,*){position:absolute;border-radius:50%;background:#e6ecff}
  /* 白天是云河：只有柔和的光带（颜色取自照片），没有星和尘埃带 */
  html.fq[data-phase=day] #gallery.gxm .gxb:is(#slz,*){background:radial-gradient(56% 30% at 50% 50%,rgba(var(--gbA,255,255,255),.55),rgba(var(--gbB,230,238,255),.22) 42%,transparent 80%);filter:blur(8px)}
  html.fq[data-phase=day] #gallery.gxm .gxd:is(#slz,*),html.fq[data-phase=day] #gallery.gxm .gxs:is(#slz,*){display:none}
  html.fq #gallery.gxm .gxcf:is(#slz,*){position:relative;perspective:1000px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
  html.fq #gallery.gxm .gw.gx .ph:is(#slz,*){position:absolute;left:50%;top:0;margin:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s;transform-style:preserve-3d}
  html.fq #gallery.gxm .gxcf.drag .ph:is(#slz,*){transition:none}
  html.fq #gallery.gxm .gw.gx .pfl:is(#slz,*){animation:none}
  html.fq #gallery.gxm .gw.gx .ph img:is(#slz,*){display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;pointer-events:none;-webkit-user-drag:none;box-shadow:0 0 0 1px rgba(214,226,255,.16),0 0 28px -8px rgba(170,190,255,.55),0 24px 40px -24px #000}
  html.fq #gallery.gxm .gw.gx .ph.c img:is(#slz,*){box-shadow:0 0 0 1px rgba(214,226,255,.3),0 0 40px -6px rgba(190,205,255,.7),0 24px 40px -24px #000}
  html.fq #gallery.gxm .gw.gx .ph figcaption:is(#slz,*){display:none}
  html.fq #gallery.gxm .gxcap:is(#slz,*){position:relative;text-align:center;font-size:var(--fs-13);color:var(--ink2);margin-top:6px;min-height:22px;padding:0 16px}
  html.fq #gallery.gxm .gxcap b:is(#slz,*){color:var(--ink);margin-right:6px}
  html.fq #gallery.gxm .gxsc:is(#slz,*){position:relative;height:34px;margin:8px 16% 0;cursor:pointer;touch-action:none;outline-offset:4px}
  html.fq #gallery.gxm .gxsc .bd:is(#slz,*){position:absolute;left:-4%;right:-4%;top:12px;height:10px;border-radius:5px;background:linear-gradient(90deg,transparent,rgba(170,186,255,.18) 15%,rgba(226,232,255,.28) 50%,rgba(240,166,196,.16) 85%,transparent);filter:blur(1.5px)}
  html.fq #gallery.gxm .gxsc .st:is(#slz,*){position:absolute;top:17px;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#dfe6ff;opacity:.55}
  html.fq #gallery.gxm .gxsc .hd:is(#slz,*){position:absolute;top:17px;width:0;height:0}
  html.fq #gallery.gxm .gxsc .hd:is(#slz,*)::before,html.fq #gallery.gxm .gxsc .hd:is(#slz,*)::after{content:'';position:absolute;left:-9px;top:-1px;width:18px;height:2px;border-radius:1px;background:linear-gradient(90deg,transparent,#fff,transparent)}
  html.fq #gallery.gxm .gxsc .hd:is(#slz,*)::after{transform:rotate(90deg)}
  html.fq #gallery.gxm .gxsc .hd i:is(#slz,*){position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(200,215,255,.85)}
  html.fq[data-ink=dark] #gallery.gxm .gxsc .hd i:is(#slz,*){background:#7FA8E0;box-shadow:0 0 8px 2px rgba(80,130,200,.6)}
  html.fq[data-ink=dark] #gallery.gxm .gxsc .st:is(#slz,*){background:#5d7aa6}
  html.fq #gallery.gxm .gxi:is(#slz,*){position:relative;font:600 var(--fs-11) var(--mono);color:var(--ink3);text-align:center;margin-top:2px}
}
/* 手机竖屏（宽 < 768）：不显示星盘，流星带就是展开的星盘；影像区左右铺满 */
@media (orientation:portrait) and (max-width:767px){
  html.fq #moments .dcol:is(#slz,*){display:none}
  html.fq #moments .dw:is(#slz,*){gap:0}
  html.fq #gallery.gxm .gw.gx:is(#slz,*){margin-left:-16px;margin-right:-16px}
}
@media (orientation:portrait) and (min-width:768px) and (max-width:1100px) and (max-height:1599px){
  html.fq #gallery.gxm .gw.gx:is(#slz,*){margin-left:-48px;margin-right:-48px}
}
@keyframes mbShoot{0%{transform:translateX(0);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translateX(-330%);opacity:0}}
@keyframes mbTail{from{stroke-dashoffset:var(--L)}to{stroke-dashoffset:0}}
@keyframes mbHead{0%,60%{opacity:0}100%{opacity:1}}
@keyframes mbFlash{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(5)}}
@keyframes gxTw{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){
  html.fq #moments .mb-card.top .mb-shoot,html.fq #moments .mb-band .m.on .tail,html.fq #moments .mb-band .m.on.anim .flash,html.fq #gallery.gxm .gxs i{animation:none!important}
  html.fq #moments .mb-card,html.fq #gallery.gxm .gw.gx .ph{transition-duration:.01s!important}
}
/* ==== css-v328 ==== */
/* v32.8 影像缩略图条：一行圆角缩略图排在小银河上，当前这张放大、带青色星光和十字星芒 */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq #gallery.gxm .gxsc:is(#slz,*){display:flex;justify-content:center;align-items:center;gap:6px;height:auto;margin:10px 12px 0;padding:10px 0;touch-action:pan-y;cursor:default}
  html.fq #gallery.gxm .gxsc .bd:is(#slz,*){left:0;right:0;top:50%;height:12px;margin-top:-6px}
  html.fq #gallery.gxm .gxt:is(#slz,*){position:relative;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:none;cursor:pointer;opacity:.55;transition:width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),opacity .28s;-webkit-tap-highlight-color:transparent}
  html.fq #gallery.gxm .gxt img:is(#slz,*){display:block;width:100%;height:100%;object-fit:cover;border-radius:9px;pointer-events:none;-webkit-user-drag:none;box-shadow:0 0 0 1px rgba(214,226,255,.28),0 0 10px -2px rgba(190,205,255,.55)}
  html.fq #gallery.gxm .gxt.on:is(#slz,*){width:52px;height:52px;opacity:1}
  html.fq #gallery.gxm .gxt.on img:is(#slz,*){border-radius:11px;box-shadow:0 0 0 2px #9fe0f2,0 0 18px 3px rgba(159,224,242,.5)}
  html.fq #gallery.gxm .gxt.on:is(#slz,*)::before,html.fq #gallery.gxm .gxt.on:is(#slz,*)::after{content:'';position:absolute;right:-8px;top:-2px;width:16px;height:2px;border-radius:1px;background:linear-gradient(90deg,transparent,#fff,transparent);z-index:1}
  html.fq #gallery.gxm .gxt.on:is(#slz,*)::after{transform:rotate(90deg)}
  html.fq #gallery.gxm .gxt:focus-visible:is(#slz,*){outline:2px solid var(--acc);outline-offset:3px}
  html.fq[data-ink=dark] #gallery.gxm .gxt.on img:is(#slz,*){box-shadow:0 0 0 2px #2C6FB4,0 0 14px 2px rgba(44,111,180,.35)}
  html.fq[data-ink=dark] #gallery.gxm .gxt.on:is(#slz,*)::before,html.fq[data-ink=dark] #gallery.gxm .gxt.on:is(#slz,*)::after{background:linear-gradient(90deg,transparent,#2C6FB4,transparent)}
}
@media (orientation:portrait) and (min-width:768px) and (max-width:1100px) and (max-height:1599px){
  html.fq #gallery.gxm .gxsc:is(#slz,*){gap:8px}
  html.fq #gallery.gxm .gxt:is(#slz,*){width:42px;height:42px}
  html.fq #gallery.gxm .gxt.on:is(#slz,*){width:64px;height:64px}
}
@media (prefers-reduced-motion:reduce){ html.fq #gallery.gxm .gxt{transition:none!important} }
/* ==== css-v329 ==== */
/* v32.9 手机 / 平板布局（竖屏）：瞬间 = 横滑卡片 + 标题旁一个跟着滑的星盘（方案 R4） */
#moments .mb-ld{display:none}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq #moments .dcol:is(#slz,*){display:none}
  html.fq #moments .dw:is(#slz,*){display:block}
  html.fq #moments .sh:is(#slz,*){flex-direction:row;align-items:flex-end;justify-content:space-between}
  html.fq #moments .sh>div:first-child:is(#slz,*){flex:1;min-width:0}
  html.fq #moments .mb-ld:is(#slz,*){display:block;flex:none;width:84px;height:84px;margin:0 0 -4px 12px}
  html.fq #moments .mb-ld svg:is(#slz,*){display:block;width:100%;height:100%;overflow:visible}
  html.fq #moments .mb-ld .fc:is(#slz,*){fill:#0b1126}
  html.fq #moments .mb-ld .gr:is(#slz,*){fill:none;stroke:rgba(255,255,255,.07);stroke-width:1.5}
  html.fq #moments .mb-ld .tk:is(#slz,*){stroke:rgba(255,255,255,.2);stroke-width:2}
  html.fq #moments .mb-ld .tk.b:is(#slz,*){stroke:rgba(255,255,255,.45);stroke-width:3}
  html.fq #moments .mb-ld text:is(#slz,*){font:700 17px var(--serif);fill:rgba(255,255,255,.85);text-anchor:middle}
  html.fq #moments .mb-ld .nw:is(#slz,*){stroke:#9fe0f2;stroke-width:4;stroke-linecap:round}
  html.fq #moments .mb-ld .o:is(#slz,*){fill:#fff;opacity:.38}
  html.fq #moments .mb-ld .o.d:is(#slz,*){fill:#F6C08A}
  html.fq #moments .mb-ld .o.on:is(#slz,*){filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
  html.fq #moments .mb-ld .o.d.on:is(#slz,*){filter:drop-shadow(0 0 6px rgba(246,192,138,.95))}
  html.fq #moments .mb-ld .mk:is(#slz,*){fill:none;stroke:#9fe0f2;stroke-width:3.5;filter:drop-shadow(0 0 4px rgba(159,224,242,.8))}
  html.fq[data-ink=dark] #moments .mb-ld .fc:is(#slz,*){fill:#1a2448}
  html.fq #moments .mb.rl .mb-chips:is(#slz,*),html.fq #moments .mb.rl .mb-toc:is(#slz,*){display:none}
  html.fq #moments .mb-rail:is(#slz,*){display:flex;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none;overscroll-behavior-x:contain;outline-offset:-2px}
  html.fq #moments .mb-rail:is(#slz,*)::-webkit-scrollbar{display:none}
  html.fq #moments .mb-rail.drag:is(#slz,*){scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
  html.fq #moments .mb-rc:is(#slz,*){flex:0 0 86%;min-width:0;min-height:var(--rh,0);scroll-snap-align:start;padding:16px 16px 12px;border-radius:16px;background:linear-gradient(var(--card),var(--card)),var(--pg,#070a12);border:1px solid rgba(127,200,224,.24);box-shadow:0 18px 40px -22px rgba(0,0,0,.8);cursor:grab}
  html.fq[data-phase=day] #moments .mb-rc:is(#slz,*){border-color:rgba(44,111,180,.22)}
  html.fq #moments .mb-rc .mb-in:is(#slz,*){animation:none}
  html.fq #moments .mb-rc .mb-ar:is(#slz,*){display:none}
  html.fq #moments .mb-rc .mb-fh:is(#slz,*){flex-wrap:wrap;row-gap:2px}
  html.fq #moments .mb-rc .mb-meta:is(#slz,*){order:3;flex:1 0 100%;padding-left:16px}
  html.fq #moments .mb-rc .mb-nv:is(#slz,*){margin-left:auto}
  html.fq #moments .mb-rc .mb-fb:is(#slz,*){flex-direction:row;align-items:flex-start;gap:12px;margin:10px 0 2px}
  html.fq #moments .mb-rc .mb-tw:is(#slz,*){flex:1;min-width:0}
  html.fq #moments .mb-rc .mb-th:is(#slz,*){order:0;flex:none;width:88px;height:auto;aspect-ratio:16/10;max-height:none;border-radius:8px}
  html.fq #moments .mb-rc img:is(#slz,*),html.fq #moments .mb-rc video:is(#slz,*){-webkit-user-drag:none}
  html.fq #moments .mb-dots:is(#slz,*){display:flex;justify-content:center;gap:2px;margin-top:4px}
  html.fq #moments .mb-dots button:is(#slz,*){width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
  html.fq #moments .mb-dots button:is(#slz,*)::before{content:'';width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.24);transition:width .25s,background .25s}
  html.fq[data-ink=dark] #moments .mb-dots button:is(#slz,*)::before{background:rgba(20,40,80,.22)}
  html.fq #moments .mb-dots button.on:is(#slz,*)::before{width:18px;background:var(--acc,#7FD0E6)}
}
@media (orientation:portrait) and (min-width:768px) and (max-width:1100px) and (max-height:1599px){
  html.fq #moments .mb-ld:is(#slz,*){width:110px;height:110px}
  html.fq #moments .mb-rail:is(#slz,*){gap:16px;scroll-padding-inline:48px;margin:0 -48px;padding:2px 48px 10px}
  html.fq #moments .mb-rc:is(#slz,*){flex-basis:56%;padding:18px 20px 14px}
  html.fq #moments .mb-rc .mb-th:is(#slz,*){width:128px}
}
@media (prefers-reduced-motion:reduce){ html.fq #moments .mb-dots button::before{transition:none!important} }
/* ==== css-v330 ==== */
/* v33.0 手机 / 平板布局（竖屏）：瞬间 = 横滑卡片 + 角标星盘（R1）；影像 = 水平纵深轮播 + 圆角缩略图（R1 / E3） */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq #moments .mb-ld:is(#slz,*){display:none}
  html.fq #moments .mb-rc:is(#slz,*){position:relative}
  html.fq #moments .mb-lm:is(#slz,*){position:absolute;right:14px;top:14px;width:56px;height:56px;pointer-events:none}
  html.fq #moments .mb-lm svg:is(#slz,*){display:block;width:100%;height:100%;overflow:visible}
  html.fq #moments .mb-lm .fc:is(#slz,*){fill:#0b1126}
  html.fq[data-ink=dark] #moments .mb-lm .fc:is(#slz,*){fill:#1a2448}
  html.fq #moments .mb-lm .gr:is(#slz,*){fill:none;stroke:rgba(255,255,255,.08);stroke-width:2}
  html.fq #moments .mb-lm .tk:is(#slz,*){stroke:rgba(255,255,255,.22);stroke-width:2.5}
  html.fq #moments .mb-lm .tk.b:is(#slz,*){stroke:rgba(255,255,255,.5);stroke-width:4}
  html.fq #moments .mb-lm .o:is(#slz,*){fill:#fff;opacity:.4}
  html.fq #moments .mb-lm .o.d:is(#slz,*){fill:#F6C08A}
  html.fq #moments .mb-lm .o.on:is(#slz,*){opacity:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
  html.fq #moments .mb-lm .o.d.on:is(#slz,*){filter:drop-shadow(0 0 6px rgba(246,192,138,.95))}
  html.fq #moments .mb-lm .mk:is(#slz,*){fill:none;stroke:#9fe0f2;stroke-width:5;filter:drop-shadow(0 0 4px rgba(159,224,242,.8))}
  /* 卡片左上三行：时刻 / 日期·时辰·宿名 / 1 / 5 · 最新，右边给星盘让位 */
  html.fq #moments .mb-rc .mb-fh:is(#slz,*){padding-right:66px;min-height:56px;align-content:flex-start}
  html.fq #moments .mb-rc .mb-nv:is(#slz,*){order:4;flex:1 0 100%;margin-left:0;padding-left:16px}
  html.fq #moments .mb-rc .mb-fb:is(#slz,*){margin-top:8px}
  /* 影像：水平纵深轮播 + 倒影 */
  html.fq #gallery.gxm .gw.gx .ph img:is(#slz,*){-webkit-box-reflect:below 4px linear-gradient(transparent 72%,rgba(255,255,255,.14))}
  html.fq #gallery.gxm .gw.gx:is(#slz,*){padding-top:18px}
  html.fq #gallery.gxm .gxi:is(#slz,*),html.fq #gallery.gxm .gxsc .bd:is(#slz,*){display:none}
  /* 缩略图：E3 原样 */
  html.fq #gallery.gxm .gxsc:is(#slz,*){padding:6px 0;margin-top:6px}
  html.fq #gallery.gxm .gxt:is(#slz,*){border-radius:6px;opacity:.5}
  html.fq #gallery.gxm .gxt img:is(#slz,*){border-radius:6px;box-shadow:none}
  html.fq #gallery.gxm .gxt.on:is(#slz,*){opacity:1}
  html.fq #gallery.gxm .gxt.on img:is(#slz,*){border-radius:6px;box-shadow:none;outline:2px solid var(--acc,#7FD0E6);outline-offset:1px}
  html.fq #gallery.gxm .gxt.on:is(#slz,*)::before,html.fq #gallery.gxm .gxt.on:is(#slz,*)::after{display:none}
  html.fq[data-ink=dark] #gallery.gxm .gxt.on img:is(#slz,*){box-shadow:none;outline-color:#2C6FB4}
}
@media (orientation:portrait) and (min-width:768px) and (max-width:1100px) and (max-height:1599px){
  html.fq #moments .mb-lm:is(#slz,*){width:72px;height:72px;right:18px;top:16px}
  html.fq #moments .mb-rc .mb-fh:is(#slz,*){padding-right:84px;min-height:72px}
  html.fq #gallery.gxm .gxt:is(#slz,*){width:46px;height:46px}
  html.fq #gallery.gxm .gxt.on:is(#slz,*){width:70px;height:70px}
}
/* ==== css-v331 ==== */
/* v33.1 横屏、宽 < 1280：星盘跟屏幕高度走，右栏变宽；卡片标题行不溢出 */
@media (orientation:landscape) and (min-height:480px) and (max-width:1279px){
  html.fq #moments .dw:is(#slz,*){grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4.5vw,56px);align-items:center}
  html.fq #moments .dial:is(#slz,*){width:clamp(280px,min(100vh - 250px,38vw),420px);height:auto;aspect-ratio:1/1}
  @supports (height:100svh){ html.fq #moments .dial:is(#slz,*){width:clamp(280px,min(100svh - 250px,38vw),420px)} }
  html.fq #moments .mside:is(#slz,*){container-type:inline-size}
  @container (max-width:520px){
    html.fq #moments .mb-feat .mb-fh:is(#slz,*){flex-wrap:wrap;row-gap:4px}
    html.fq #moments .mb-feat .mb-meta:is(#slz,*){order:3;flex:1 0 100%;padding-left:calc(var(--fs-11) * .8 + 12px)}
    html.fq #moments .mb-feat .mb-nv:is(#slz,*){margin-left:auto;gap:6px}
    html.fq #moments .mb-row:is(#slz,*){grid-template-columns:14px 50px minmax(0,1fr) 36px}
    html.fq #moments .mb-row small:is(#slz,*){display:none}
    html.fq #moments .mb-feat .mb-fb:is(#slz,*){gap:12px}
    html.fq #moments .mb.tight .mb-row:is(#slz,*){padding-top:3px;padding-bottom:3px}
    html.fq #moments .mb.tight .mb-toc:is(#slz,*){gap:0;margin-top:6px}
    html.fq #moments .mb.tight .mb-feat:is(#slz,*){padding-top:14px;padding-bottom:10px}
    html.fq #moments .mb.tight .mb-feat .mb-fb:is(#slz,*){margin-top:10px;margin-bottom:8px}
  }
}
/* ==== css-v332 ==== */
/* v33.2 手机 / 平板竖屏：瞬间卡片 = 图片封面（C3） */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq #moments .mb-rc:is(#slz,*){display:flex;flex-direction:column;padding:0;overflow:hidden}
  html.fq #moments .mb-cov:is(#slz,*){position:relative;flex:none;aspect-ratio:16/9;background:#0b1126}
  html.fq #moments .mb-cov.sky:is(#slz,*){aspect-ratio:16/7;background:radial-gradient(120% 100% at 72% 0%,#3a4f96,#16204a 58%,#0b1126)}
  html.fq #moments .mb-cov.sky.d:is(#slz,*){background:radial-gradient(120% 100% at 72% 0%,#9cc8f0,#3d6fae 58%,#1e3c6e)}
  html.fq #moments .mb-cov:is(#slz,*)>.mb-th{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;border-radius:0;order:0}
  html.fq #moments .mb-cov:is(#slz,*)>.mb-th img:is(#slz,*),html.fq #moments .mb-cov:is(#slz,*)>.mb-th video:is(#slz,*){width:100%;height:100%;object-fit:cover;object-position:50% 40%}
  html.fq #moments .mb-cov:is(#slz,*)>.mb-th .pl:is(#slz,*){top:42%;width:40px;height:40px;margin:-20px 0 0 -20px}
  html.fq #moments .mb-cov:is(#slz,*)>.mb-th .pl::after{left:15px;top:12px;border-width:8px 0 8px 12px}
  html.fq #moments .mb-cov:is(#slz,*)>.mb-th em:is(#slz,*){right:10px;bottom:10px;z-index:2}
  html.fq #moments .mb-ov:is(#slz,*){position:absolute;left:0;right:0;bottom:0;z-index:1;padding:34px 16px 10px;pointer-events:none;background:linear-gradient(transparent,rgba(5,8,20,.84))}
  html.fq #moments .mb-cov.sky .mb-ov:is(#slz,*){background:linear-gradient(transparent,rgba(5,8,20,.35))}
  html.fq #moments .mb-ov b:is(#slz,*){display:block;font:700 var(--fs-28)/1.05 var(--mono);color:#fff;letter-spacing:.02em;text-shadow:0 1px 10px rgba(0,0,0,.5)}
  html.fq #moments .mb-ov .mb-meta:is(#slz,*){display:block;margin-top:4px;padding:0;color:rgba(226,234,248,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.fq #moments .mb-cov .mb-lm:is(#slz,*){z-index:2;right:12px;top:12px;width:48px;height:48px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
  html.fq #moments .mb-new:is(#slz,*){position:absolute;left:12px;top:12px;z-index:2;font:700 var(--fs-11)/1.7 var(--mono);font-style:normal;letter-spacing:.06em;color:#0b1022;background:var(--acc,#7FD0E6);border-radius:99px;padding:0 8px;pointer-events:none}
  html.fq #moments .mb-in.c3:is(#slz,*){flex:1;display:flex;flex-direction:column;padding:12px 16px 12px;animation:none}
  html.fq #moments .mb-in.c3 .mb-tw:is(#slz,*){flex:1;display:flex;flex-direction:column;min-width:0}
  html.fq #moments .mb-in.c3 .mb-ft:is(#slz,*){margin-top:auto;padding-top:8px}
  html.fq #moments .mb-rc .mb-fh:is(#slz,*){padding-right:0;min-height:0}
}
@media (orientation:portrait) and (min-width:768px) and (max-width:1100px) and (max-height:1599px){
  html.fq #moments .mb-cov .mb-lm:is(#slz,*){width:64px;height:64px;right:16px;top:16px}
  html.fq #moments .mb-ov:is(#slz,*){padding:44px 20px 14px}
  html.fq #moments .mb-in.c3:is(#slz,*){padding:14px 20px 14px}
  html.fq #moments .mb-new:is(#slz,*){left:16px;top:16px}
}
/* ==== css-v333 ==== */
/* v33.3 竖屏电脑屏：瞬间卡片 = 图片封面，和星盘等高 */
@media (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq #moments .dw:is(#slz,*){grid-template-columns:auto minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:start}
  html.fq #moments .mb-feat.c3f:is(#slz,*){display:flex;flex-direction:column;padding:0;overflow:hidden}
  html.fq #moments .mb-feat.c3f .mb-cov:is(#slz,*){position:relative;flex:none;aspect-ratio:16/9;background:#0b1126}
  html.fq #moments .mb-feat.c3f .mb-cov.sky:is(#slz,*){aspect-ratio:16/7;background:radial-gradient(120% 100% at 72% 0%,#3a4f96,#16204a 58%,#0b1126)}
  html.fq #moments .mb-feat.c3f .mb-cov.sky.d:is(#slz,*){background:radial-gradient(120% 100% at 72% 0%,#9cc8f0,#3d6fae 58%,#1e3c6e)}
  html.fq #moments .mb-feat.c3f .mb-cov>.mb-th:is(#slz,*){position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;border-radius:0;order:0}
  html.fq #moments .mb-feat.c3f .mb-cov>.mb-th img:is(#slz,*),html.fq #moments .mb-feat.c3f .mb-cov>.mb-th video:is(#slz,*){width:100%;height:100%;object-fit:cover;object-position:50% 40%}
  html.fq #moments .mb-feat.c3f .mb-cov>.mb-th .pl:is(#slz,*){top:42%;width:46px;height:46px;margin:-23px 0 0 -23px}
  html.fq #moments .mb-feat.c3f .mb-cov>.mb-th .pl::after{left:17px;top:14px;border-width:9px 0 9px 13px}
  html.fq #moments .mb-feat.c3f .mb-cov>.mb-th em:is(#slz,*){right:12px;top:12px;bottom:auto;z-index:2}
  html.fq #moments .mb-feat.c3f .mb-ov:is(#slz,*){position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:44px 22px 14px;pointer-events:none;background:linear-gradient(transparent,rgba(5,8,20,.84))}
  html.fq #moments .mb-feat.c3f .mb-cov.sky .mb-ov:is(#slz,*){background:linear-gradient(transparent,rgba(5,8,20,.35))}
  html.fq #moments .mb-feat.c3f .mb-ovt:is(#slz,*){min-width:0}
  html.fq #moments .mb-feat.c3f .mb-ov b:is(#slz,*){display:block;font:700 var(--fs-28)/1.05 var(--mono);color:#fff;letter-spacing:.02em;text-shadow:0 1px 10px rgba(0,0,0,.5)}
  html.fq #moments .mb-feat.c3f .mb-ov .mb-meta:is(#slz,*){display:block;margin-top:4px;color:rgba(226,234,248,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.fq #moments .mb-feat.c3f .mb-ov .mb-nv:is(#slz,*){pointer-events:auto;flex:none;margin:0;display:inline-flex;align-items:center;gap:6px;padding:3px;border-radius:99px;background:rgba(5,8,20,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  html.fq #moments .mb-feat.c3f .mb-ov .mb-idx:is(#slz,*){font:600 var(--fs-11) var(--mono);color:rgba(230,236,248,.9);margin:0 2px}
  html.fq #moments .mb-feat.c3f .mb-ov .mb-ar:is(#slz,*){border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
  html.fq #moments .mb-feat.c3f .mb-ov .mb-ar:is(#slz,*)::before{border-color:#fff}
  html.fq #moments .mb-feat.c3f .mb-new:is(#slz,*){position:absolute;left:16px;top:16px;z-index:2;font:700 var(--fs-11)/1.7 var(--mono);font-style:normal;letter-spacing:.06em;color:#0b1022;background:var(--acc,#7FD0E6);border-radius:99px;padding:0 8px;pointer-events:none}
  html.fq #moments .mb-feat.c3f .mb-in.c3:is(#slz,*){flex:1;display:flex;flex-direction:column;padding:16px 22px 16px}
  html.fq #moments .mb-feat.c3f .mb-in.c3 .mb-tw:is(#slz,*){flex:1;display:flex;flex-direction:column;min-width:0}
  html.fq #moments .mb-feat.c3f .mb-in.c3 .mb-tx:is(#slz,*){flex:none;height:auto;line-height:1.75;-webkit-line-clamp:var(--fn,3)}
  html.fq #moments .mb-feat.c3f .mb-in.c3 .mb-tx.open:is(#slz,*){-webkit-line-clamp:unset}
  html.fq #moments .mb-feat.c3f .mb-in.c3 .mb-ft:is(#slz,*){margin-top:auto;padding-top:10px}
}
/* ==== css-v334 ==== */
/* v33.4 横屏（高 ≥ 480）：瞬间卡片 = 横向封面卡（左封面、右正文） */
@media (orientation:landscape){
  html.fq #moments .mb-feat.c3h:is(#slz,*),html.fq #moments .mb.tight .mb-feat.c3h:is(#slz,*){display:flex;flex-direction:row;align-items:stretch;padding:0;overflow:hidden}
  html.fq #moments .mb-feat.c3h .mb-cov:is(#slz,*){position:relative;flex:0 0 44%;min-height:170px;background:#0b1126}
  html.fq #moments .mb-feat.c3h .mb-cov.sky:is(#slz,*){background:radial-gradient(130% 110% at 72% 0%,#3a4f96,#16204a 58%,#0b1126)}
  html.fq #moments .mb-feat.c3h .mb-cov.sky.d:is(#slz,*){background:radial-gradient(130% 110% at 72% 0%,#9cc8f0,#3d6fae 58%,#1e3c6e)}
  html.fq #moments .mb-feat.c3h .mb-cov>.mb-th:is(#slz,*){position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;border-radius:0;order:0}
  html.fq #moments .mb-feat.c3h .mb-cov>.mb-th img:is(#slz,*),html.fq #moments .mb-feat.c3h .mb-cov>.mb-th video:is(#slz,*){width:100%;height:100%;object-fit:cover;object-position:50% 40%}
  html.fq #moments .mb-feat.c3h .mb-cov>.mb-th .pl:is(#slz,*){top:40%;width:42px;height:42px;margin:-21px 0 0 -21px}
  html.fq #moments .mb-feat.c3h .mb-cov>.mb-th .pl::after{left:16px;top:13px;border-width:8px 0 8px 12px}
  html.fq #moments .mb-feat.c3h .mb-cov>.mb-th em:is(#slz,*){right:10px;top:10px;bottom:auto;z-index:2}
  html.fq #moments .mb-feat.c3h .mb-ov:is(#slz,*){position:absolute;left:0;right:0;bottom:0;z-index:1;padding:40px 18px 12px;pointer-events:none;background:linear-gradient(transparent,rgba(5,8,20,.84))}
  html.fq #moments .mb-feat.c3h .mb-cov.sky .mb-ov:is(#slz,*){background:linear-gradient(transparent,rgba(5,8,20,.35))}
  html.fq #moments .mb-feat.c3h .mb-ov b:is(#slz,*){display:block;font:700 var(--fs-28)/1.05 var(--mono);color:#fff;letter-spacing:.02em;text-shadow:0 1px 10px rgba(0,0,0,.5)}
  html.fq #moments .mb-feat.c3h .mb-ov .mb-meta:is(#slz,*){display:block;margin-top:4px;color:rgba(226,234,248,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.fq #moments .mb-feat.c3h .mb-new:is(#slz,*){position:absolute;left:12px;top:12px;z-index:2;font:700 var(--fs-11)/1.7 var(--mono);font-style:normal;letter-spacing:.06em;color:#0b1022;background:var(--acc,#7FD0E6);border-radius:99px;padding:0 8px;pointer-events:none}
  html.fq #moments .mb-feat.c3h .mb-in.c3:is(#slz,*){flex:1;min-width:0;display:flex;flex-direction:column;padding:14px 20px 14px}
  html.fq #moments .mb-feat.c3h .mb-hnv:is(#slz,*){display:flex;justify-content:flex-end;min-height:26px;margin-bottom:6px}
  html.fq #moments .mb-feat.c3h .mb-hnv .mb-nv:is(#slz,*){margin-left:auto}
  html.fq #moments .mb-feat.c3h .mb-in.c3 .mb-tw:is(#slz,*){flex:1;display:flex;flex-direction:column;min-width:0}
  html.fq #moments .mb-feat.c3h .mb-in.c3 .mb-tx:is(#slz,*){flex:none}
  html.fq #moments .mb-feat.c3h .mb-in.c3 .mb-ft:is(#slz,*){margin-top:auto;padding-top:8px}
  html.fq #moments .mb-feat.c3h .mb-ov .mb-meta:is(#slz,*){order:0;flex:none;padding-left:0}
  /* 右栏窄（< 520px，横屏窄屏）：翻页挪到封面左上角（玻璃底），「最新」挪到封面右上角，正文多一行 */
  @container (max-width:520px){
    html.fq #moments .mb-feat.c3h .mb-hnv:is(#slz,*){position:absolute;left:10px;top:10px;z-index:3;min-height:0;margin:0}
    html.fq #moments .mb-feat.c3h .mb-hnv .mb-nv:is(#slz,*){gap:4px;padding:3px;border-radius:99px;background:rgba(5,8,20,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
    html.fq #moments .mb-feat.c3h .mb-hnv .mb-idx:is(#slz,*){color:rgba(230,236,248,.9)}
    html.fq #moments .mb-feat.c3h .mb-hnv .mb-ar:is(#slz,*){border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
    html.fq #moments .mb-feat.c3h .mb-hnv .mb-ar:is(#slz,*)::before{border-color:#fff}
    html.fq #moments .mb-feat.c3h .mb-new:is(#slz,*){left:auto;right:10px}
    html.fq #moments .mb-feat.c3h .mb-cov:is(#slz,*){flex-basis:46%;min-height:150px}
    html.fq #moments .mb-feat.c3h .mb-in.c3:is(#slz,*){padding:12px 14px 12px}
    html.fq #moments .mb-feat.c3h .mb-ov:is(#slz,*){padding:36px 12px 10px}
  }
}
/* ==== css-v335 ==== */
/* v33.5 手机横屏：每个区块压进一屏 */
@media (orientation:landscape) and (max-height:479px){
  /* 瞬间：小星盘 + 横向封面卡（等高），不显示目录 */
  html.fq #moments .dw:is(#slz,*){grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
  html.fq #moments .dial:is(#slz,*){width:min(100vh - 120px,36vw);height:auto;aspect-ratio:1/1}
  @supports (height:100svh){ html.fq #moments .dial:is(#slz,*){width:min(100svh - 120px,36vw)} }
  html.fq #moments .dleg:is(#slz,*){display:none}
  html.fq #moments .mb-toc:is(#slz,*),html.fq #moments .mb-chips:is(#slz,*){display:none}
  html.fq #moments .mb-feat.c3h .mb-in.c3:is(#slz,*){padding:12px 16px}
  /* 影像：纵深轮播（同手机竖屏） */
  /* 影像：银河上的纵深轮播 */
  html.fq #gallery.gxm .gband:is(#slz,*),html.fq #gallery.gxm canvas.ggl:is(#slz,*){display:none}
  html.fq #gallery.gxm .gw.gx:is(#slz,*){position:relative;width:auto;max-width:none;height:auto;aspect-ratio:auto;margin:var(--sec-in,24px) 0 0;padding:44px 0 16px;overflow:hidden}
  html.fq #gallery.gxm .gxb:is(#slz,*){position:absolute;left:-30%;right:-30%;top:44%;height:120%;transform:translateY(-50%) rotate(-16deg);pointer-events:none;filter:blur(3px);
    background:radial-gradient(56% 30% at 50% 50%,rgba(236,240,255,.46),rgba(180,194,255,.22) 40%,rgba(120,140,220,.08) 66%,transparent 82%),radial-gradient(18% 34% at 34% 46%,rgba(240,166,196,.16),transparent 70%),radial-gradient(22% 30% at 68% 56%,rgba(150,175,255,.18),transparent 70%)}
  html.fq #gallery.gxm .gxd:is(#slz,*){position:absolute;left:-30%;right:-30%;top:44%;height:30%;transform:translateY(-50%) rotate(-16deg);pointer-events:none;opacity:.7;filter:blur(4px);
    background:radial-gradient(12% 40% at 18% 55%,rgba(3,5,12,.9),transparent 70%),radial-gradient(16% 30% at 44% 42%,rgba(3,5,12,.8),transparent 70%),radial-gradient(10% 40% at 62% 60%,rgba(3,5,12,.85),transparent 70%),radial-gradient(14% 30% at 84% 45%,rgba(3,5,12,.8),transparent 70%)}
  html.fq #gallery.gxm .gxs:is(#slz,*){position:absolute;inset:0;pointer-events:none}
  html.fq #gallery.gxm .gxs i:is(#slz,*){position:absolute;border-radius:50%;background:#e6ecff}
  /* 白天是云河：只有柔和的光带（颜色取自照片），没有星和尘埃带 */
  html.fq[data-phase=day] #gallery.gxm .gxb:is(#slz,*){background:radial-gradient(56% 30% at 50% 50%,rgba(var(--gbA,255,255,255),.55),rgba(var(--gbB,230,238,255),.22) 42%,transparent 80%);filter:blur(8px)}
  html.fq[data-phase=day] #gallery.gxm .gxd:is(#slz,*),html.fq[data-phase=day] #gallery.gxm .gxs:is(#slz,*){display:none}
  html.fq #gallery.gxm .gxcf:is(#slz,*){position:relative;perspective:1000px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
  html.fq #gallery.gxm .gw.gx .ph:is(#slz,*){position:absolute;left:50%;top:0;margin:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s;transform-style:preserve-3d}
  html.fq #gallery.gxm .gxcf.drag .ph:is(#slz,*){transition:none}
  html.fq #gallery.gxm .gw.gx .pfl:is(#slz,*){animation:none}
  html.fq #gallery.gxm .gw.gx .ph img:is(#slz,*){display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;pointer-events:none;-webkit-user-drag:none;box-shadow:0 0 0 1px rgba(214,226,255,.16),0 0 28px -8px rgba(170,190,255,.55),0 24px 40px -24px #000}
  html.fq #gallery.gxm .gw.gx .ph.c img:is(#slz,*){box-shadow:0 0 0 1px rgba(214,226,255,.3),0 0 40px -6px rgba(190,205,255,.7),0 24px 40px -24px #000}
  html.fq #gallery.gxm .gw.gx .ph figcaption:is(#slz,*){display:none}
  html.fq #gallery.gxm .gxcap:is(#slz,*){position:relative;text-align:center;font-size:var(--fs-13);color:var(--ink2);margin-top:6px;min-height:22px;padding:0 16px}
  html.fq #gallery.gxm .gxcap b:is(#slz,*){color:var(--ink);margin-right:6px}
  html.fq #gallery.gxm .gxsc:is(#slz,*){position:relative;height:34px;margin:8px 16% 0;cursor:pointer;touch-action:none;outline-offset:4px}
  html.fq #gallery.gxm .gxsc .bd:is(#slz,*){position:absolute;left:-4%;right:-4%;top:12px;height:10px;border-radius:5px;background:linear-gradient(90deg,transparent,rgba(170,186,255,.18) 15%,rgba(226,232,255,.28) 50%,rgba(240,166,196,.16) 85%,transparent);filter:blur(1.5px)}
  html.fq #gallery.gxm .gxsc .st:is(#slz,*){position:absolute;top:17px;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#dfe6ff;opacity:.55}
  html.fq #gallery.gxm .gxsc .hd:is(#slz,*){position:absolute;top:17px;width:0;height:0}
  html.fq #gallery.gxm .gxsc .hd:is(#slz,*)::before,html.fq #gallery.gxm .gxsc .hd:is(#slz,*)::after{content:'';position:absolute;left:-9px;top:-1px;width:18px;height:2px;border-radius:1px;background:linear-gradient(90deg,transparent,#fff,transparent)}
  html.fq #gallery.gxm .gxsc .hd:is(#slz,*)::after{transform:rotate(90deg)}
  html.fq #gallery.gxm .gxsc .hd i:is(#slz,*){position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(200,215,255,.85)}
  html.fq[data-ink=dark] #gallery.gxm .gxsc .hd i:is(#slz,*){background:#7FA8E0;box-shadow:0 0 8px 2px rgba(80,130,200,.6)}
  html.fq[data-ink=dark] #gallery.gxm .gxsc .st:is(#slz,*){background:#5d7aa6}
  html.fq #gallery.gxm .gxi:is(#slz,*){position:relative;font:600 var(--fs-11) var(--mono);color:var(--ink3);text-align:center;margin-top:2px}
  html.fq #gallery.gxm .gxsc:is(#slz,*){display:flex;justify-content:center;align-items:center;gap:6px;height:auto;margin:10px 12px 0;padding:10px 0;touch-action:pan-y;cursor:default}
  html.fq #gallery.gxm .gxsc .bd:is(#slz,*){left:0;right:0;top:50%;height:12px;margin-top:-6px}
  html.fq #gallery.gxm .gxt:is(#slz,*){position:relative;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:none;cursor:pointer;opacity:.55;transition:width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),opacity .28s;-webkit-tap-highlight-color:transparent}
  html.fq #gallery.gxm .gxt img:is(#slz,*){display:block;width:100%;height:100%;object-fit:cover;border-radius:9px;pointer-events:none;-webkit-user-drag:none;box-shadow:0 0 0 1px rgba(214,226,255,.28),0 0 10px -2px rgba(190,205,255,.55)}
  html.fq #gallery.gxm .gxt.on:is(#slz,*){width:52px;height:52px;opacity:1}
  html.fq #gallery.gxm .gxt.on img:is(#slz,*){border-radius:11px;box-shadow:0 0 0 2px #9fe0f2,0 0 18px 3px rgba(159,224,242,.5)}
  html.fq #gallery.gxm .gxt.on:is(#slz,*)::before,html.fq #gallery.gxm .gxt.on:is(#slz,*)::after{content:'';position:absolute;right:-8px;top:-2px;width:16px;height:2px;border-radius:1px;background:linear-gradient(90deg,transparent,#fff,transparent);z-index:1}
  html.fq #gallery.gxm .gxt.on:is(#slz,*)::after{transform:rotate(90deg)}
  html.fq #gallery.gxm .gxt:focus-visible:is(#slz,*){outline:2px solid var(--acc);outline-offset:3px}
  html.fq[data-ink=dark] #gallery.gxm .gxt.on img:is(#slz,*){box-shadow:0 0 0 2px #2C6FB4,0 0 14px 2px rgba(44,111,180,.35)}
  html.fq[data-ink=dark] #gallery.gxm .gxt.on:is(#slz,*)::before,html.fq[data-ink=dark] #gallery.gxm .gxt.on:is(#slz,*)::after{background:linear-gradient(90deg,transparent,#2C6FB4,transparent)}
  /* 影像：水平纵深轮播 + 倒影 */
  html.fq #gallery.gxm .gw.gx .ph img:is(#slz,*){-webkit-box-reflect:below 4px linear-gradient(transparent 72%,rgba(255,255,255,.14))}
  html.fq #gallery.gxm .gw.gx:is(#slz,*){padding-top:18px}
  html.fq #gallery.gxm .gxi:is(#slz,*),html.fq #gallery.gxm .gxsc .bd:is(#slz,*){display:none}
  /* 缩略图：E3 原样 */
  html.fq #gallery.gxm .gxsc:is(#slz,*){padding:6px 0;margin-top:6px}
  html.fq #gallery.gxm .gxt:is(#slz,*){border-radius:6px;opacity:.5}
  html.fq #gallery.gxm .gxt img:is(#slz,*){border-radius:6px;box-shadow:none}
  html.fq #gallery.gxm .gxt.on:is(#slz,*){opacity:1}
  html.fq #gallery.gxm .gxt.on img:is(#slz,*){border-radius:6px;box-shadow:none;outline:2px solid var(--acc,#7FD0E6);outline-offset:1px}
  html.fq #gallery.gxm .gxt.on:is(#slz,*)::before,html.fq #gallery.gxm .gxt.on:is(#slz,*)::after{display:none}
  html.fq[data-ink=dark] #gallery.gxm .gxt.on img:is(#slz,*){box-shadow:none;outline-color:#2C6FB4}
  html.fq #gallery.gxm .gw.gx:is(#slz,*){margin-left:calc(-1 * var(--slM,24px));margin-right:calc(-1 * var(--slM,24px));padding-top:8px}
  /* 缩略图变成一排小圆点 */
  html.fq #gallery.gxm .gxsc:is(#slz,*){gap:2px;padding:4px 0;margin-top:2px}
  html.fq #gallery.gxm .gxt:is(#slz,*){width:22px;height:22px;opacity:1;border-radius:0;display:flex;align-items:center;justify-content:center}
  html.fq #gallery.gxm .gxt.on:is(#slz,*){width:30px;height:22px}
  html.fq #gallery.gxm .gxt img:is(#slz,*){display:none}
  html.fq #gallery.gxm .gxt:is(#slz,*)::after{content:'';display:block;position:static;transform:none;width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.3);transition:width .25s,background .25s}
  html.fq #gallery.gxm .gxt.on:is(#slz,*)::after{display:block;position:static;transform:none;width:18px;height:6px;border-radius:3px;background:var(--acc,#7FD0E6)}
  html.fq #gallery.gxm .gxt.on:is(#slz,*)::before{display:none}
  html.fq[data-ink=dark] #gallery.gxm .gxt:is(#slz,*)::after{background:rgba(20,40,80,.25)}
  html.fq[data-ink=dark] #gallery.gxm .gxt.on:is(#slz,*)::after{background:#2C6FB4}
  html.fq #gallery.gxm .gxcap:is(#slz,*){margin-top:-34px}
  html.fq #gallery.gxm .gw.gx .ph img:is(#slz,*){-webkit-box-reflect:none}
  html.fq #gallery.gxm .gw.gx:is(#slz,*){padding-bottom:4px}
  /* 文章：左右横滑 */
  html.fq #catalog .grid:is(#slz,*){display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--slM,24px);margin:16px calc(-1 * var(--slM,24px)) 0;padding:0 var(--slM,24px) 8px;scrollbar-width:none;align-items:stretch}
  html.fq #catalog .grid:is(#slz,*)::-webkit-scrollbar{display:none}
  html.fq #catalog .grid .cc:is(#slz,*){flex:none;width:min(46vw,380px);scroll-snap-align:start;padding-top:14px;padding-bottom:14px}
  html.fq #catalog .cc ol li:nth-child(n+5):is(#slz,*){display:none}
  html.fq #catalog .cc ol li:is(#slz,*){padding-top:5px;padding-bottom:5px}
}
/* ==== css-v336 ==== */
/* v33.6 统一方案第 3 步 */
@media (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .gw.tp:is(#slz,*){width:calc(100% - 2 * var(--slM,96px));max-width:none;height:auto;margin-left:auto;margin-right:auto}
  html.fq .gw.tp .ph img:is(#slz,*){height:auto;border-radius:10px}
  html.fq .gw.tp .ph figcaption:is(#slz,*){margin-top:8px;font-size:var(--fs-12)}
}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq #moments .sh:is(#slz,*){flex-direction:column;align-items:flex-start;justify-content:flex-start}
  html.fq #moments .sh>.btn:is(#slz,*){display:inline-flex}
  html.fq #moments .mmore:is(#slz,*){display:none}
}
/* ==== css-v337 ==== */
/* v33.7 影像柔光、瞬间卡片投影不再被切出硬边 */
html.fq #gallery.gxm .gw.gx:is(#slz,*){overflow:visible}
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq #moments .mb-rail:is(#slz,*){padding-bottom:34px;margin-bottom:-26px}
}
@media (orientation:portrait) and (min-width:768px) and (max-width:1100px) and (max-height:1599px){
  html.fq #moments .mb-rail:is(#slz,*){padding-bottom:36px;margin-bottom:-26px}
}
/* ==== css-v338 ==== */
/* v33.8 平板 / 笔记本竖屏：瞬间卡片不再矮胖；文章分类多时左右横滑 */
@media (orientation:portrait) and (min-width:600px) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (min-width:600px) and (max-width:899px){
  html.fq #moments .mb-rc:is(#slz,*){flex-basis:clamp(320px,60%,400px)}
  html.fq #moments .mb-cov:is(#slz,*){aspect-ratio:4/3}
  html.fq #moments .mb-rc .mb-in.c3:is(#slz,*){--fn:3 !important}
  html.fq #moments .mb-rc .mb-cov.sky+.mb-in.c3:is(#slz,*){--fn:5 !important}
  html.fq #catalog .grid:has(>.cc:nth-child(4)):is(#slz,*){display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--slM,48px);margin:24px calc(-1 * var(--slM,48px)) 0;padding:0 var(--slM,48px) 10px;scrollbar-width:none;align-items:stretch;overscroll-behavior-x:contain}
  html.fq #catalog .grid:has(>.cc:nth-child(4)):is(#slz,*)::-webkit-scrollbar{display:none}
  html.fq #catalog .grid:has(>.cc:nth-child(4)):is(#slz,*)>.cc{flex:none;width:min(42vw,360px);scroll-snap-align:start;grid-column:auto}
}
/* ==== css-v339 ==== */
/* v33.9 电脑屏：文章分类多时左右横滑，区块头加 ‹ › 翻页 */
#catalog .cnav{display:none}
@media (orientation:landscape) and (min-height:480px), (orientation:portrait) and (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq #catalog .grid:has(>.cc:nth-child(4)):is(#slz,*){--cm:calc(var(--slM,96px) / var(--slS,1));display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--cm);margin-left:calc(-1 * var(--cm));margin-right:calc(-1 * var(--cm));padding:0 var(--cm) 10px;scrollbar-width:none;align-items:stretch;overscroll-behavior-x:contain;position:relative;scroll-behavior:smooth}
  html.fq #catalog .grid:has(>.cc:nth-child(4)):is(#slz,*)::-webkit-scrollbar{display:none}
  html.fq #catalog .grid:has(>.cc:nth-child(4)):is(#slz,*)>.cc{flex:none;width:clamp(280px,26vw,360px);scroll-snap-align:start;grid-column:auto}
}
@media (hover:hover) and (pointer:fine){
  @media (orientation:landscape) and (min-height:480px), (orientation:portrait) and (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
    html.fq #catalog .sh .cnav:is(#slz,*){display:inline-flex;align-items:center;gap:8px;margin-left:auto;margin-right:-8px;align-self:flex-end;height:38px}
    html.fq #catalog .sh .cnav[hidden]:is(#slz,*){display:none}
  }
}
#catalog .cn-ar{position:relative;flex:none;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid rgba(127,200,224,.28);background:rgba(127,200,224,.06);cursor:pointer;transition:background-color .2s,border-color .2s,opacity .2s}
#catalog .cn-ar::before{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;border:solid var(--acc);border-width:0 0 1.5px 1.5px;transform:translate(-30%,-50%) rotate(45deg)}
#catalog .cn-ar.r::before{transform:translate(-70%,-50%) rotate(-135deg)}
#catalog .cn-ar:hover:not(:disabled){background:rgba(127,200,224,.16);border-color:rgba(127,200,224,.6)}
#catalog .cn-ar:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#catalog .cn-ar:disabled{opacity:.35;cursor:default}
html[data-ink=dark] #catalog .cn-ar{border-color:rgba(44,111,180,.3);background:rgba(44,111,180,.06)}
html[data-ink=dark] #catalog .cn-ar::before{border-color:#2C6FB4}
/* 没图的瞬间卡片：封面和有图的一样高，正文行数一样，夜里加淡星点 */
@media (orientation:portrait) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (max-width:899px){
  html.fq #moments .mb-rc .mb-cov.sky:is(#slz,*){aspect-ratio:16/9}
  html.fq #moments .mb-rc .mb-cov.sky+.mb-in.c3:is(#slz,*){--fn:2 !important}
  html.fq #moments .mb-rc .mb-cov.sky:not(.d):is(#slz,*){background:radial-gradient(1.2px 1.2px at 12% 22%,rgba(255,255,255,0.55),transparent),radial-gradient(1.2px 1.2px at 27% 58%,rgba(255,255,255,0.35),transparent),radial-gradient(1.2px 1.2px at 38% 14%,rgba(255,255,255,0.50),transparent),radial-gradient(1.2px 1.2px at 52% 40%,rgba(255,255,255,0.30),transparent),radial-gradient(1.2px 1.2px at 61% 70%,rgba(255,255,255,0.40),transparent),radial-gradient(1.2px 1.2px at 70% 18%,rgba(255,255,255,0.60),transparent),radial-gradient(1.2px 1.2px at 83% 46%,rgba(255,255,255,0.35),transparent),radial-gradient(1.2px 1.2px at 91% 28%,rgba(255,255,255,0.45),transparent),radial-gradient(1.2px 1.2px at 18% 78%,rgba(255,255,255,0.30),transparent),radial-gradient(1.2px 1.2px at 45% 82%,rgba(255,255,255,0.25),transparent),radial-gradient(1.2px 1.2px at 77% 84%,rgba(255,255,255,0.30),transparent),radial-gradient(1.2px 1.2px at 33% 36%,rgba(255,255,255,0.25),transparent),radial-gradient(120% 100% at 72% 0%,#3a4f96,#16204a 58%,#0b1126)}
  html.fq #moments .mb-rc .mb-cov.sky.d:is(#slz,*){background:radial-gradient(42% 12% at 28% 58%,rgba(255,255,255,.2),transparent 70%),radial-gradient(34% 9% at 70% 44%,rgba(255,255,255,.16),transparent 70%),radial-gradient(26% 7% at 52% 70%,rgba(255,255,255,.12),transparent 70%),radial-gradient(120% 100% at 72% 0%,#9cc8f0,#3d6fae 58%,#1e3c6e)}
}
@media (orientation:portrait) and (min-width:600px) and (max-width:1100px) and (max-height:1599px), (orientation:portrait) and (min-width:600px) and (max-width:899px){
  html.fq #moments .mb-rc .mb-cov.sky:is(#slz,*){aspect-ratio:4/3}
  html.fq #moments .mb-rc .mb-cov.sky+.mb-in.c3:is(#slz,*){--fn:3 !important}
}
/* ==== css-v340 ==== */
/* 导航居中：主导航在 logo 与右侧胶囊之间的正中 */
@media (orientation:landscape) and (min-width:1100px), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .hd:is(#slz,*){grid-template-columns:auto minmax(0,1fr) auto;column-gap:calc(24px * var(--slS,1))}
  html.fq .hd nav:is(#slz,*){justify-self:center;margin-left:0;margin-right:0}
  html.fq .hd .hr2:is(#slz,*){justify-self:end}
}
/* ==== css-v341 ==== */
/* 导航不折行：放不下时收起「生活配乐」胶囊（html.hd-tight），还不够再收紧导航间距（html.hd-tight2） */
@media (orientation:landscape) and (min-width:1100px), (min-width:1101px), (orientation:portrait) and (min-width:900px) and (min-height:1600px){
  html.fq .hd nav a:is(#slz,*){white-space:nowrap}
  html.fq.hd-tight .hd .mpill:is(#slz,*){width:auto !important;padding:0 11px 0 10px;gap:6px}
  html.fq.hd-tight .hd .mpill span:is(#slz,*){display:none}
  html.fq.hd-tight2 .hd nav:is(#slz,*){gap:calc(18px * var(--slS,1))}
}
/* ==== css-v342 ==== */
/* 星官提示只在首页：归档、标签、文章、登录页借用首页的星空和页头，但不显示「文章星官此刻都在地平线下」那组提示、屏幕边上的星官名、湖面托盘、指南针、转向按钮、回到此刻 */
html.sl-arch :is(.slempty,.edges,.tray,.cmp,.pan,.sl-now),html.sl-login :is(.slempty,.edges,.tray,.cmp,.pan,.sl-now),html.sl-post :is(.slempty,.edges,.tray,.cmp,.pan,.sl-now){display:none!important}
/* ==== Star Lake 主题 ==== */
/* 瞬间、影像、关于、留言、作者、错误、单页的内容层在 shadow DOM 里，样式表是外链：没加载好、还没淡入（.on）之前先藏起来，免得闪一下没样式的内容 */
:is(#slm,#slph,#slab,#slgb,#slau,#sler,#sldc):not(.on){opacity:0}
/* 服务端先渲染的正文、评论：脚本把它们搬进阅读层之前藏在屏幕外（不用 display:none，读屏和搜索引擎照样能读） */
.sl-src{position:absolute!important;left:-10000px!important;top:0;width:1px;height:1px;overflow:hidden}
/* Halo 评论组件（文章页 .pcw、单页 .sl-page-cm）：配色跟着页面深浅走（html 的 data-color-scheme），强调色用湖边的暖橙 */
:is(#slp .pcw,.sl-page-cm){--halo-cw-base-font-family:inherit;--halo-cw-base-rounded:12px;--halo-cw-avatar-rounded:50%}
html[data-color-scheme=dark] :is(#slp .pcw,.sl-page-cm){--halo-cw-primary-1-color:#E8925F;--halo-cw-primary-2-color:#D27C4B;--halo-cw-primary-3-color:#B5663A;--halo-cw-text-1-color:#E6ECF8;--halo-cw-text-2-color:#C2CBDE;--halo-cw-text-3-color:#8792AC;--halo-cw-muted-1-color:rgba(180,195,230,.34);--halo-cw-muted-2-color:rgba(180,195,230,.18);--halo-cw-muted-3-color:rgba(255,255,255,.05)}
html[data-color-scheme=light] :is(#slp .pcw,.sl-page-cm){--halo-cw-primary-1-color:#C65A22;--halo-cw-primary-2-color:#A94A1A;--halo-cw-primary-3-color:#8C3D15;--halo-cw-text-1-color:#15213A;--halo-cw-text-2-color:#38455E;--halo-cw-text-3-color:#64708A;--halo-cw-muted-1-color:rgba(20,40,70,.3);--halo-cw-muted-2-color:rgba(20,40,70,.15);--halo-cw-muted-3-color:rgba(20,40,70,.05)}
/* 内容层在 shadow DOM 里的页面（瞬间、影像、关于、留言、作者、错误、单页）：页脚接进内容层的 slot，在页面这一层让它显示出来（shadow 里的样式表管不到这里） */
html.sl-photo #slph>footer.ft,html.sl-mom #slm>footer.ft,html.sl-about #slab>footer.ft,html.sl-gb #slgb>footer.ft,html.sl-author #slau>footer.ft,html.sl-err #sler>footer.ft,html.sl-doc #sldc>footer.ft{visibility:visible!important;pointer-events:auto!important;position:relative;z-index:1;margin-top:20px}