/* ============================================================
   fix.css — 修盒子 FIXBOX 站点样式 v2「青春活泼」
   ------------------------------------------------------------
   依赖：tokens.css → theme-fix.css → 本文件
   视觉语言（参考 StrategyBreakdowns / SiteQuest / DesignBookmark）：
     · 奶油纸底 + 墨色描边 + 蓝图手绘虚线连线
     · 高饱和色块只做「面」，文字一律用深阶（对比度实测 ≥4.5:1）
     · 弹簧缓动 + 错落入场 + 沉浸式加载 + 页面转场
   性能：动效只动 transform / opacity / filter / clip-path。
   ============================================================ */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--fx-face);
  background:var(--fx-paper);
  color:var(--fx-ink);
  font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* 纸面颗粒：极淡的蓝图点阵，增加「手工纸」质感 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(26,31,43,.055) 1px,transparent 1px);
  background-size:22px 22px;
}
body>*{position:relative;z-index:1}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
input{font:inherit}
:focus-visible{outline:2.5px solid var(--fx-lav-ink);outline-offset:3px;border-radius:8px}
::selection{background:var(--fx-lav);color:var(--fx-ink)}

/* ---------- 2. 沉浸式加载动画（参考 SiteQuest） ---------- */
.fx-preloader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--fx-lav);
  transition:opacity .5s var(--fx-ease-out),visibility .5s;
}
.fx-preloader__inner{display:grid;justify-items:center;gap:26px;text-align:center}
/* 中央：旋转虚线环 + 修字 + 三颗轨道圆点 */
.fx-preloader__mark{position:relative;width:132px;height:132px;display:grid;place-items:center}
.fx-preloader__ring{
  position:absolute;inset:0;border-radius:50%;
  border:3px dashed rgba(26,31,43,.42);
  animation:fxSpin 3.4s linear infinite;
}
.fx-preloader__ring--inner{
  inset:20px;border-style:solid;border-width:2px;
  border-color:rgba(26,31,43,.18) rgba(26,31,43,.55) rgba(26,31,43,.18) rgba(26,31,43,.55);
  animation:fxSpin 1.5s linear infinite reverse;
}
.fx-preloader__core{
  width:66px;height:66px;border-radius:20px;display:grid;place-items:center;
  background:var(--fx-card);color:var(--fx-ink);
  font-size:30px;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 6px 0 rgba(26,31,43,.16);
  animation:fxCorePulse 1.5s var(--fx-ease-in-out) infinite;
}
.fx-preloader__dot{position:absolute;width:13px;height:13px;border-radius:50%;box-shadow:0 2px 0 rgba(26,31,43,.18)}
.fx-preloader__dot--a{background:var(--fx-mint);top:-6px;left:50%;margin-left:-6.5px;animation:fxOrbit 2.6s linear infinite}
.fx-preloader__dot--b{background:var(--fx-coral);bottom:-6px;left:50%;margin-left:-6.5px;animation:fxOrbit 2.6s linear infinite reverse}
.fx-preloader__dot--c{background:var(--fx-sun);top:50%;right:-6px;margin-top:-6.5px;animation:fxOrbitY 2.6s linear infinite}
.fx-preloader__text{
  font-size:15px;font-weight:700;letter-spacing:.14em;color:var(--fx-ink);
  background:linear-gradient(100deg,rgba(26,31,43,.35) 0%,rgba(26,31,43,.35) 40%,rgba(26,31,43,.95) 50%,rgba(26,31,43,.35) 60%,rgba(26,31,43,.35) 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fxShimmer 1.9s linear infinite;
}
.fx-preloader__bar{width:190px;height:5px;border-radius:999px;background:rgba(26,31,43,.16);overflow:hidden}
.fx-preloader__bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--fx-ink);animation:fxLoad 1.15s var(--fx-ease-out) forwards}
.fx-preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.fx-preloader.is-done .fx-preloader__inner{transform:translateY(-14px) scale(1.04);transition:transform .5s var(--fx-ease-out)}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxCorePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes fxOrbit{to{transform:rotate(360deg)}}
@keyframes fxOrbitY{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
@keyframes fxShimmer{to{background-position:-300% 0}}
@keyframes fxLoad{to{width:100%}}

/* ---------- 3. 页面转场（静态多页站） ---------- */
/* 转场幕布：进入时从下往上盖住，离开时从下往上推走 */
.fx-curtain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:var(--fx-lav);
  transform:translateY(100%);
  transition:transform .52s var(--fx-ease-in-out);
}
/* 首次进入：不做转场，直接显示页面 */
html.fx-first:not(.fx-leaving) .fx-curtain{display:none}
/* 二次进入（由 <head> 内联脚本依据 sessionStorage 打标）：幕布已盖住，进来后拉走 */
html.fx-entering .fx-curtain{transform:translateY(0)}
html.fx-entering.fx-ready .fx-curtain{transform:translateY(-100%)}
html.fx-entering.fx-ready .fx-curtain::after{opacity:0}
/* 点击内链：拉幕布盖住 → 再跳转 */
html.fx-leaving .fx-curtain{transform:translateY(0);pointer-events:auto}
/* 页面主体：进入时上浮 + 淡入，配合转场不再白屏闪烁 */
html.fx-entering body{opacity:0;transform:translateY(14px)}
html.fx-entering.fx-ready body{opacity:1;transform:none;transition:opacity .5s var(--fx-ease-out) .12s,transform .6s var(--fx-ease-out) .12s}
.fx-curtain__logo{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:19px;font-weight:800;letter-spacing:.18em;color:var(--fx-ink);opacity:.85;
  transition:opacity .25s
}

