/* ============================================================================
 * NOVIZON 正式站 · 液态玻璃材质层
 *
 * 与 bold 预览页那版的区别（那边是暗底编辑式，这边是浅色目录式）：
 *   1. 浅色为主：全站默认 light 主题，只有 hero / trust-bar / contact 是深色
 *   2. 顶栏是 position:sticky 且在文档流里 → 不能直接改成悬浮胶囊（会让整页上跳 96px），
 *      改为「透明外壳 + 注入一个绝对定位的胶囊子元素」
 *   3. 大量元素用「仿玻璃」（半透明 + 描边 + 高光 + 近场反光，但**不带 backdrop-filter**），
 *      只有 8 个元素用真 backdrop-filter —— 上一轮实测：backdrop-filter 数量必须严控
 *   4. 首屏产品方板圆角 6px → 12px（用户指定）
 *
 * 实测纪律（来自上一轮 688 个瓦片把页面从 60fps 拖到 23fps 的教训）：
 *   backdrop-filter 只挂在单例元素或 :hover 上，总数 ≤ 8，且不随内容量增长。
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * 0 · 折射滤镜容器（必须移出文档流：display:inline 的 svg 会在页顶撑出一行）
 * ------------------------------------------------------------------------ */
.lg-defs {
  position: absolute; width: 0; height: 0;
  overflow: hidden; pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 1 · 令牌
 * ------------------------------------------------------------------------ */
:root {
  --lg-blur: 12px;
  --lg-sat: 180%;
  --lg-bright: 1.05;
  --lg-reach: 320px;
  --lg-ez: cubic-bezier(0.19, 1, 0.22, 1);
  --lg-t: .62s;
  --lg-r: 12px;
  --lg-r-pill: 999px;
  --lg-hi: .9;
}

/* 深色上下文：压在 hero / trust-bar / contact 上时用 */
[data-lg-theme="dark"] {
  --lg-tint: rgba(14, 24, 19, .44);
  --lg-ink: #ffffff;
  --lg-ink-dim: rgba(255, 255, 255, .66);
  --lg-edge: rgba(255, 255, 255, .62);
  --lg-drop: 0 20px 54px rgba(0, 0, 0, .38), 0 2px 10px rgba(0, 0, 0, .2);
  --lg-ring: 0 0 0 1px rgba(255, 255, 255, .06);
}
/* 浅色上下文（默认）：纸底上的玻璃靠「柔和投影 + 双描边」立起来 */
html, [data-lg-theme="light"] {
  --lg-tint: rgba(255, 255, 255, .60);
  --lg-ink: #19211e;
  --lg-ink-dim: rgba(25, 33, 30, .62);
  --lg-edge: rgba(255, 255, 255, .95);
  --lg-drop: 0 16px 42px rgba(16, 26, 21, .10), 0 2px 8px rgba(16, 26, 21, .05);
  --lg-ring: 0 0 0 1px rgba(25, 33, 30, .055);
}

/* ---------------------------------------------------------------------------
 * 2 · 材质本体 —— 真玻璃（带 backdrop-filter）
 * ------------------------------------------------------------------------ */
.lg {
  --lg-p: 0; --lg-a: 0; --lg-mx: 50%; --lg-my: 0%;
  isolation: isolate;
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(.72 * var(--lg-hi))),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .34),
    var(--lg-ring),
    var(--lg-drop);
  transition: background-color var(--lg-t) var(--lg-ez),
              box-shadow var(--lg-t) var(--lg-ez);
}
:where(.lg) { position: relative; }

/* 常驻 hairline：单一光源（左上强、右下弱） */
.lg::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.1px;
  background: linear-gradient(148deg,
    rgba(255, 255, 255, calc(.98 * var(--lg-hi))),
    rgba(255, 255, 255, .10) 34%,
    rgba(255, 255, 255, .05) 64%,
    rgba(255, 255, 255, calc(.62 * var(--lg-hi))));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none; z-index: 4;
}

/* 指针镜面反射（平方曲线：远处几乎不可见、贴近时明显） */
.lg::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 3;
  background: radial-gradient(200px circle at var(--lg-mx) var(--lg-my),
    rgba(255, 255, 255, .46), rgba(255, 255, 255, .10) 46%, transparent 72%);
  opacity: calc(var(--lg-p) * var(--lg-p));
  mix-blend-mode: screen;
  transition: opacity .4s var(--lg-ez);
}

