/* ══════════════════════════════════════════════════════════════════════════
   精灵 · Web 端皮肤系统 v1.0
   ──────────────────────────────────────────────────────────────────────────
   两个维度，与桌面端（desktop/skin-modes.css）保持同一套视觉与参数：

     ① 皮肤档    html[data-skin]      white=纯白 / black=纯黑
     ② 动态星空   html[data-sky]       on / off（默认 on，仅 black 档可见）

   ── 为什么不复用 html[data-theme]（重要，别再改回去）──────────────────
   Web 端的 data-theme 是个历史遗留的混战区，同一个值有三处不同含义：
     · css/style.css:633    [data-theme="dark"] = 浅紫藤（--primary:#8B7CF6）
     · css/style.css        [data-theme="ink"]  = 墨水蓝
     · ling-control-center  [data-theme="dark"] = GitHub 深灰（--bg:#0d1117）
     · js/ling_restore.js   THEME_CYCLE = ['light','dark','ink']
   再往 data-theme 上加第 4 种含义必然互相踩。故皮肤档另开 data-skin，
   与历史遗留完全正交、互不影响；星空属性 data-sky 沿用桌面端同名同值，
   CSS 可整段复用。

   ── 零回归保证 ─────────────────────────────────────────────────────────
   本文件每一条规则都限定在 :root[data-skin=...] 作用域内。
   未设 data-skin 时（含所有未接入的历史页面）本文件等于不存在，
   style.css 原暖白外观一字不变。

   ── 纯白档为什么也要显式覆盖 ───────────────────────────────────────────
   style.css 默认是暖白系（--bg-primary:#FFFBF5 / --bg-sidebar:#FFF8F0 /
   --text-primary:#3C2820 暖棕），"纯白"必须把它中性化，否则白底上泛暖黄。
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════ 一、纯白档（全中性，无暖黄）══════════════ */
:root[data-skin="white"]{
  --bg-main:#FFFFFF;
  --bg-primary:#FFFFFF;
  --bg-sidebar:#FAFAFB;               /* 极淡中性灰，仅为分区 */
  --bg-card:#FFFFFF;
  --bg-input:#FFFFFF;
  --border:#E8E8EC;
  --border-soft:#F0F0F3;
  --text-primary:#2A2A2E;             /* 中性近黑，不用暖棕 #3C2820 */
  --text-secondary:#5F5F66;
  --text-muted:#9A9AA1;
  --bg-message-ling:#F5F5F7;
  --bg-message-user:#F5F5F7;
}

/* ══════════════ 二、纯黑档 ══════════════ */
:root[data-skin="black"]{
  /* 品牌色保持 style.css 原值，不动（Web 端太阳橙 #FF9614） */
  --primary-light:rgba(255,150,20,.30);
  --primary-glow:rgba(255,150,20,.22);

  --bg-main:#000000;
  --bg-primary:#0A0A0C;
  --bg-sidebar:#070708;
  --bg-card:#0A0A0C;
  --bg-input:#101013;
  --border:#26262A;
  --border-soft:rgba(255,255,255,.07);
  --text-primary:#D4D4D8;             /* 对 #000000 ≈ 13.9:1，落在护眼舒适区 */
  --text-secondary:#9A9AA0;           /* 7.4:1 */
  --text-muted:#6E6E74;
  --text-accent:#FFA95C;
  --bg-message-ling:#0F0F12;
  --bg-message-user:rgba(255,150,20,.14);
  --safe-green:#00b876;
  --crisis-red:#F09595;

  /* 皮肤自用 */
  --glass-panel:rgba(10,10,12,.60);
  --glass-sidebar:rgba(8,8,10,.56);
  --hard-card:#0A0A0C;
  --hard-panel:#0D0D10;
}