/* ---------- 3.5 布局基元（v1 的 .fx-wrap / .fx-section 必须保留） ---------- */
.fx-wrap{width:min(100% - var(--fx-gutter)*2,var(--fx-max));margin-inline:auto}
.fx-section{padding-block:clamp(44px,6.5vw,78px)}
.fx-section--tight{padding-block:clamp(26px,4vw,44px)}
.fx-ul-wrap{margin-top:4px}
/* 跳到主要内容：默认移出视口，聚焦时出现 */
.fx-skip{
  position:fixed;left:12px;top:12px;z-index:9998;
  transform:translateY(-200%);
  background:var(--fx-ink);color:var(--fx-paper);
  padding:11px 18px;border-radius:12px;font-size:14px;font-weight:700;
  transition:transform .22s var(--fx-ease-spring)
}
.fx-skip:focus{transform:translateY(0)}
/* 仅供屏幕阅读器：视觉隐藏但保留可访问名 */
.fx-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 4. 顶栏 ---------- */
.fx-top{
  position:sticky;top:0;z-index:50;height:var(--fx-navy);
  background:color-mix(in srgb,var(--fx-paper) 88%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1.5px solid var(--fx-line-strong);
  transition:box-shadow .3s,border-color .3s;
}
.fx-top.is-stuck{box-shadow:0 10px 30px -22px rgba(26,31,43,.5)}
.fx-top__inner{
  height:100%;width:min(100% - var(--fx-gutter)*2,var(--fx-max));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(14px,3vw,38px);
}
.fx-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;flex:none}
.fx-brand__mark{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--fx-mint);color:var(--fx-ink);font-size:16px;font-weight:800;
  border:1.5px solid var(--fx-ink);box-shadow:2.5px 2.5px 0 var(--fx-ink);
  transition:transform .3s var(--fx-ease-spring),box-shadow .3s
}
.fx-brand:hover .fx-brand__mark{transform:translate(-1px,-1px) rotate(-6deg);box-shadow:4px 4px 0 var(--fx-ink)}
.fx-brand__text{font-size:19px;line-height:1}
.fx-brand__text em{font-style:normal;font-family:var(--fx-mono);font-size:10.5px;letter-spacing:.18em;color:var(--fx-lav-ink);margin-left:6px;vertical-align:2px}
.fx-nav{display:flex;align-items:center;gap:clamp(12px,2vw,24px);margin-left:auto}
.fx-nav a{position:relative;font-size:15px;font-weight:600;color:var(--fx-ink-2);padding:7px 2px;transition:color .2s}
.fx-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:3px;
  background:var(--fx-coral);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--fx-ease-spring)
}
.fx-nav a:hover{color:var(--fx-ink)}
.fx-nav a:hover::after,.fx-nav a[aria-current="page"]::after{transform:scaleX(1)}
.fx-nav a[aria-current="page"]{color:var(--fx-ink)}
.fx-topsearch{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 15px;
  border:1.5px solid var(--fx-line-strong);border-radius:999px;background:var(--fx-card);
  color:var(--fx-ink-2);font-size:14px;font-weight:600;flex:none;
  transition:border-color .2s,transform .25s var(--fx-ease-spring),box-shadow .25s
}
.fx-topsearch:hover{border-color:var(--fx-ink);transform:translateY(-1.5px);box-shadow:2.5px 2.5px 0 var(--fx-ink)}
.fx-topsearch kbd{font-family:var(--fx-mono);font-size:11px;color:var(--fx-ink-3);border:1px solid var(--fx-line-strong);border-radius:6px;padding:1px 5px;background:var(--fx-paper-2)}

/* ---------- 5. 按钮 / 标签 / 徽章 ---------- */
.fx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:700;
  border:1.5px solid var(--fx-ink);cursor:pointer;position:relative;
  transition:transform .28s var(--fx-ease-spring),box-shadow .28s,border-color .2s,background-color .2s
}
.fx-btn--primary{background:var(--fx-mint);color:var(--fx-ink);box-shadow:3px 3px 0 var(--fx-ink)}
.fx-btn--primary:hover{transform:translate(-1.5px,-1.5px);box-shadow:5px 5px 0 var(--fx-ink)}
.fx-btn--primary:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--fx-ink)}
.fx-btn--coral{background:var(--fx-coral);color:var(--fx-ink);box-shadow:3px 3px 0 var(--fx-ink)}
.fx-btn--coral:hover{transform:translate(-1.5px,-1.5px);box-shadow:5px 5px 0 var(--fx-ink)}
.fx-btn--ghost{background:var(--fx-card);color:var(--fx-ink);border-color:var(--fx-line-strong)}
.fx-btn--ghost:hover{border-color:var(--fx-ink);transform:translate(-1.5px,-1.5px);box-shadow:3px 3px 0 var(--fx-ink)}
.fx-btn--sm{height:38px;padding:0 16px;font-size:14px}
.fx-btn--block{width:100%}

.fx-chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;
  font-size:14px;font-weight:600;background:var(--fx-card);
  border:1.5px solid var(--fx-line-strong);color:var(--fx-ink-2);
  transition:transform .25s var(--fx-ease-spring),border-color .2s,background-color .2s,box-shadow .25s
}
.fx-chip:hover{border-color:var(--fx-ink);background:var(--fx-sun);color:var(--fx-ink);transform:translate(-1.5px,-1.5px);box-shadow:2.5px 2.5px 0 var(--fx-ink)}

.fx-badge{display:inline-flex;align-items:center;gap:4px;padding:3.5px 10px;border-radius:8px;font-size:12.5px;line-height:1.5;font-weight:700;white-space:nowrap;border:1.5px solid transparent}
.fx-badge--os{background:var(--fx-card);border-color:var(--fx-line-strong)}
.fx-badge--os[data-os="windows"]{color:var(--os-windows);border-color:color-mix(in srgb,var(--os-windows) 42%,transparent)}
.fx-badge--os[data-os="macos"]{color:var(--os-macos);border-color:color-mix(in srgb,var(--os-macos) 42%,transparent)}
.fx-badge--os[data-os="router"]{color:var(--os-router);border-color:color-mix(in srgb,var(--os-router) 42%,transparent)}
.fx-badge--os[data-os="hardware"]{color:var(--os-hardware);border-color:color-mix(in srgb,var(--os-hardware) 42%,transparent)}
.fx-badge--level{background:var(--fx-lav-soft);color:var(--fx-lav-ink)}
.fx-badge--time{background:var(--fx-sky-soft);color:var(--fx-sky-ink)}
.fx-badge--safe{background:var(--risk-safe-bg);color:var(--risk-safe)}
.fx-badge--caution{background:var(--risk-caution-bg);color:var(--risk-caution)}
.fx-badge--danger{background:var(--risk-danger-bg);color:var(--risk-danger)}

