/* 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,");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} /* ===== 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)} /* 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}} /* ===== 「瞬间」方案 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}} /* 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}} /* 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}} /* 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} /* 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} } /* ===== 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}} /* ===== 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)} /* ===== 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}} /* ===== 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}} /* ===== 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} } /* ===== 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)} } /* v29.0 的卡片连线在 v29.2 取消（按要求）；保留这个样式块的位置 */ /* ===== 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}} /* ===== 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} /* 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); } /* 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)} } /* 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))} } /* 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)} } /* 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} } /* 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}} /* 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} } /* 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)} /* 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} /* 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} } /* 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}} /* 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} } /* 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)} } /* 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} } /* 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} } /* 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} } /* v32.6 竖屏：瞬间区不显示 5 条瞬间列表（只留当前卡片） */ @media (orientation:portrait){ html.fq #moments .mb-toc:is(#slz,*){display:none} } /* 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} } /* 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} } /* 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} } /* 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} } /* 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} } } /* 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} } /* 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} } /* 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} } } /* 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} } /* 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} } /* 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} } /* 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} } /* 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} } /* 导航居中：主导航在 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} } /* 导航不折行：放不下时收起「生活配乐」胶囊（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))} } /* 星官提示只在首页：归档、标签、文章、登录页借用首页的星空和页头，但不显示「文章星官此刻都在地平线下」那组提示、屏幕边上的星官名、湖面托盘、指南针、转向按钮、回到此刻 */ 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} /* E1 首帧有字（0.3.24 起，build_starlake.py 接在 extra.css 末尾）：#app 里先放一份首屏正文骨架（模板写好结构，ssr-lede.js 填字、摆位置）， 引擎启动后整页换成引擎画的页面。骨架只给看，不能点；脚本没跑（关了 JS、地址带测试参数）时不显示。 */ #app > .sl-ssr{visibility:hidden} html.sl-ssr-on #app > .sl-ssr{visibility:visible} #app > .sl-ssr,#app > .sl-ssr *{pointer-events:none!important} /* 引擎接管时：正文的进场接着骨架已经播到的地方往下播（--slE = 已经过去的秒数，由 starlake.js 写入），不从头再播一次 */ html.fq.sl-ssr-on.sl-enter .lede>.kk{animation-delay:calc(.2s - var(--slE,0s))} html.fq.sl-ssr-on.sl-enter .lede h1 .l1{animation-delay:calc(.28s - var(--slE,0s))} html.fq.sl-ssr-on.sl-enter .lede h1 .l2{animation-delay:calc(.36s - var(--slE,0s))} html.fq.sl-ssr-on.sl-enter .lede>.why{animation-delay:calc(.44s - var(--slE,0s))} html.fq.sl-ssr-on.sl-enter .lede>.btns{animation-delay:calc(.52s - var(--slE,0s))} html.fq.sl-ssr-on.sl-enter .lede>.nwr,html.fq.sl-ssr-on.sl-enter .lede>.now{animation-delay:calc(.6s - var(--slE,0s))} /* 页头、托盘在骨架里没有：引擎接管时淡入，不突然冒出来 */ html.fq.sl-ssr-on.sl-enter .hd,html.fq.sl-ssr-on.sl-enter .tray{animation:slSkyIn .6s ease both} /* 骨架里的第二个按钮（「等一颗流星」「看一条瞬间」）由引擎按天色和瞬间来源写字，骨架里先不显示，免得出现一个空圆圈 */ #app > .sl-ssr .b2{visibility:hidden} /* 0.3.28：骨架里的正文、以及引擎接手时的正文，只上浮、不从透明淡入——手机上引擎脚本占住主线程时进场动画会卡在起点， 从透明淡入的话就只剩一片底色、看不到字；只上浮时字从第一帧起就在 */ @keyframes slRise12t{from{transform:translateY(12px)}to{transform:none}} html.fq.sl-ssr-on.sl-enter .lede>.kk,html.fq.sl-ssr-on.sl-enter .lede h1 .l1,html.fq.sl-ssr-on.sl-enter .lede h1 .l2,html.fq.sl-ssr-on.sl-enter .lede>.why,html.fq.sl-ssr-on.sl-enter .lede>.btns,html.fq.sl-ssr-on.sl-enter .lede>.nwr,html.fq.sl-ssr-on.sl-enter .lede>.now{animation-name:slRise12t}