/* 1.1 body / 页面底：style.css 的 body 是暖白渐变，深色下必须整块换掉 */
:root[data-skin="black"] body{
  background:var(--bg-main) !important;
  color:var(--text-primary);
}
/* 1.2 侧栏毛玻璃（否则背后的星空被一块不透明板挡住） */
:root[data-skin="black"] .sidebar,
:root[data-skin="black"] .app-sidebar,
:root[data-skin="black"] aside.sidebar{
  background:var(--glass-sidebar) !important;
  border-color:var(--border) !important;
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
}
/* 1.3 主区透明：星空从整块内容区透出，只留卡片作不透明的「面」 */
:root[data-skin="black"] .main-content,
:root[data-skin="black"] .chat-area,
:root[data-skin="black"] main{
  background:transparent !important;
}
/* 1.4 卡片 / 面板：半透明，保留前后关系 */
:root[data-skin="black"] .card,
:root[data-skin="black"] .panel,
:root[data-skin="black"] .modal,
:root[data-skin="black"] .dropdown,
:root[data-skin="black"] .input-area,
:root[data-skin="black"] .message.ling .bubble,
:root[data-skin="black"] .message.user .bubble{
  border-color:var(--border);
}
/* 1.5 顶栏 */
:root[data-skin="black"] .topbar,
:root[data-skin="black"] header.topbar{
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--glass-line, rgba(255,255,255,.075));
}

/* ══════════════════════════════════════════════════════════════════════════
   三、深色下必须逐条覆盖的硬编码
   style.css 的 :root 之外还有 282 个 hex + 278 个 rgba 不走变量。
   下列是「深底上会失效」的那几类：暖棕系文字（不可读）、白底块（刺眼）。
   ══════════════════════════════════════════════════════════════════════════ */

/* 3.1 暖棕系文字色 —— 深底上几乎不可读，统一提到中性亮阶 */
:root[data-skin="black"] [style*="color:#3c2820"],
:root[data-skin="black"] [style*="color:#5c4033"],
:root[data-skin="black"] [style*="color:#8b7355"]{
  color:var(--text-primary) !important;
}
/* 3.2 直接用色值的标题/副标题类 */
:root[data-skin="black"] .subtitle,
:root[data-skin="black"] .desc,
:root[data-skin="black"] .hint{ color:var(--text-secondary) }

/* 3.3 白底块：原本 #FFFFFF 的容器在深色下会变成一块白斑 */
:root[data-skin="black"] .avatar,
:root[data-skin="black"] .logo-badge,
:root[data-skin="black"] .brand-logo{
  background:var(--hard-card);
  border-color:var(--border);
}

/* 3.4 滚动条：style.css 用浅色滑块，深底上是条亮线 */
:root[data-skin="black"] ::-webkit-scrollbar-thumb{ background:var(--border) }
:root[data-skin="black"] ::-webkit-scrollbar-thumb:hover{ background:var(--text-muted) }
:root[data-skin="black"] ::-webkit-scrollbar-track{ background:transparent }

/* 3.5 侧栏菜单：原为暖棕文字（#5C4033 / #A08060），深底上几乎不可读 */
:root[data-skin="black"] .bar-label{ color:var(--text-primary) }
:root[data-skin="black"] .bar-arrow{ color:var(--text-muted) }
:root[data-skin="black"] .bar-arrow.open{ color:var(--text-accent) }
:root[data-skin="black"] .bar-item{ border-bottom-color:var(--border-soft) }

/* 3.6 侧栏内的暖白半透明块（状态卡 / 资料卡 / 账号区） */
:root[data-skin="black"] .sidebar .status-card,
:root[data-skin="black"] .sidebar .profile-card,
:root[data-skin="black"] .sidebar .q-progress,
:root[data-skin="black"] .sidebar .sidebar-modules,
:root[data-skin="black"] .sidebar .auth-user{
  background:rgba(255,255,255,.045);
  border-color:var(--border);
}
:root[data-skin="black"] .status-label,
:root[data-skin="black"] .sidebar .status-label{ color:var(--text-secondary) }
:root[data-skin="black"] .sidebar .status-value{ color:var(--text-accent) }
:root[data-skin="black"] .profile-summary{ background:rgba(255,255,255,.05) }