/* ---------- 6. 蓝图虚线连线（StrategyBreakdowns 标志性元素） ---------- */
.fx-connector{position:relative;height:64px;margin:6px auto;max-width:760px;pointer-events:none}
.fx-connector::before{
  content:"";position:absolute;left:6%;right:14%;top:50%;
  border-top:2px dashed var(--fx-line-strong);
}
.fx-connector::after{
  content:"";position:absolute;right:13%;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--fx-ink);border-bottom:2.5px solid var(--fx-ink);
  transform:translateY(-50%) rotate(-45deg);
}
.fx-connector--curve::before{border-top-left-radius:0;border-top-right-radius:0;left:6%;right:18%}
.fx-connector--short{height:40px}

/* ---------- 7. Hero ---------- */
.fx-hero{position:relative;padding-block:clamp(46px,7vw,84px) clamp(26px,4vw,40px);overflow:hidden}
.fx-hero__shapes{position:absolute;inset:0;pointer-events:none;z-index:0}
.fx-hero__shape{position:absolute;border-radius:50%;border:2px solid var(--fx-ink);opacity:.9}
.fx-hero__shape--1{width:112px;height:112px;background:var(--fx-sun);right:6%;top:6%;animation:fxFloat 7s var(--fx-ease-in-out) infinite}
.fx-hero__shape--2{width:58px;height:58px;background:var(--fx-coral);right:13%;top:62%;animation:fxFloat 5.4s var(--fx-ease-in-out) infinite .6s}
.fx-hero__shape--3{width:34px;height:34px;background:var(--fx-sky);right:3%;top:82%;animation:fxFloat 6.2s var(--fx-ease-in-out) infinite 1.1s}
.fx-hero__shape--4{
  width:132px;height:132px;right:16%;top:26%;background:transparent;
  border-radius:30px;border:2px dashed var(--fx-line-strong);
  animation:fxSpin 30s linear infinite
}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.fx-hero__inner{position:relative;z-index:1;max-width:800px}
.fx-hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;padding:6px 14px 6px 9px;
  font-size:13px;font-weight:700;color:var(--fx-ink);
  background:var(--fx-card);border:1.5px solid var(--fx-ink);border-radius:999px;
  box-shadow:2.5px 2.5px 0 var(--fx-ink)
}
.fx-hero__eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--fx-mint);display:block;box-shadow:0 0 0 3px var(--fx-paper)}
.fx-hero h1{font-size:clamp(32px,5.6vw,52px);line-height:1.14;letter-spacing:-.035em;font-weight:800}
.fx-hero h1 em{font-style:normal;position:relative;display:inline-block;z-index:0}
.fx-hero h1 em::before{
  content:"";position:absolute;left:-4px;right:-4px;bottom:2px;height:38%;z-index:-1;
  background:var(--fx-sun);border-radius:4px;transform:rotate(-.6deg);
  transform-origin:left;animation:fxMark .7s var(--fx-ease-out) .35s both
}
@keyframes fxMark{from{transform:rotate(-.6deg) scaleX(0)}to{transform:rotate(-.6deg) scaleX(1)}}
.fx-hero__sub{margin-top:16px;font-size:17.5px;color:var(--fx-ink-2);max-width:56ch;line-height:1.8}

/* ---------- 8. 搜索 ---------- */
.fx-searchwrap{position:relative;margin-top:28px;max-width:740px}
.fx-search{
  display:flex;align-items:center;gap:12px;height:66px;padding:0 12px 0 20px;
  background:var(--fx-card);border:2px solid var(--fx-ink);border-radius:20px;
  box-shadow:4px 4px 0 var(--fx-ink);
  transition:transform .3s var(--fx-ease-spring),box-shadow .3s
}
.fx-search:focus-within{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--fx-ink)}
.fx-search__icon{flex:none;color:var(--fx-ink)}
.fx-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:17px;font-weight:500}
.fx-search input::placeholder{color:var(--fx-ink-3);font-weight:400}
.fx-search__kbd{flex:none;font-family:var(--fx-mono);font-size:11.5px;color:var(--fx-ink-3);border:1.5px solid var(--fx-line-strong);border-radius:7px;padding:2px 7px;background:var(--fx-paper-2)}
.fx-search__go{
  flex:none;height:46px;padding:0 24px;border-radius:14px;background:var(--fx-mint);color:var(--fx-ink);
  font-size:15px;font-weight:700;border:1.5px solid var(--fx-ink);
  transition:transform .25s var(--fx-ease-spring),box-shadow .25s
}
.fx-search__go:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--fx-ink)}
.fx-search__go:active{transform:translate(1px,1px);box-shadow:none}

.fx-suggest{
  position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:40;
  background:var(--fx-card);border:2px solid var(--fx-ink);border-radius:18px;
  box-shadow:5px 5px 0 var(--fx-ink);padding:8px;display:none;max-height:410px;overflow:auto
}
.fx-suggest.is-open{display:block;animation:fxPop .26s var(--fx-ease-spring)}
@keyframes fxPop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.fx-suggest__label{padding:9px 12px 5px;font-size:12px;font-weight:700;color:var(--fx-ink-3);letter-spacing:.05em}
.fx-suggest__item{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:12px;cursor:pointer;transition:background-color .18s,transform .18s}
.fx-suggest__item:hover,.fx-suggest__item.is-active{background:var(--fx-mint-soft);transform:translateX(3px)}
.fx-suggest__t{font-size:15px;font-weight:700;line-height:1.4}
.fx-suggest__m{font-size:12.5px;color:var(--fx-ink-3);margin-top:2px}
.fx-suggest__all{display:block;text-align:center;padding:12px;margin-top:4px;border-top:1.5px dashed var(--fx-line-strong);font-size:14px;font-weight:700;color:var(--fx-lav-ink)}
mark{background:var(--fx-sun);color:var(--fx-ink);border-radius:4px;padding:0 3px;font-weight:700}