/* 边缘光扫掠：空闲自转 → 光标靠近时吸附到光标方位 */
.lg__fx {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.3px;
  pointer-events: none; z-index: 5;
  background: conic-gradient(from calc(var(--lg-a) * 1deg - 40deg),
    transparent 0deg, rgba(255, 255, 255, 0) 6deg,
    rgba(255, 255, 255, .98) 40deg, rgba(255, 255, 255, .30) 62deg, transparent 92deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: calc(.20 + .80 * var(--lg-p));
  transition: opacity .45s var(--lg-ez);
}
@keyframes lg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.lg--idle .lg__fx { animation: lg-spin 15s linear infinite; transform-origin: 50% 50%; }

/* 深色上下文里 hairline 要更亮一点才看得见 */
[data-lg-theme="dark"] .lg::before { padding: 1.2px; }

/* 真折射：只在支持时启用（实测 url() 必须放在 blur() 之前） */
@supports (backdrop-filter: url(#x)) {
  html[data-lg-quality="full"] .lg--refract {
    -webkit-backdrop-filter: url(#nv-refract) blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
    backdrop-filter: url(#nv-refract) blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  }
}
@media (hover: none), (pointer: coarse) {
  html[data-lg-quality="full"] .lg--refract {
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  }
}

/* ---------------------------------------------------------------------------
 * 3 · 仿玻璃（不带 backdrop-filter）
 *     浅色页面上模糊本来就看不出来，而描边 + 柔光 + 近场反光已经足够像玻璃。
 *     用它换取「可以放心铺开」——真玻璃严格限 8 个。
 * ------------------------------------------------------------------------ */
.lg-faux {
  --lg-p: 0; --lg-a: 0; --lg-mx: 50%; --lg-my: 0%;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(.85 * var(--lg-hi))),
    inset 0 -1px 0 rgba(25, 33, 30, .045),
    inset 0 0 0 1px rgba(255, 255, 255, .38),
    var(--lg-ring),
    0 10px 28px rgba(16, 26, 21, .07);
  transition: box-shadow var(--lg-t) var(--lg-ez),
              background-color var(--lg-t) var(--lg-ez);
}
:where(.lg-faux) { position: relative; }
.lg-faux::before,
.lg-faux::after { content: ''; position: absolute; pointer-events: none; }
.lg-faux::before {
  inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(148deg,
    rgba(255, 255, 255, .96), rgba(255, 255, 255, .08) 34%,
    rgba(255, 255, 255, .04) 64%, rgba(255, 255, 255, .6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: 4;
}
.lg-faux::after {
  inset: 0; border-radius: inherit; z-index: 3;
  background: radial-gradient(200px circle at var(--lg-mx) var(--lg-my),
    rgba(255, 255, 255, .5), rgba(255, 255, 255, .1) 46%, transparent 72%);
  opacity: calc(var(--lg-p) * var(--lg-p));
  mix-blend-mode: screen;
  transition: opacity .4s var(--lg-ez);
}

/* ---------------------------------------------------------------------------
 * 4 · 顶栏 → 悬浮玻璃胶囊
 *
 * ⚠️ 关键：.site-header 是 position:sticky 且在文档流里（高 96px）。
 *    直接把它改成悬浮胶囊会让整页上跳 96px。所以：
 *      外壳保持 sticky + 96px 流占位，背景改透明；
 *      胶囊由 JS 注入一个绝对定位的子元素 .lg-cap 承担。
 *    另外原底色是 rgba(247,246,241,.94)（94% 不透明）——
 *    这是故意的，否则深色 hero 滚到下面时深色文字会读不了。
 *    改真玻璃后必须靠「随背景自适应色调」来保证可读性。
 * ------------------------------------------------------------------------ */
.site-header {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.site-header > *:not(.lg-cap) { position: relative; z-index: 1; }

.lg-cap {
  position: absolute;
  inset: 14px max(14px, 2.2vw) auto max(14px, 2.2vw);
  height: 68px;
  border-radius: var(--lg-r-pill);
  z-index: 0;
  pointer-events: none;
}
/* 顶栏内容随色调换色 */
.site-header { color: var(--lg-ink); transition: color .5s var(--lg-ez); }
.nav a { color: var(--lg-ink); }
.brand { color: var(--lg-ink); }
.nv-search input { color: var(--lg-ink); }
.nv-search input::placeholder { color: var(--lg-ink-dim); }
.nv-clr { color: var(--lg-ink-dim); }

/* ---------------------------------------------------------------------------
 * 5 · 搜索框与下拉
 *     下拉 .nv-sg 是真玻璃（它浮在页面内容上，折射最明显）
 *     搜索胶囊用仿玻璃 —— 它已经在顶栏胶囊的模糊之内，再叠一层 backdrop-filter 白费性能
 * ------------------------------------------------------------------------ */
.nv-search.lg-faux {
  background: rgba(255, 255, 255, .46);
  border-color: transparent;
}
[data-lg-theme="dark"] .nv-search.lg-faux { background: rgba(255, 255, 255, .14); }

.nv-sg.lg {
  border-radius: 14px;
  overflow: hidden;
  --lg-hi: .55;
}
.nv-sg-opt { border-radius: 0; }
.nv-sg-opt:hover, .nv-sg-opt[aria-selected="true"] { background: rgba(255, 255, 255, .34); }
[data-lg-theme="dark"] .nv-sg-opt:hover,
[data-lg-theme="dark"] .nv-sg-opt[aria-selected="true"] { background: rgba(255, 255, 255, .14); }

/* ---------------------------------------------------------------------------
 * 6 · 首屏：产品方板玻璃化 + 圆角 6px → 12px（用户指定）
 * ------------------------------------------------------------------------ */
.hero-plate.lg {
  border-radius: var(--lg-r);
  background: rgba(255, 255, 255, .30);
  --lg-hi: .7;
}
.hero-plate img {
  border-radius: calc(var(--lg-r) - 5px);
}
.hero-plate figcaption { color: var(--lg-ink-dim); }

/* ---------------------------------------------------------------------------
 * 7 · 信任条：4 个条目在深绿底上 → 真玻璃（面积小、效果明显）
 * ------------------------------------------------------------------------ */
.trust-item.lg {
  border-radius: var(--lg-r);
  padding: 20px 22px;
  --lg-hi: .62;
}
.trust-item strong { color: var(--lg-ink); }
.trust-item span { color: var(--lg-ink-dim); }

/* ---------------------------------------------------------------------------
 * 8 · 认证区：5 个证书框
 * ------------------------------------------------------------------------ */
.cert-grid li.lg-faux {
  border-radius: var(--lg-r);
  padding: 10px;
  background: rgba(255, 255, 255, .62);
  --lg-hi: .55;
}
.cert-grid img { border-radius: 6px; }

/* ---------------------------------------------------------------------------
 * 9 · 品类卡 / 服务卡 / 联系面板
 * ------------------------------------------------------------------------ */
.cat-card.lg-faux {
  border-radius: var(--lg-r);
  background: rgba(255, 255, 255, .72);
  border-color: transparent;
}
.cat-card.lg-faux:hover { background: rgba(255, 255, 255, .86); }

.service-item.lg-faux {
  border-radius: var(--lg-r);
  background: rgba(255, 255, 255, .66);
  border-color: transparent;
}

/* 联系面板：白色大面板压在深绿上 —— 真玻璃最有价值的一处 */
.contact-panel.lg {
  border-radius: var(--lg-r);
  background: rgba(255, 255, 255, .84);
  --lg-hi: .5;
  color: var(--ink);
}
[data-lg-theme="dark"] .contact-panel.lg { background: rgba(255, 255, 255, .84); color: #19211e; }

/* 表单控件：描边 + 内阴影即可，不需要模糊 */
.inquiry-form input.lg-faux,
.inquiry-form textarea.lg-faux {
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
  border-color: rgba(25, 33, 30, .10);
}
.inquiry-form input.lg-faux:focus,
.inquiry-form textarea.lg-faux:focus {
  background: #fff;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(49, 92, 75, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ---------------------------------------------------------------------------
 * 10 · 按钮：玻璃胶囊（真玻璃，但体积小）
 * ------------------------------------------------------------------------ */
.button.lg {
  border-radius: var(--lg-r-pill);
  --lg-hi: .6;
}
.button-primary.lg {
  background: rgba(49, 92, 75, .82);
  color: #fff;
  border-color: transparent;
}
.button-primary.lg:hover { background: rgba(49, 92, 75, .94); }
.button-ghost.lg {
  background: rgba(255, 255, 255, .12);
  color: var(--lg-ink);
  border-color: transparent;
}
.button-ghost.lg:hover { background: rgba(255, 255, 255, .22); }

/* ---------------------------------------------------------------------------
 * 11 · 导航项：近场描边光（不做玻璃，只做反光）
 * ------------------------------------------------------------------------ */
.nav a {
  position: relative;
  border-radius: 8px;
  padding: 4px 8px;
  margin: 0 -8px;
}
.nav a::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(90px circle at var(--lg-mx, 50%) var(--lg-my, 0%),
    rgba(255, 255, 255, .5), transparent 70%);
  opacity: calc(var(--lg-p, 0) * .9);
  mix-blend-mode: screen;
  transition: opacity .35s var(--lg-ez);
}
.nav a:hover { background: rgba(255, 255, 255, .16); }

/* ---------------------------------------------------------------------------
 * 12 · 光场：玻璃要有东西可折射。
 *     正式首页多数区块是纯色纸底，不铺光场的话玻璃盖上去什么都看不见。
 *     浅色区块用极低透明度，避免把纸感弄脏。
 * ------------------------------------------------------------------------ */
/* 光场必须用 z-index:-1 而不是 0。
   按 CSS 绘制顺序，z-index:0 的定位元素会盖在「未定位的流内块元素」之上 ——
   而 .cat-grid / .section-heading 这些都没定位，会被光场糊住。
   z-index:-1 让它画在「区块自身背景之上、流内内容之下」。
   前提是父级要形成层叠上下文（isolation:isolate），否则它会一路穿到 body 后面消失。 */
.lglight {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: -1; contain: strict;
}
.lglight i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(64px); opacity: .42; will-change: transform;
}
.lglight i:nth-child(1) {
  width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax;
  background: radial-gradient(circle, rgba(184, 111, 67, .8), transparent 66%);
  animation: lg-drift-a 36s var(--ez-inout, ease-in-out) infinite;
}
.lglight i:nth-child(2) {
  width: 42vmax; height: 42vmax; right: -10vmax; top: 6vmax;
  background: radial-gradient(circle, rgba(49, 92, 75, .85), transparent 66%);
  animation: lg-drift-b 46s var(--ez-inout, ease-in-out) infinite;
}
.lglight i:nth-child(3) {
  width: 34vmax; height: 34vmax; left: 36%; bottom: -14vmax;
  background: radial-gradient(circle, rgba(242, 179, 127, .5), transparent 68%);
  animation: lg-drift-c 30s var(--ez-inout, ease-in-out) infinite;
}
@keyframes lg-drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(12vw,8vh,0) scale(1.22); } }
@keyframes lg-drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-14vw,-6vh,0) scale(.88); } }
@keyframes lg-drift-c { 0%,100% { transform: translate3d(0,0,0) scale(.9); } 50% { transform: translate3d(-10vw,-10vh,0) scale(1.18); } }

/* 浅色区块：大幅降低强度，只做极淡的温感 */
.lglight--light i { opacity: .30; filter: blur(76px); }
.lglight--light i:nth-child(1) { background: radial-gradient(circle, rgba(184, 111, 67, .40), transparent 70%); }
.lglight--light i:nth-child(2) { background: radial-gradient(circle, rgba(49, 92, 75, .26), transparent 70%); }
.lglight--light i:nth-child(3) { background: radial-gradient(circle, rgba(242, 179, 127, .34), transparent 72%); }

.has-lglight { position: relative; isolation: isolate; }

/* ---------------------------------------------------------------------------
 * 13 · 光标环境光
 * ------------------------------------------------------------------------ */
.lg-ambient {
  position: fixed; left: 0; top: 0;
  width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  opacity: 0;
  background: radial-gradient(circle, rgba(216, 160, 122, .14), rgba(216, 160, 122, .04) 46%, transparent 70%);
  will-change: transform;
  transition: opacity .8s var(--lg-ez);
}
html[data-lg-ambient="on"] .lg-ambient { opacity: 1; }

/* ---------------------------------------------------------------------------
 * 14 · 画质档
 * ------------------------------------------------------------------------ */
html[data-lg-quality="lite"] { --lg-blur: 8px; --lg-sat: 150%; }
html[data-lg-quality="lite"] .lg--refract {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
}
html[data-lg-quality="lite"] .lg__fx { display: none; }
html[data-lg-quality="lite"] .lg-ambient { display: none; }
html[data-lg-quality="lite"] .lglight i { animation: none; }

html[data-lg-quality="off"] .lg,
html[data-lg-quality="off"] .lg-faux {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-lg-quality="off"] .lg,
html[data-lg-quality="off"] .lg-faux { background: rgba(255, 255, 255, .93); color: #19211e; }
html[data-lg-quality="off"] .lg::after,
html[data-lg-quality="off"] .lg-faux::after,
html[data-lg-quality="off"] .nav a::before,
html[data-lg-quality="off"] .lg__fx { display: none; }
html[data-lg-quality="off"] .lglight,
html[data-lg-quality="off"] .lg-ambient { display: none; }

/* ---------------------------------------------------------------------------
 * 15 · 降级与无障碍
 * ------------------------------------------------------------------------ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg { background: rgba(255, 255, 255, .95); }
  [data-lg-theme="dark"] .lg { background: rgba(14, 24, 19, .93); }
  .lg::after, .lg__fx { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .lg::after, .lg-faux::after, .nav a::before { display: none; }
  .lg-ambient { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lglight i, .lg__fx, .lg-ambient { animation: none !important; }
  .lg, .lg::after, .lg::before, .lg__fx, .lg-faux { transition: none !important; }
}
@media print, (forced-colors: active) {
  .lg, .lg-faux { backdrop-filter: none !important; background: #fff !important; color: #000 !important; }
  .lg::after, .lg::before, .lg__fx, .lg-faux::after, .lg-faux::before,
  .lglight, .lg-ambient, .nav a::before { display: none !important; }
}

/* ---------------------------------------------------------------------------
 * 16 · 响应式
 * ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --lg-blur: 11px; --lg-reach: 260px; }
  .lg-cap { inset: 12px 12px auto 12px; height: 62px; }
}
@media (max-width: 860px) {
  /* 手机上顶栏是 static + 纵向排列，高度由内容决定；
     relative 保证胶囊有定位上下文（static 会让它去挂到更外层） */
  .site-header { position: relative; }
  .lg-cap { inset: 8px; height: auto; border-radius: 22px; }
  .lg-ambient { display: none; }
  .trust-item.lg { padding: 18px; }
  .lglight i { filter: blur(48px); }

  /* ★ 修一个线上真实 bug（不是本轮引入，是上一轮性能优化时留下的）：
     手机端导航第一项「Products」不可达。
     实测原因（逐层量出来的）：.nav 的计算样式是 `justify-content: center`
     （来自基础样式），而它内容 432px > 容器 350px，居中时溢出全部落到左侧 82px，
     → 第一项 left = 20 - 82 = -62。
     而 LTR 下「向左溢出的内容」无法滚动到（scrollLeft 最小为 0），
     所以那一项对手机访客是彻底点不到的。
     修法三件套：取消 auto 外边距、撑满宽度、改为从左开始排。 */
  .site-header .nav {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  /* 我在导航项上加了 `padding: 4px 8px; margin: 0 -8px` 让悬浮态高光的范围更自然。
     但首末项若保留负外边距，会贴到胶囊边缘只剩 4px —— 手机端取消。 */
  .site-header .nav a:first-child { margin-left: 0; }
  .site-header .nav a:last-child { margin-right: 0; }
}
@media (max-width: 560px) {
  :root { --lg-blur: 10px; }
  .lg-cap { inset: 6px; border-radius: 18px; }
}

/* ---------------------------------------------------------------------------
 * 17 · 质量控件（右下角，免得和左下角无关；正式站右侧有 WhatsApp 悬浮按钮 z=999，
 *      所以放左下角避让）
 * ------------------------------------------------------------------------ */
.lg-ctrl {
  position: fixed; left: 16px; bottom: 16px; z-index: 200;
  display: flex; align-items: center; gap: 2px;
  padding: 5px 10px 5px 6px;
  border-radius: var(--lg-r-pill);
  background: rgba(255, 255, 255, .68);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #19211e;
}
.lg-ctrl button {
  appearance: none; border: 0; background: none; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit;
  padding: 6px 9px; min-height: 30px; border-radius: var(--lg-r-pill);
  cursor: pointer; opacity: .5;
  transition: opacity .35s var(--lg-ez), background-color .35s var(--lg-ez);
}
.lg-ctrl button:hover { opacity: .9; }
.lg-ctrl button[aria-pressed="true"] {
  opacity: 1; background: rgba(25, 33, 30, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.lg-ctrl__hint {
  padding-left: 6px; margin-left: 4px;
  border-left: 1px solid rgba(25, 33, 30, .16); opacity: .55;
}
.lg-ctrl[data-lg-auto="1"] .lg-ctrl__hint::after { content: ' · auto'; color: var(--copper, #b86f43); opacity: 1; }
html[data-lg-quality="lite"] .lg-ctrl__hint::after { content: ' · lite'; color: var(--copper, #b86f43); opacity: 1; }
html[data-lg-quality="lite"] .lg-ctrl[data-lg-auto="1"] .lg-ctrl__hint::after { content: ' · auto'; }
/* 手指设备上隐藏画质控件 —— 实测它会压住首屏的「Get a Quote」主转化按钮，
   而手机端本来就取不到指针（关掉扫掠层与镜面），这个开关意义不大。 */
@media (hover: none), (pointer: coarse) {
  .lg-ctrl { display: none; }
}