/* 3.7 对话模式分段胶囊：原 rgba(255,255,255,.55) 白胶囊 + 四色浅底 */
:root[data-skin="black"] .mode-chip{
  background:rgba(255,255,255,.06);
  border-color:var(--border);
  color:var(--text-secondary);
}
:root[data-skin="black"] .mode-chip:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,150,20,.40);
}
:root[data-skin="black"] .mode-chip:not(.active) .chip-dot{ background:#6E6E74 }
/* 激活态保留四色语义，改成深底亮字 —— 直接把浅底改深，文字不改就会糊成一片 */
:root[data-skin="black"] .mode-chip.active[data-mode="casual"] { background:rgba(0,185,107,.16);   color:#5DCAA5 }
:root[data-skin="black"] .mode-chip.active[data-mode="expert"] { background:rgba(139,124,246,.18); color:#B4A9FF }
:root[data-skin="black"] .mode-chip.active[data-mode="sandbox"]{ background:rgba(0,185,107,.16);   color:#5DCAA5 }
:root[data-skin="black"] .mode-chip.active[data-mode="camp"]   { background:rgba(255,150,20,.16);  color:#FFA95C }

/* 3.8 其余白底块：二级页 / 情景卡 / 报告解析卡 / 答题卡 / 各类提示卡 */
:root[data-skin="black"] .secondary-page,
:root[data-skin="black"] .scenario-chip,
:root[data-skin="black"] .scenario-chip.locked,
:root[data-skin="black"] .likert-btn,
:root[data-skin="black"] .q-option,
:root[data-skin="black"] .crisis-card,
:root[data-skin="black"] .msg-exit-item,
:root[data-skin="black"] .report-card .dim-chip{
  background:var(--hard-panel);
  border-color:var(--border);
  color:var(--text-primary);
}
:root[data-skin="black"] .scenario-chip.locked:hover{ background:#141416 }
:root[data-skin="black"] .report-card{ background:rgba(255,150,20,.10) }
:root[data-skin="black"] .report-card .dim-chip.dim-hi{ background:rgba(240,149,149,.16); color:#F09595 }
:root[data-skin="black"] .report-card .dim-chip.dim-lo{ background:rgba(0,185,107,.16);  color:#5DCAA5 }
:root[data-skin="black"] #quiz-net-warn{ background:rgba(255,150,20,.12); color:var(--text-primary) }
:root[data-skin="black"] #quiz-resume-card{ background:rgba(255,255,255,.05) }
:root[data-skin="black"] .msg-exit-card{ background:rgba(255,255,255,.05) }

/* 3.9 ⚠️ 唯一一个「深色档下必须保持白底」的例外：支付二维码。
   反色后机器扫不出来，付款会直接失败。这条不许删。 */
:root[data-skin="black"] .payment-qr-image{ background:#FFFFFF }

/* 3.10 顶栏小圆按钮：原为 rgba(255,255,255,.6)，深底上是两个白点 */
:root[data-skin="black"] .refresh-chat-btn,
:root[data-skin="black"] .theme-toggle-btn{
  background:rgba(255,255,255,.06);
  border-color:var(--border);
  color:var(--text-secondary);
}
:root[data-skin="black"] .refresh-chat-btn:hover,
:root[data-skin="black"] .theme-toggle-btn:hover{
  background:rgba(255,150,20,.14);
  border-color:rgba(255,150,20,.40);
  color:var(--text-accent);
}

/* 3.11 可引用文件胶囊：原 rgba(255,255,255,.5) 浅底 */
:root[data-skin="black"] .cf-toggle{
  background:rgba(255,255,255,.06);
  border-color:var(--border);
  color:var(--text-secondary);
}
:root[data-skin="black"] .cf-toggle:hover{
  background:rgba(255,150,20,.10);
  border-color:rgba(255,150,20,.40);
}

/* 3.12 皮肤/星空按钮：把原来的空白圆变成「显示当前档名」的按钮
   （原按钮标签由 CSS ::before 提供图标，但实测为空 → 两个圆看不出是什么） */
:root[data-skin] .theme-toggle-btn,
:root[data-skin] .refresh-chat-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;font-weight:500;
}
:root[data-skin="white"] .theme-toggle-btn.is-on,
:root[data-skin="black"] .theme-toggle-btn.is-on{ color:#FF9614 }

/* ══════════════════════════════════════════════════════════════════════════
   四、纯黑下反向修正：本来"深色文字"的按钮/块
   style.css 里有一批用 #fff 作文字、浅色作底的元素，在深色档要反过来，
   否则白字压在上面的浅底上会糊成一片。
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-skin="black"] .btn-light,
:root[data-skin="black"] .tag-soft,
:root[data-skin="black"] .chip{
  background:rgba(255,255,255,.06);
  color:var(--text-secondary);
  border-color:var(--border);
}

/* ══════════════════════════════════════════════════════════════════════════
   五、星空层 · 仅 data-sky="on"（在界面之下）
   三层视差星点（各自呼吸闪烁）+ 星河 + 边缘压暗 + 星环
   DOM 由 /static/js/skin.js 自动注入，页面无需写任何结构
   ══════════════════════════════════════════════════════════════════════════ */
.ling-sky{display:none}
:root[data-skin="black"][data-sky="on"] .ling-sky{
  display:block;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.ling-sky .ls{position:absolute;inset:-25%;display:block}

/* 远层：最密最暗、漂移最慢 */
.ling-sky .ls.far{background-image:
    radial-gradient(2.5px 2.5px at 20px 175px, rgba(255,255,255,0.58), transparent 62%),
    radial-gradient(2.1px 2.1px at 42px 11px, rgba(255,232,200,0.58), transparent 62%),
    radial-gradient(3.1px 3.1px at 188px 183px, rgba(255,255,255,0.58), transparent 62%),
    radial-gradient(3.0px 3.0px at 68px 3px, rgba(255,232,200,0.58), transparent 62%),
    radial-gradient(2.2px 2.2px at 172px 27px, rgba(255,255,255,0.58), transparent 62%),
    radial-gradient(1.4px 1.4px at 86px 23px, rgba(255,255,255,0.58), transparent 62%),
    radial-gradient(2.2px 2.2px at 56px 157px, rgba(212,220,238,0.58), transparent 62%),
    radial-gradient(2.7px 2.7px at 94px 167px, rgba(255,232,200,0.58), transparent 62%),
    radial-gradient(2.2px 2.2px at 60px 67px, rgba(255,255,255,0.58), transparent 62%),
    radial-gradient(3.2px 3.2px at 30px 117px, rgba(255,232,200,0.58), transparent 62%),
    radial-gradient(2.2px 2.2px at 180px 133px, rgba(255,232,200,0.58), transparent 62%),
    radial-gradient(2.4px 2.4px at 30px 137px, rgba(255,232,200,0.58), transparent 62%),
    radial-gradient(2.5px 2.5px at 40px 149px, rgba(255,255,255,0.58), transparent 62%),
    radial-gradient(2.0px 2.0px at 46px 121px, rgba(212,220,238,0.58), transparent 62%);
  background-size:190px 190px;opacity:.62;
  animation:lsDrift 300s linear infinite, twinkleFar 9s ease-in-out -1.5s infinite}

/* 中层 */
.ling-sky .ls.mid{background-image:
    radial-gradient(2.6px 2.6px at 78px 219px, rgba(255,255,255,0.82), transparent 62%),
    radial-gradient(3.4px 3.4px at 70px 127px, rgba(255,255,255,0.82), transparent 62%),
    radial-gradient(2.0px 2.0px at 26px 175px, rgba(255,232,200,0.82), transparent 62%),
    radial-gradient(4.5px 4.5px at 14px 247px, rgba(255,255,255,0.82), transparent 62%),
    radial-gradient(3.3px 3.3px at 82px 215px, rgba(255,232,200,0.82), transparent 62%),
    radial-gradient(2.4px 2.4px at 102px 63px, rgba(212,220,238,0.82), transparent 62%),
    radial-gradient(3.5px 3.5px at 242px 199px, rgba(212,220,238,0.82), transparent 62%),
    radial-gradient(4.4px 4.4px at 244px 227px, rgba(255,255,255,0.82), transparent 62%),
    radial-gradient(3.9px 3.9px at 230px 247px, rgba(255,232,200,0.82), transparent 62%),
    radial-gradient(2.9px 2.9px at 98px 207px, rgba(255,232,200,0.82), transparent 62%),
    radial-gradient(2.1px 2.1px at 54px 83px, rgba(255,255,255,0.82), transparent 62%);
  background-size:260px 260px;opacity:.84;
  animation:lsDrift 190s linear infinite, twinkleMid 13s ease-in-out -7s infinite}

/* 近层：最疏最亮、漂移最快 */
.ling-sky .ls.near{background-image:
    radial-gradient(4.5px 4.5px at 34px 113px, rgba(255,255,255,1.0), transparent 62%),
    radial-gradient(4.2px 4.2px at 64px 105px, rgba(255,255,255,1.0), transparent 62%),
    radial-gradient(5.5px 5.5px at 334px 207px, rgba(212,220,238,1.0), transparent 62%),
    radial-gradient(4.3px 4.3px at 64px 47px, rgba(255,255,255,1.0), transparent 62%),
    radial-gradient(5.1px 5.1px at 6px 349px, rgba(255,232,200,1.0), transparent 62%),
    radial-gradient(5.5px 5.5px at 206px 161px, rgba(255,232,200,1.0), transparent 62%),
    radial-gradient(5.6px 5.6px at 122px 337px, rgba(255,232,200,1.0), transparent 62%),
    radial-gradient(5.8px 5.8px at 264px 51px, rgba(212,220,238,1.0), transparent 62%);
  background-size:350px 350px;opacity:1;
  animation:lsDrift 120s linear infinite, twinkleNear 7s ease-in-out -3.5s infinite}

/* 三层同向不同速 = 视差 → 不用透视也有纵深 */
@keyframes lsDrift{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-350px,-175px,0)}
}
/* 星点呼吸：三层 9 / 13 / 7s 互质且相位错开 → 星区此起彼伏，
   不是整屏一起明暗。幅度压到 25–30%，幅度一大就从"夜空"变"屏保"。 */
@keyframes twinkleFar { 0%,100%{opacity:.62} 50%{opacity:.44} }
@keyframes twinkleMid { 0%,100%{opacity:.84} 50%{opacity:.62} }
@keyframes twinkleNear{ 0%,100%{opacity:1}   50%{opacity:.80} }

/* 星河：把散点星串成有走向的深空（中性白，不带蓝） */
.ling-sky .ls.milky{
  background:linear-gradient(104deg,
    transparent 26%, rgba(198,204,216,.06) 42%, rgba(224,230,242,.10) 50%,
    rgba(198,204,216,.06) 58%, transparent 74%);
  filter:blur(30px);
}
/* 边缘压暗：深邃靠「暗」不靠「亮」—— 加光只会变亮，加暗才变深 */
.ling-sky .ls.vig{
  background:radial-gradient(142% 112% at 50% 44%,
    transparent 42%, rgba(0,2,8,.30) 76%, rgba(0,2,8,.55) 100%);
}

/* ── 星环：暖金主环 + 中性白内环 + 受光亮弧 ── */
.ling-sky .lring,.ling-sky .lring2,.ling-sky .lringlit{
  position:absolute;left:50%;top:50%;width:2000px;height:2000px;
  margin:-1000px 0 0 -1000px;border-radius:50%;
  transform:rotateX(72deg) rotateZ(-14deg);
}
.ling-sky .lring{
  background:radial-gradient(circle,
    transparent 62%,
    rgba(255,180,110,.035) 66%,
    rgba(255,212,152,.115) 70.5%,
    rgba(255,238,208,.27) 72.6%,
    rgba(255,214,158,.115) 74.8%,
    rgba(255,180,110,.035) 79%,
    transparent 83%);
  filter:blur(.6px);
}
.ling-sky .lring2{
  width:1460px;height:1460px;margin:-730px 0 0 -730px;
  background:radial-gradient(circle,
    transparent 71%,
    rgba(202,210,224,.045) 75%,
    rgba(228,234,246,.115) 78%,
    rgba(202,210,224,.045) 81%,
    transparent 85%);
}
/* 受光亮弧：环的立体感全靠这段。弧口极慢摆动（24s）让环"是活的"。 */
.ling-sky .lringlit{
  background:conic-gradient(from 186deg,
    transparent 0deg, rgba(255,226,182,.09) 24deg, rgba(255,244,220,.28) 43deg,
    rgba(255,252,244,.44) 52deg, rgba(255,244,220,.26) 61deg,
    rgba(255,226,182,.09) 80deg, transparent 108deg);
  -webkit-mask:radial-gradient(circle,transparent 65%,#000 70.5%,#000 79%,transparent 84%);
          mask:radial-gradient(circle,transparent 65%,#000 70.5%,#000 79%,transparent 84%);
  filter:blur(2.4px);
  animation:ringSway 24s ease-in-out infinite;
}
@keyframes ringSway{
  0%,100%{opacity:.86; transform:rotateX(72deg) rotateZ(-14deg)}
  50%    {opacity:1;   transform:rotateX(72deg) rotateZ(-12.2deg)}
}

/* ══════════════════════════════════════════════════════════════════════════
   六、流星层 · 仅 data-sky="on"（在界面之上）
   必须叠在 UI 之上：留在 .ling-sky 里会被内容层挡住，只在缝隙透出一点。
   screen 混合让它成为「增加的光」，划过亮底也不遮字。
   参数纪律：16 颗 · 颗距 4.2s · 一轮 67.2s · 头 3px / 尾 196px ·
             统一朝左下（-386,+270，斜率 35°）· 尾迹＝运动的反方向
   ══════════════════════════════════════════════════════════════════════════ */
.ling-meteors{display:none}
:root[data-skin="black"][data-sky="on"] .ling-meteors{
  display:block;position:fixed;inset:0;z-index:2147483000;overflow:hidden;pointer-events:none;
  mix-blend-mode:screen;
}
.ling-meteors .lm{
  position:absolute;top:var(--tp);left:var(--lf);width:0;height:0;opacity:0;
  animation:lmFly 67.2s linear infinite;
  animation-delay:calc(var(--i) * -4.2s);   /* 负延迟 = 相位错开 → 依次划过 */
}
/* 头：本体亮点 + 0.5s 亮度脉动 → 划过时是「闪动着飞」 */
.ling-meteors .lm::before{
  content:"";position:absolute;left:-1.5px;top:-1.5px;
  width:3px;height:3px;border-radius:50%;
  background:#FFF6E8;
  transform:scale(var(--sc));
  animation:headFlash .5s ease-in-out infinite;
}
@keyframes headFlash{
  0%,100%{box-shadow:0 0 5px 1.6px rgba(255,238,208,.45)}
  50%    {box-shadow:0 0 13px 4.5px rgba(255,248,232,1)}
}
/* 尾 = 运动的反方向（右上 35°）—— 写成向左就是「尾巴长在前面」 */
.ling-meteors .lm::after{
  content:"";position:absolute;left:0;top:0;
  width:196px;height:1.8px;border-radius:2px;
  transform-origin:0 50%;transform:rotate(-35deg);
  background:linear-gradient(90deg,rgba(255,244,224,.95),rgba(255,244,224,0));
}
@keyframes lmFly{
  0%       {opacity:0;   transform:translate3d(0,0,0)}
  0.5%     {opacity:1;   transform:translate3d(-30px,21px,0)}
  2.2%     {opacity:.50; transform:translate3d(-300px,210px,0)}
  2.5%,100%{opacity:0;   transform:translate3d(-386px,270px,0)}
}

/* ── 手机端降级 ──
   小屏 + 移动 GPU + 电池：三层星点降到两层、星环缩小、流星减半，
   动效保留但负担减半。判据是视口宽度，不依赖设备探测。 */
@media (max-width:768px){
  .ling-sky .ls.far{display:none}                 /* 去掉最密的远层，视觉损失最小 */
  .ling-sky .ls.mid{opacity:.66;background-size:300px 300px;
    animation:lsDrift 260s linear infinite, twinkleMid 15s ease-in-out -7s infinite}
  .ling-sky .ls.near{opacity:.86;background-size:400px 400px;
    animation:lsDrift 180s linear infinite, twinkleNear 9s ease-in-out -3.5s infinite}
  .ling-sky .lring{width:1400px;height:1400px;margin:-700px 0 0 -700px}
  .ling-sky .lring2{display:none}
  .ling-meteors .lm{animation-duration:78s;animation-delay:calc(var(--i) * -9.75s)}
}

/* 减动效偏好：全部降级为静止微光 */
@media (prefers-reduced-motion:reduce){
  .ling-sky .ls,.ling-meteors .lm,
  .ling-meteors .lm::before,.ling-sky .lringlit{animation:none!important}
  .ling-sky .ls.far,.ling-sky .ls.mid,.ling-sky .ls.near{opacity:.7}
  .ling-meteors .lm{opacity:.35;transform:translate3d(-120px,84px,0)}
}