.fx-hotwords{margin-top:18px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.fx-hotwords__label{font-size:14px;font-weight:600;color:var(--fx-ink-3);margin-right:2px}

/* ---------- 9. 紧急提示条 ---------- */
.fx-emg{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:15px 20px;border-radius:16px;
  background:var(--fx-coral-soft);border:1.5px solid var(--fx-coral-ink);
  color:var(--fx-coral-ink);font-size:15px;font-weight:600;margin-top:14px;
  box-shadow:3px 3px 0 var(--fx-coral-ink)
}
.fx-emg a{margin-left:auto;font-weight:800;color:var(--fx-coral-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* ---------- 10. 区块标题 ---------- */
.fx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.fx-head h2{font-size:clamp(22px,2.8vw,29px);font-weight:800;letter-spacing:-.025em;display:flex;align-items:center;gap:11px}
.fx-head h2::before{content:"";width:6px;height:26px;border-radius:4px;background:var(--fx-coral)}
.fx-head p{font-size:14.5px;color:var(--fx-ink-2);margin-top:7px;padding-left:17px}
.fx-head a{font-size:14.5px;font-weight:700;color:var(--fx-lav-ink);white-space:nowrap;transition:transform .25s var(--fx-ease-spring)}
.fx-head a:hover{transform:translateX(3px)}

/* ---------- 11. 领域卡（带色块图标 + 蓝图感） ---------- */
.fx-domains{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fx-domain{
  position:relative;display:flex;flex-direction:column;gap:9px;padding:20px;
  background:var(--fx-card);border:1.5px solid var(--fx-line-strong);border-radius:18px;
  overflow:hidden;transition:transform .3s var(--fx-ease-spring),border-color .25s,box-shadow .3s
}
.fx-domain::after{
  content:"";position:absolute;right:-26px;bottom:-26px;width:84px;height:84px;border-radius:18px;
  background:var(--fx-dc,var(--fx-mint));opacity:.16;transform:rotate(22deg);
  transition:transform .45s var(--fx-ease-spring),opacity .3s
}
.fx-domain:hover{transform:translate(-3px,-3px);border-color:var(--fx-ink);box-shadow:5px 5px 0 var(--fx-ink)}
.fx-domain:hover::after{transform:rotate(38deg) scale(1.18);opacity:.3}
.fx-domain__ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--fx-dc,var(--fx-mint));color:var(--fx-ink);border:1.5px solid var(--fx-ink);
  box-shadow:2.5px 2.5px 0 var(--fx-ink);margin-bottom:3px;
  transition:transform .35s var(--fx-ease-spring)
}
.fx-domain:hover .fx-domain__ico{transform:rotate(-8deg) scale(1.06)}
.fx-domain__ico svg{width:21px;height:21px}
.fx-domain__name{font-size:16px;font-weight:800;line-height:1.4;letter-spacing:-.01em}
.fx-domain__desc{font-size:13.5px;color:var(--fx-ink-2);line-height:1.62;flex:1}
.fx-domain__meta{font-size:12px;color:var(--fx-ink-3);font-family:var(--fx-mono);font-weight:600}

/* ---------- 12. 教程卡 ---------- */
.fx-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fx-card{
  position:relative;display:flex;flex-direction:column;gap:11px;padding:22px;
  background:var(--fx-card);border:1.5px solid var(--fx-line-strong);border-radius:18px;
  transition:transform .3s var(--fx-ease-spring),border-color .25s,box-shadow .3s
}
.fx-card::before{
  content:"";position:absolute;left:22px;right:22px;top:0;height:3px;border-radius:0 0 3px 3px;
  background:var(--fx-accent,var(--fx-mint));transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--fx-ease-spring)
}
.fx-card:hover{transform:translate(-3px,-3px);border-color:var(--fx-ink);box-shadow:5px 5px 0 var(--fx-ink)}
.fx-card:hover::before{transform:scaleX(1)}
.fx-card__top{display:flex;flex-direction:column;gap:10px}
.fx-card__t{font-size:17.5px;font-weight:800;line-height:1.42;letter-spacing:-.015em;min-width:0}
.fx-card:hover .fx-card__t{color:var(--fx-ink)}
.fx-card__badges{display:flex;flex-wrap:wrap;gap:6px;flex:none}
.fx-card__path{font-size:12.5px;font-weight:600;color:var(--fx-ink-3)}
.fx-card__snippet{font-size:14.5px;color:var(--fx-ink-2);line-height:1.72;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 13. 热门列表 ---------- */
.fx-hotlist{counter-reset:h;display:grid;gap:4px}
.fx-hotitem{
  display:flex;align-items:center;gap:15px;padding:14px 18px;border-radius:14px;
  border:1.5px solid transparent;transition:background-color .2s,border-color .2s,transform .25s var(--fx-ease-spring)
}
.fx-hotitem::before{
  counter-increment:h;content:counter(h);flex:none;width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;font-family:var(--fx-mono);font-size:13.5px;font-weight:700;
  background:var(--fx-paper-2);color:var(--fx-ink-2);border:1.5px solid var(--fx-line-strong);
  transition:background-color .25s,color .25s,transform .3s var(--fx-ease-spring)
}
.fx-hotitem:nth-child(-n+3)::before{background:var(--fx-sun);color:var(--fx-ink);border-color:var(--fx-ink)}
.fx-hotitem:hover{background:var(--fx-card);border-color:var(--fx-ink);transform:translateX(4px);box-shadow:3px 3px 0 var(--fx-ink)}
.fx-hotitem:hover::before{transform:rotate(-8deg)}
.fx-hotitem__t{font-size:16px;font-weight:700;flex:1;min-width:0;line-height:1.5}
.fx-hotitem__badges{display:flex;gap:6px;flex:none}

/* ---------- 14. 向导横幅 ---------- */
.fx-banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:26px 30px;border-radius:22px;
  background:var(--fx-lav);border:2px solid var(--fx-ink);box-shadow:5px 5px 0 var(--fx-ink)
}
.fx-banner__ico{
  width:50px;height:50px;border-radius:15px;background:var(--fx-card);display:grid;place-items:center;
  color:var(--fx-ink);border:1.5px solid var(--fx-ink);flex:none;
  animation:fxFloat 4.5s var(--fx-ease-in-out) infinite
}
.fx-banner__body{flex:1;min-width:220px}
.fx-banner__body h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.fx-banner__body p{font-size:14.5px;color:var(--fx-ink);opacity:.78;margin-top:5px;font-weight:500}
.fx-banner .fx-btn--primary{background:var(--fx-card)}

/* ---------- 15. 页脚（墨块，参考 StrategyBreakdowns） ---------- */
.fx-foot{margin-top:clamp(56px,8vw,96px);background:var(--fx-ink);color:var(--fx-paper)}
.fx-foot__inner{padding-block:44px 34px;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:30px}
.fx-foot .fx-brand__mark{background:var(--fx-mint);border-color:var(--fx-paper);box-shadow:2.5px 2.5px 0 rgba(251,246,236,.42)}
.fx-foot .fx-brand__text{color:var(--fx-paper)}
.fx-foot .fx-brand__text em{color:var(--fx-sun)}
.fx-foot h3{font-size:14px;font-weight:800;margin-bottom:12px;color:var(--fx-paper);letter-spacing:.02em}
.fx-foot ul{display:grid;gap:8px}
.fx-foot a,.fx-foot p{font-size:13.5px;color:rgba(251,246,236,.72);line-height:1.7}
.fx-foot a{transition:color .2s,transform .2s}
.fx-foot a:hover{color:var(--fx-sun)}
.fx-foot__legal{padding-block:18px;border-top:1px solid rgba(251,246,236,.18);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:rgba(251,246,236,.6)}
.fx-foot__legal a{color:rgba(251,246,236,.72)}

/* ---------- 16. 面包屑 ---------- */
.fx-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--fx-ink-3);padding-block:20px}
.fx-crumb a{color:var(--fx-ink-2);transition:color .2s}
.fx-crumb a:hover{color:var(--fx-lav-ink)}
.fx-crumb__sep{opacity:.5}

/* ---------- 17. 文章页 ---------- */
.fx-doc{display:grid;grid-template-columns:214px minmax(0,var(--fx-read)) 196px;gap:clamp(22px,3vw,44px);align-items:start;justify-content:center}
.fx-doc__nav,.fx-doc__toc{position:sticky;top:calc(var(--fx-navy) + 22px);font-size:14px}
.fx-doc__nav h3,.fx-doc__toc h3{font-size:11.5px;letter-spacing:.1em;color:var(--fx-ink-3);margin-bottom:11px;font-weight:800}
.fx-doc__nav ul,.fx-doc__toc ul{display:grid;gap:3px}
.fx-doc__nav a,.fx-doc__toc a{display:block;padding:7px 11px;border-radius:10px;color:var(--fx-ink-2);line-height:1.5;font-weight:600;border-left:3px solid transparent;transition:background-color .2s,color .2s,transform .22s var(--fx-ease-spring)}
.fx-doc__nav a:hover,.fx-doc__toc a:hover{background:var(--fx-paper-2);color:var(--fx-ink);transform:translateX(2px)}
.fx-doc__nav a[aria-current="page"]{color:var(--fx-ink);background:var(--fx-mint);border-left-color:var(--fx-ink)}
.fx-doc__toc a{font-size:13.5px;padding:6px 11px}
.fx-doc__toc a.is-active{color:var(--fx-ink);border-left-color:var(--fx-coral);background:var(--fx-paper-2);font-weight:800}

.fx-progress{position:sticky;top:var(--fx-navy);height:4px;background:transparent;z-index:45}
.fx-progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--fx-mint),var(--fx-sun),var(--fx-coral));transition:width .16s linear}

.fx-title{margin-top:8px;font-size:clamp(28px,4.2vw,42px);line-height:1.2;letter-spacing:-.035em;font-weight:800;max-width:24ch;text-wrap:balance}
/* 待确认清单：方框 + 墨色描边 */
/* 同样不能用 display:flex —— 清单项含 <strong>/<code> 等内联元素，
   flex 会把它们变成独立 flex item，句子会被拆散。
   用「相对定位 + padding 让位 + 绝对定位方框」。 */
.fx-checklist{margin-top:13px;display:grid;gap:11px}
.fx-checklist li{position:relative;padding-left:31px;font-size:16.5px;line-height:1.82;color:var(--fx-ink-2)}
.fx-check{cursor:default}
.fx-check__box{
  position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--fx-ink);background:var(--fx-card);
  display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--fx-ink)
}
.fx-checklist li.is-on .fx-check__box{background:var(--fx-mint)}
.fx-checklist li.is-on{color:var(--fx-ink-3)}
.fx-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:18px}
.fx-meta__actions{margin-left:auto;display:flex;gap:8px}
.fx-iconbtn{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;
  border:1.5px solid var(--fx-line-strong);border-radius:999px;font-size:13.5px;font-weight:700;
  color:var(--fx-ink-2);background:var(--fx-card);
  transition:border-color .2s,color .2s,transform .25s var(--fx-ease-spring),box-shadow .25s
}
.fx-iconbtn:hover{border-color:var(--fx-ink);color:var(--fx-ink);transform:translate(-1.5px,-1.5px);box-shadow:2.5px 2.5px 0 var(--fx-ink)}
.fx-iconbtn.is-on{background:var(--fx-sun);border-color:var(--fx-ink);color:var(--fx-ink)}

/* 内容卡片：文章主体放进「纸卡」，参考 StrategyBreakdowns 的边框卡 */
.fx-conclusion{
  margin-top:28px;padding:22px 24px;border-radius:18px;background:var(--fx-mint-soft);
  border:1.5px solid var(--fx-mint-ink);border-left:6px solid var(--fx-mint-ink);
  box-shadow:3px 3px 0 var(--fx-mint-ink)
}
.fx-conclusion h2{font-size:14px;font-weight:800;color:var(--fx-mint-ink);margin-bottom:8px;display:flex;align-items:center;gap:7px;letter-spacing:.02em}
.fx-conclusion p{font-size:16.5px;line-height:1.78;color:var(--fx-ink);font-weight:500}

.fx-quickfix{
  margin-top:18px;padding:22px 24px;border-radius:18px;background:var(--fx-sun-soft);
  border:1.5px solid var(--fx-sun-ink);box-shadow:3px 3px 0 var(--fx-sun-ink)
}
.fx-quickfix h2{font-size:14px;font-weight:800;color:var(--fx-sun-ink);margin-bottom:14px;display:flex;align-items:center;gap:7px;letter-spacing:.02em}
.fx-quickfix ol{counter-reset:q;display:grid;gap:11px}
.fx-quickfix li{counter-increment:q;position:relative;padding-left:35px;font-size:15.5px;line-height:1.78;font-weight:500}
.fx-quickfix li::before{
  content:counter(q);position:absolute;left:0;top:3px;width:24px;height:24px;border-radius:8px;
  background:var(--fx-sun);color:var(--fx-ink);border:1.5px solid var(--fx-ink);
  font-size:12.5px;font-weight:800;display:grid;place-items:center
}

.fx-h2{margin-top:42px;font-size:clamp(21px,2.5vw,25px);font-weight:800;letter-spacing:-.025em;scroll-margin-top:calc(var(--fx-navy) + 18px);display:flex;align-items:center;gap:11px}
.fx-h2::before{content:"";width:5px;height:22px;border-radius:3px;background:var(--fx-lav);flex:none}
.fx-h3{font-size:18.5px;font-weight:800;margin-top:10px;scroll-margin-top:calc(var(--fx-navy) + 18px)}
.fx-p{margin-top:13px;font-size:16.5px;line-height:1.86;color:var(--fx-ink-2)}
.fx-p strong{color:var(--fx-ink);font-weight:700}
.fx-p a,.fx-link{color:var(--fx-lav-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;font-weight:600}
.fx-p a:hover,.fx-link:hover{color:var(--fx-coral-ink)}
.fx-ul{margin-top:13px;display:grid;gap:9px}
.fx-ul li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.82;color:var(--fx-ink-2)}
.fx-ul li::before{content:"";position:absolute;left:3px;top:12px;width:7px;height:7px;border-radius:2px;background:var(--fx-coral);border:1.5px solid var(--fx-ink)}
.fx-ol{margin-top:13px;counter-reset:ol;display:grid;gap:9px}
.fx-ol li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.82;color:var(--fx-ink-2);counter-increment:ol}
.fx-ol li::before{content:counter(ol);position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:7px;background:var(--fx-lav-soft);color:var(--fx-lav-ink);font-size:11.5px;font-weight:800;display:grid;place-items:center;font-family:var(--fx-mono);border:1.5px solid var(--fx-lav-ink)}

.fx-table-wrap{margin-top:15px;overflow-x:auto;border-radius:14px;border:1.5px solid var(--fx-line-strong);background:var(--fx-card)}
.fx-table{width:100%;border-collapse:collapse;font-size:14.5px}
.fx-table th,.fx-table td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--fx-line)}
.fx-table th{background:var(--fx-paper-2);font-weight:800}
.fx-table tr:last-child td{border-bottom:0}
.fx-table tr:nth-child(even) td{background:color-mix(in srgb,var(--fx-paper) 60%,transparent)}

.fx-callout{margin-top:17px;padding:15px 19px;border-radius:14px;font-size:15.5px;line-height:1.78;display:flex;gap:11px;font-weight:500;border:1.5px solid}
.fx-callout__ico{flex:none;margin-top:1px}
.fx-callout--safe{background:var(--risk-safe-bg);color:var(--risk-safe);border-color:var(--risk-safe)}
.fx-callout--caution{background:var(--risk-caution-bg);color:var(--risk-caution);border-color:var(--risk-caution)}
.fx-callout--danger{background:var(--risk-danger-bg);color:var(--risk-danger);border-color:var(--risk-danger)}
.fx-callout strong{font-weight:800}

.fx-cmd{position:relative;margin-top:13px;border:1.5px solid var(--fx-line-strong);border-radius:14px;background:var(--code-bg);overflow:hidden;transition:border-color .2s,box-shadow .25s}
.fx-cmd:hover{border-color:var(--fx-ink)}
.fx-cmd--danger{border-left:5px solid var(--risk-danger)}
.fx-cmd pre{margin:0;padding:16px 100px 16px 19px;overflow-x:auto}
.fx-cmd code{font-family:var(--fx-mono);font-size:14.5px;line-height:1.72;color:var(--code-ink);white-space:pre;user-select:all}
.fx-cmd__copy{
  position:absolute;top:10px;right:10px;height:32px;padding:0 12px;border-radius:9px;
  background:var(--fx-card);border:1.5px solid var(--fx-line-strong);font-size:12.5px;font-weight:700;
  color:var(--fx-ink-2);display:inline-flex;align-items:center;gap:5px;
  transition:border-color .2s,color .2s,transform .25s var(--fx-ease-spring),box-shadow .25s
}
.fx-cmd__copy:hover{border-color:var(--fx-ink);color:var(--fx-ink);box-shadow:2px 2px 0 var(--fx-ink);transform:translate(-1px,-1px)}
.fx-cmd__copy.is-done{background:var(--fx-mint);border-color:var(--fx-ink);color:var(--fx-ink)}

/* ---------- 18. 步骤：虚线时间轴 + 箭头（蓝图语言） ---------- */
.fx-steps{margin-top:20px;display:grid;gap:0;counter-reset:s}
.fx-step{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;padding-bottom:34px}
.fx-step::before{
  content:"";position:absolute;left:22px;top:50px;bottom:6px;width:0;
  border-left:2px dashed var(--fx-line-strong);
  transition:border-color .3s
}
.fx-step:last-child{padding-bottom:8px}
.fx-step:last-child::before{display:none}
.fx-step__num{
  counter-increment:s;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:var(--fx-card);border:2px solid var(--fx-ink);
  font-family:var(--fx-mono);font-size:15px;font-weight:800;color:var(--fx-ink);
  position:relative;z-index:1;box-shadow:3px 3px 0 var(--fx-ink);
  transition:background-color .3s,transform .35s var(--fx-ease-spring),box-shadow .3s
}
.fx-step__num::before{content:counter(s)}
.fx-step:hover .fx-step__num{transform:translate(-1.5px,-1.5px) rotate(-5deg);box-shadow:5px 5px 0 var(--fx-ink)}
.fx-step.is-done .fx-step__num{background:var(--fx-mint)}
.fx-step.is-done .fx-step__num::before{content:"✓"}
.fx-step.is-done::before{border-left-style:solid;border-left-color:var(--fx-mint)}
.fx-step__body{padding-top:9px}
.fx-step__head{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.fx-step__title{font-size:18.5px;font-weight:800;line-height:1.5;letter-spacing:-.015em}
.fx-step__check{
  flex:none;width:38px;height:38px;border-radius:12px;border:1.5px solid var(--fx-line-strong);
  background:var(--fx-card);color:var(--fx-ink-3);display:grid;place-items:center;
  transition:all .28s var(--fx-ease-spring)
}
.fx-step__check:hover{border-color:var(--fx-ink);color:var(--fx-ink);transform:scale(1.08)}
.fx-step.is-done .fx-step__check{background:var(--fx-mint);border-color:var(--fx-ink);color:var(--fx-ink)}
.fx-step__goal{margin-top:9px;font-size:15px;color:var(--fx-ink-2);line-height:1.78}
.fx-step__label{font-weight:800;color:var(--fx-ink)}
.fx-step__expect{
  margin-top:11px;padding:11px 15px;border-radius:12px;background:var(--fx-mint-soft);
  font-size:14.5px;color:var(--fx-ink);font-weight:500;border:1.5px solid var(--fx-mint-ink)
}
.fx-step__fallback{margin-top:11px;border:1.5px dashed var(--fx-line-strong);border-radius:13px;overflow:hidden;transition:border-color .2s}
.fx-step__fallback:hover{border-color:var(--fx-ink)}
.fx-step__fallback summary{padding:11px 15px;font-size:14px;font-weight:700;color:var(--fx-ink-2);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;transition:color .2s}
.fx-step__fallback summary::-webkit-details-marker{display:none}
.fx-step__fallback summary::before{content:"";width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .25s var(--fx-ease-spring)}
.fx-step__fallback[open] summary::before{transform:rotate(90deg)}
.fx-step__fallback[open] summary{border-bottom:1.5px dashed var(--fx-line-strong);color:var(--fx-ink)}
.fx-step__fallback div{padding:13px 15px;font-size:14.5px;color:var(--fx-ink-2);line-height:1.78;animation:fxPop .26s var(--fx-ease-spring)}

/* ---------- 19. 分流 / 反馈 / 相关 ---------- */
.fx-divert{margin-top:17px;border:1.5px solid var(--fx-line-strong);border-radius:16px;overflow:hidden;background:var(--fx-card)}
.fx-divert__row{display:flex;gap:14px;padding:14px 19px;font-size:15px;line-height:1.75;border-bottom:1.5px dashed var(--fx-line-strong);transition:background-color .2s}
.fx-divert__row:last-child{border-bottom:0}
.fx-divert__row:hover{background:var(--fx-paper)}
.fx-divert__row strong{flex:none;color:var(--fx-ink);font-weight:800;min-width:150px}
.fx-divert__row span{color:var(--fx-ink-2)}
.fx-divert__row a{color:var(--fx-lav-ink);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.fx-divert__row--final{background:var(--fx-sun-soft)}
.fx-divert__row--final strong,.fx-divert__row--final span{color:var(--fx-sun-ink)}

.fx-feedback{
  margin-top:38px;padding:26px;border-radius:20px;background:var(--fx-paper-2);
  border:2px solid var(--fx-ink);text-align:center;box-shadow:4px 4px 0 var(--fx-ink)
}
.fx-feedback h2{font-size:18px;font-weight:800;letter-spacing:-.02em}
.fx-feedback p{font-size:14.5px;color:var(--fx-ink-2);margin-top:7px}
.fx-feedback__row{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.fx-related{margin-top:15px;display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.fx-related a{
  padding:15px 18px;border:1.5px solid var(--fx-line-strong);border-radius:15px;background:var(--fx-card);
  font-size:15px;font-weight:700;transition:transform .28s var(--fx-ease-spring),border-color .2s,box-shadow .28s
}
.fx-related a:hover{border-color:var(--fx-ink);transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--fx-ink)}

/* ---------- 20. 搜索页 ---------- */
.fx-searchbar{
  display:flex;align-items:center;gap:12px;height:58px;padding:0 10px 0 19px;
  background:var(--fx-card);border:2px solid var(--fx-ink);border-radius:18px;box-shadow:4px 4px 0 var(--fx-ink);
  transition:transform .3s var(--fx-ease-spring),box-shadow .3s
}
.fx-searchbar:focus-within{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--fx-ink)}
.fx-searchbar input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-size:16.5px;font-weight:500}
.fx-filters{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:20px;padding-bottom:17px;border-bottom:1.5px dashed var(--fx-line-strong)}
.fx-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fx-filter__label{font-size:13px;font-weight:700;color:var(--fx-ink-3)}
.fx-filter__btn{
  padding:6px 13px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--fx-ink-2);
  border:1.5px solid transparent;transition:all .24s var(--fx-ease-spring)
}
.fx-filter__btn:hover{border-color:var(--fx-line-strong);color:var(--fx-ink)}
.fx-filter__btn.is-on{background:var(--fx-lav);color:var(--fx-ink);border-color:var(--fx-ink);box-shadow:2px 2px 0 var(--fx-ink);font-weight:700}
.fx-resultcount{margin-top:22px;font-size:15px;color:var(--fx-ink-2);font-weight:600}
.fx-resultcount b{color:var(--fx-ink);font-weight:800}
.fx-empty{
  margin-top:26px;padding:36px 26px;border:2px dashed var(--fx-line-strong);border-radius:22px;
  text-align:center;background:var(--fx-card)
}
.fx-empty h3{font-size:19px;font-weight:800}
.fx-empty p{font-size:14.5px;color:var(--fx-ink-2);margin-top:9px}
.fx-empty__links{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:19px}

/* ---------- 21. 症状向导 ---------- */
.fx-wiz{max-width:700px;margin-inline:auto}
.fx-wiz__prog{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.fx-wiz__bar{flex:1;height:9px;border-radius:999px;background:var(--fx-paper-2);overflow:hidden;border:1.5px solid var(--fx-line-strong)}
.fx-wiz__fill{height:100%;background:linear-gradient(90deg,var(--fx-mint),var(--fx-sun));border-radius:999px;transition:width .45s var(--fx-ease-spring);width:12%}
.fx-wiz__count{font-family:var(--fx-mono);font-size:13.5px;font-weight:700;color:var(--fx-ink-2)}
.fx-wiz__q{font-size:clamp(23px,3.6vw,31px);font-weight:800;letter-spacing:-.03em;line-height:1.32}
.fx-wiz__hint{font-size:15px;color:var(--fx-ink-2);margin-top:11px}
.fx-wiz__opts{margin-top:26px;display:grid;gap:12px}
.fx-wiz__opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:19px 22px;
  background:var(--fx-card);border:1.5px solid var(--fx-line-strong);border-radius:17px;
  font-size:16.5px;font-weight:600;
  transition:transform .3s var(--fx-ease-spring),border-color .2s,box-shadow .3s,background-color .2s
}
.fx-wiz__opt:hover{border-color:var(--fx-ink);background:var(--fx-sun-soft);transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--fx-ink)}
.fx-wiz__opt::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2.5px solid var(--fx-ink);border-top:2.5px solid var(--fx-ink);transform:rotate(45deg);opacity:.35;transition:transform .3s var(--fx-ease-spring),opacity .2s}
.fx-wiz__opt:hover::after{transform:rotate(45deg) translate(3px,-3px);opacity:1}
.fx-wiz__back{margin-top:22px;font-size:14.5px;color:var(--fx-ink-3)}
.fx-wiz__back button{color:var(--fx-lav-ink);font-weight:700}
.fx-wiz__result{display:grid;gap:15px;margin-top:8px}
.fx-wiz__reason{font-size:14px;color:var(--fx-ink-2);margin-top:8px;padding-left:3px;font-weight:500}
.fx-wiz__reason b{color:var(--fx-lav-ink);font-weight:800}
/* 向导题目切换动画 */
.fx-wiz__stage{animation:fxWizIn .42s var(--fx-ease-out) both}
@keyframes fxWizIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- 22. 滚动揭示（错落入场） ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);will-change:opacity,transform}
[data-reveal].fx-in{
  opacity:1;transform:none;
  transition:opacity .6s var(--fx-ease-out),transform .7s var(--fx-ease-out);
  transition-delay:calc(var(--i,0) * 55ms)
}
html:not(.fx-js) [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* ---------- 23. 响应式 ---------- */
@media (max-width:1180px){
  .fx-doc{grid-template-columns:190px minmax(0,1fr)}
  .fx-doc__toc{display:none}
}
@media (max-width:1024px){
  .fx-domains{grid-template-columns:repeat(3,1fr)}
  .fx-nav{display:none}
  .fx-foot__inner{grid-template-columns:1fr 1fr}
  .fx-hero__shape--1{width:86px;height:86px}
  .fx-hero__shape--4{width:110px;height:110px}
}
@media (max-width:900px){
  .fx-doc{grid-template-columns:minmax(0,1fr)}
  .fx-doc__nav{display:none}
  .fx-cards{grid-template-columns:1fr}
  .fx-related{grid-template-columns:1fr}
}
@media (max-width:768px){
  body{font-size:16.5px}
  body::before{background-size:18px 18px}
  .fx-hero__shapes{opacity:.5}
  .fx-domains{grid-template-columns:repeat(2,1fr);gap:12px}
  .fx-search{height:58px;border-radius:17px;padding-left:16px;box-shadow:3px 3px 0 var(--fx-ink)}
  .fx-search__go{padding:0 18px;font-size:14.5px}
  .fx-search__kbd{display:none}
  .fx-title{max-width:none}
  .fx-meta__actions{margin-left:0;width:100%}
  .fx-hotitem{flex-wrap:wrap;gap:6px 12px;align-items:flex-start}
  .fx-hotitem__t{flex:1 1 100%;order:2}
  .fx-hotitem__badges{order:3;flex:1 1 100%;flex-wrap:wrap;padding-left:45px}
  .fx-hotitem::before{order:1;margin-top:2px}
  .fx-step{grid-template-columns:38px minmax(0,1fr);gap:13px}
  .fx-step__num{width:38px;height:38px;font-size:14px;border-radius:12px;box-shadow:2.5px 2.5px 0 var(--fx-ink)}
  .fx-step::before{left:18px;top:42px}
  .fx-cmd pre{padding:14px 14px 14px 15px}
  .fx-cmd__copy{position:static;margin:0 12px 12px;justify-content:center;display:flex}
  .fx-divert__row{flex-direction:column;gap:5px}
  .fx-divert__row strong{min-width:0}
  .fx-foot__inner{padding-block:32px 26px}
}
@media (max-width:520px){
  .fx-domains{grid-template-columns:1fr;gap:10px}
  /* 窄屏：领域卡压缩为「图标 + 名称 + 一行说明」，去掉示例行，页面长度减半 */
  .fx-domain{padding:14px 16px;gap:5px;flex-direction:row;flex-wrap:wrap;align-items:center}
  .fx-domain__ico{width:36px;height:36px;margin-bottom:0;flex:none}
  .fx-domain__ico svg{width:18px;height:18px}
  .fx-domain__name{font-size:15.5px;flex:1;min-width:0}
  .fx-domain__desc{flex:1 1 100%;font-size:13px;line-height:1.55}
  .fx-domain__meta{display:none}
  .fx-domain::after{display:none}
  .fx-foot__inner{grid-template-columns:1fr}
  .fx-head{flex-direction:column;align-items:flex-start}
  .fx-hero__shapes{display:none}
  .fx-hero h1{font-size:clamp(28px,8.6vw,36px)}
}

/* ---------- 24. 打印 ---------- */
@media print{
  body::before,.fx-preloader,.fx-curtain{display:none!important}
  .fx-top,.fx-foot,.fx-doc__nav,.fx-doc__toc,.fx-feedback,.fx-progress,.fx-cmd__copy,.fx-hotwords,.fx-searchwrap,.fx-hero__shapes{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  [data-reveal]{opacity:1!important;transform:none!important}
  .fx-doc{display:block}
  .fx-step{page-break-inside:avoid}
  .fx-step__fallback div{display:block!important}
  .fx-cmd{border:1px solid #999;background:#f5f5f5;box-shadow:none}
  .fx-conclusion,.fx-quickfix,.fx-callout{box-shadow:none}
}

/* ---------- 25. 减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fx-preloader{display:none}
}