/* ==========================================================================
   GEO 博客前台全站样式(卡6 全量重建)
   视觉基线:9 屏稿(赛博虎深色);工程契约:PRD §2.0(tokens/断点/无障碍)
   前台零构建,纯 CSS;派生色一律 color-mix 推导
   ========================================================================== */

/* ============ tokens(PRD §2.0,逐项) ============ */
:root{
  /* 种子色 */
  --seed-bg:#060b0e;
  --seed-surface:#0b1418;
  --seed-panel:#0e1b21;
  --seed-fg:#e6f4f1;
  --seed-primary:#2ee6d6;   /* 霓虹青主色 */
  --seed-accent:#ff9a3c;    /* 橙虎点缀 */
  --success:#35d07f; --warning:#ffb020; --danger:#ff5d5d;
  --seed-radius:10px;
  --seed-density:1;
  --plate-bg:#f4f6f5;       /* 品牌字标牌底(浅,屏5) */
  --plate-fg:#4E5969;
  --ink-0:#000;
  --ink-100:#fff;
  --seed-hero:url("/static/front/img/hero-tiger-1920.jpg");

  /* 派生色(color-mix 推导,禁裸色值) */
  --fg-muted:color-mix(in srgb, var(--seed-fg) 64%, var(--seed-bg));
  --fg-faint:color-mix(in srgb, var(--seed-fg) 40%, var(--seed-bg));
  --border:color-mix(in srgb, var(--seed-primary) 16%, transparent);
  --border-soft:color-mix(in srgb, var(--seed-fg) 10%, transparent);
  --border-strong:color-mix(in srgb, var(--seed-primary) 34%, transparent);
  --primary-soft:color-mix(in srgb, var(--seed-primary) 12%, transparent);
  --primary-softer:color-mix(in srgb, var(--seed-primary) 6%, transparent);
  --accent-soft:color-mix(in srgb, var(--seed-accent) 14%, transparent);
  --mark-bg:color-mix(in srgb, var(--seed-accent) 30%, transparent);
  --code-bg:color-mix(in srgb, var(--seed-bg) 78%, var(--ink-0));
  --surface-2:color-mix(in srgb, var(--seed-panel) 78%, var(--seed-bg));
  --glow:0 0 24px color-mix(in srgb, var(--seed-primary) 20%, transparent);
  --glow-accent:0 0 22px color-mix(in srgb, var(--seed-accent) 22%, transparent);
  --shadow-1:0 14px 40px color-mix(in srgb, var(--ink-0) 46%, transparent);
  --hud:color-mix(in srgb, var(--seed-primary) 46%, transparent);
  --grad-brand:linear-gradient(135deg, color-mix(in srgb,var(--seed-primary) 82%, transparent), color-mix(in srgb,var(--seed-accent) 82%, transparent));

  /* 字阶 12/14/16/18/24/34/44/60 八级 */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px; --text-xl:24px; --text-2xl:34px; --text-3xl:44px; --text-4xl:60px;
  --lh-body:1.75; --fw-bold:600;

  /* 间距 4px 基网 --sp-1~9 = 4~96px */
  --sp-1:calc(4px * var(--seed-density));
  --sp-2:calc(8px * var(--seed-density));
  --sp-3:calc(12px * var(--seed-density));
  --sp-4:calc(16px * var(--seed-density));
  --sp-5:calc(24px * var(--seed-density));
  --sp-6:calc(32px * var(--seed-density));
  --sp-7:calc(48px * var(--seed-density));
  --sp-8:calc(64px * var(--seed-density));
  --sp-9:calc(96px * var(--seed-density));
  /* 圆角 5/10/16 */
  --radius-s:calc(var(--seed-radius) * .5);
  --radius-m:var(--seed-radius);
  --radius-l:calc(var(--seed-radius) * 1.6);
  /* 版心 */
  --container:1160px; --container-prose:720px;
}

/* ============ 基座 ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--seed-bg); color:var(--seed-fg);
  font-family:var(--font-ui); font-size:var(--text-base); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--seed-primary);text-decoration:none}
a:hover{text-decoration:underline}
code,pre,kbd{font-family:var(--font-mono)}
::selection{background:var(--primary-soft);color:var(--seed-fg)}
[hidden]{display:none!important}

/* 无障碍:focus-visible 2px 青色 outline;skip-link */
:focus-visible{outline:2px solid var(--seed-primary);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--seed-primary);color:var(--seed-bg);padding:8px 16px;border-radius:0 0 var(--radius-s) 0;font-weight:var(--fw-bold)}
.skip-link:focus{left:0}

/* 裂图占位:onerror 移除 src 后由本类兜底可见 */
.img-fallback{
  width:100%;height:100%;min-height:96px;
  background:
    repeating-linear-gradient(135deg, var(--border-soft) 0 1px, transparent 1px 10px),
    linear-gradient(160deg, var(--primary-softer), transparent 60%),
    var(--seed-panel);
}

/* 阅读进度条(默认 hidden,JS 渐进增强显示) */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:95;background:var(--grad-brand);box-shadow:var(--glow);transition:width .1s linear}

/* ============ 导航 ============ */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--seed-surface) 82%, transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
  transition:box-shadow .2s ease-out,background .2s ease-out;
}
.site-nav.is-scrolled{box-shadow:0 8px 26px color-mix(in srgb,var(--ink-0) 40%, transparent);background:color-mix(in srgb, var(--seed-surface) 94%, transparent)}
.nav-inner{max-width:var(--container);margin:0 auto;padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;gap:var(--sp-4)}
.brand{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.brand:hover{text-decoration:none}
.brand-mark{width:32px;height:32px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--seed-primary) 35%,transparent))}
.brand-name{font-weight:var(--fw-bold);font-size:var(--text-lg);color:var(--seed-fg);letter-spacing:.02em;white-space:nowrap}
.brand-accent{color:var(--seed-accent)}
.nav-links{display:flex;align-items:center;gap:var(--sp-4);margin-left:auto;list-style:none}
.nav-links a{color:var(--fg-muted);font-size:var(--text-sm);padding:6px 2px;position:relative;white-space:nowrap}
.nav-links a:hover{color:var(--seed-fg);text-decoration:none}
.nav-links a.is-current{color:var(--seed-primary);font-weight:var(--fw-bold)}
.nav-links a.is-current::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--seed-primary);border-radius:2px;box-shadow:var(--glow)}
.nav-has-sub{position:relative}
.nav-sub{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:168px;background:var(--seed-panel);border:1px solid var(--border);border-radius:var(--radius-m);padding:var(--sp-2);list-style:none;box-shadow:var(--glow)}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.nav-has-sub:hover .nav-sub,.nav-has-sub:focus-within .nav-sub{display:block}
.nav-sub a{display:block;padding:6px 10px;border-radius:var(--radius-s)}
.nav-sub a:hover{background:var(--primary-softer)}
.search-box{display:flex;align-items:center;gap:var(--sp-2);background:var(--seed-panel);border:1px solid var(--border-soft);border-radius:999px;padding:6px 14px;min-width:180px}
.search-box svg{flex-shrink:0;color:var(--fg-faint)}
.search-box input{background:transparent;border:0;outline:0;color:var(--seed-fg);font-family:var(--font-ui);font-size:var(--text-sm);width:100%}
.search-box input::placeholder{color:var(--fg-faint)}
.search-box:focus-within{border-color:var(--border-strong);box-shadow:var(--glow)}
.search-box.is-invalid{border-color:var(--danger);box-shadow:0 0 12px color-mix(in srgb,var(--danger) 30%, transparent)}
.nav-burger{display:none;margin-left:auto;background:transparent;border:1px solid var(--border-soft);border-radius:var(--radius-s);color:var(--seed-fg);padding:6px 10px;cursor:pointer;font-size:var(--text-base)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-4)}

/* ============ 按钮 / 徽标 / 芯片 ============ */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--fw-bold);border-radius:var(--radius-m);padding:10px 22px;cursor:pointer;border:1px solid transparent;transition:all .15s ease-out}
.btn--primary{background:var(--seed-primary);color:var(--seed-bg);box-shadow:var(--glow)}
.btn--primary:hover{background:color-mix(in srgb, var(--seed-primary) 86%, var(--ink-100));text-decoration:none;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--seed-primary);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--primary-softer);text-decoration:none}
.btn--accent{background:transparent;color:var(--seed-accent);border-color:color-mix(in srgb, var(--seed-accent) 45%, transparent)}
.btn--accent:hover{background:var(--accent-soft);text-decoration:none}
.btn--sm{padding:6px 14px;font-size:var(--text-xs)}

.tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-family:var(--font-mono);color:var(--seed-primary);background:var(--primary-soft);border:1px solid var(--border);border-radius:999px;padding:2px 10px;white-space:nowrap}
.tag--accent{color:var(--seed-accent);background:var(--accent-soft);border-color:color-mix(in srgb, var(--seed-accent) 35%, transparent)}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{font-size:var(--text-sm);color:var(--fg-muted);background:var(--seed-panel);border:1px solid var(--border-soft);border-radius:999px;padding:5px 14px;cursor:pointer;transition:all .15s ease-out;text-decoration:none}
.chip:hover{color:var(--seed-fg);border-color:var(--border-strong);text-decoration:none}
.chip.is-on{color:var(--seed-bg);background:var(--seed-primary);border-color:var(--seed-primary);font-weight:var(--fw-bold)}
[data-cat-panel],[data-home-panel]{transition:opacity .15s ease-out}
[data-cat-panel].is-loading,[data-home-panel].is-loading{opacity:.45;pointer-events:none}

/* 全息面板卡 + HUD 角标 */
.panel{background:var(--seed-panel);border:1px solid var(--border);border-radius:var(--radius-m);position:relative;overflow:hidden;transition:border-color .15s ease-out,box-shadow .15s ease-out,transform .15s ease-out}
.panel::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--primary-softer),transparent 42%);pointer-events:none}
.panel::after{content:"";position:absolute;top:9px;right:9px;width:11px;height:11px;border-top:1.5px solid var(--hud);border-right:1.5px solid var(--hud);opacity:.7;pointer-events:none}
.panel:hover{border-color:var(--border-strong);box-shadow:var(--glow)}

/* 图标 */
.ico{width:22px;height:22px;stroke:var(--seed-primary);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico--accent{stroke:var(--seed-accent)}

.empty-tip{padding:var(--sp-6);text-align:center;color:var(--fg-faint);font-size:var(--text-sm);border:1px dashed var(--border-soft);border-radius:var(--radius-m);background:var(--primary-softer)}

/* ============ 屏1 首页 hero ============ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero-bg{position:absolute;inset:0;background:var(--seed-hero) center 32%/cover no-repeat;opacity:.5}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--seed-bg) 26%,transparent) 0%,color-mix(in srgb,var(--seed-bg) 76%,transparent) 58%,var(--seed-bg) 100%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border-soft) 1px,transparent 1px),linear-gradient(90deg,var(--border-soft) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,transparent,var(--ink-0) 40%,transparent);opacity:.5}
.hero-inner{position:relative;max-width:var(--container);margin:0 auto;padding:var(--sp-9) var(--sp-4) var(--sp-8);display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-6);align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--seed-primary);letter-spacing:.14em;text-transform:uppercase}
.hero-eyebrow::before{content:"";width:26px;height:1px;background:var(--seed-primary);box-shadow:var(--glow)}
.hero h1{font-size:var(--text-4xl);line-height:1.08;font-weight:var(--fw-bold);letter-spacing:-.01em;margin:var(--sp-4) 0}
.hero h1 .neon{color:var(--seed-primary);text-shadow:var(--glow)}
.hero h1 .accent{color:var(--seed-accent)}
.hero-sub{color:var(--fg-muted);font-size:var(--text-lg);max-width:34em;margin-bottom:var(--sp-5)}
.hero-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}
.hero-stat{padding:var(--sp-4);text-align:center}
.hero-stat b{display:block;font-size:var(--text-2xl);font-family:var(--font-mono);color:var(--seed-primary);text-shadow:var(--glow)}
.hero-stat span{font-size:var(--text-xs);color:var(--fg-muted);letter-spacing:.06em}
.hero-figure{position:relative;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border-strong);box-shadow:var(--glow),var(--shadow-1)}
.hero-figure img{width:100%;height:100%;object-fit:cover;object-position:center 30%;aspect-ratio:4/5;filter:saturate(1.08) contrast(1.05) brightness(.92)}
.hero-figure::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(155deg,color-mix(in srgb,var(--seed-primary) 34%,transparent) 0%,transparent 42%,color-mix(in srgb,var(--seed-bg) 62%,transparent) 100%)}
.hero-figure::after{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--seed-fg) 8%,transparent) 0 1px,transparent 1px 3px);opacity:.35;mix-blend-mode:overlay}
.hero-figure figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:var(--sp-3) var(--sp-4);font-size:var(--text-xs);color:var(--seed-fg);background:linear-gradient(transparent,color-mix(in srgb,var(--seed-bg) 92%,transparent));font-family:var(--font-mono)}

.section{padding:var(--sp-8) 0}
.section-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.section-head .num{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--seed-primary);border:1px solid var(--border);border-radius:var(--radius-s);padding:2px 8px}
.section-head h2{font-size:var(--text-xl);font-weight:var(--fw-bold)}
.section-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--border-strong),transparent)}
.section-head a{font-size:var(--text-sm)}

/* 文章条目(post-item) */
.post-list{display:flex;flex-direction:column}
.post-item{display:grid;grid-template-columns:168px 1fr;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--border-soft);align-items:start}
.post-item:not(:has(.post-thumb)){grid-template-columns:1fr}
.post-item:first-child{padding-top:0}
.post-thumb{border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--border);aspect-ratio:16/10;background:var(--seed-panel)}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease-out}
.post-item:hover .post-thumb img{transform:scale(1.04)}
.post-body h3{font-size:var(--text-lg);line-height:1.4;margin-bottom:var(--sp-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-body h3 a{color:var(--seed-fg)}
.post-body h3 a:hover{color:var(--seed-primary);text-decoration:none}
.post-meta{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--text-xs);color:var(--fg-faint);font-family:var(--font-mono);margin-bottom:var(--sp-2)}
.post-summary{color:var(--fg-muted);font-size:var(--text-sm);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-more{display:inline-block;margin-top:var(--sp-2);font-size:var(--text-sm)}

/* 项目大图卡(proj-card,屏1/屏8) */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
.proj-card{display:flex;flex-direction:column}
.proj-media{display:block;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--border);background:var(--seed-bg)}
.proj-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease-out}
.proj-card:hover .proj-media img{transform:scale(1.04)}
.proj-body{padding:var(--sp-4)}
.proj-body h3{margin:0 0 var(--sp-2);font-size:var(--text-lg);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proj-body h3 a{color:var(--seed-fg)}
.proj-body h3 a:hover{color:var(--seed-primary);text-decoration:none}
.proj-body .post-summary{margin:var(--sp-2) 0 var(--sp-3)}

/* 关于小条(屏1/屏6 hint 复用) */
.about-band{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-5);align-items:center;padding:var(--sp-6);border:1px solid var(--border);border-radius:var(--radius-l);background:linear-gradient(120deg,var(--primary-softer),transparent 55%),var(--seed-panel)}
.about-band .ab-av{width:76px;height:76px;border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--border-strong)}
.about-band h3{font-size:var(--text-lg);margin-bottom:var(--sp-1)}
.about-band p{color:var(--fg-muted);font-size:var(--text-sm)}

/* ============ 屏2/6/8/9 列表公共:面包屑 / 页头 / 工具条 / 分页 / mark ============ */
.crumb{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--text-xs);color:var(--fg-faint);font-family:var(--font-mono);padding:var(--sp-4) 0 0;flex-wrap:wrap}
.crumb a{color:var(--fg-faint)}
.crumb a:hover{color:var(--seed-primary)}
.crumb .sep{opacity:.6}
.page-head{padding:var(--sp-5) 0 var(--sp-4);border-bottom:1px solid var(--border);margin-bottom:var(--sp-5)}
.page-head h1{font-size:var(--text-2xl);font-weight:var(--fw-bold);margin-bottom:var(--sp-2)}
.page-head .desc{color:var(--fg-muted);max-width:46em}
.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.list-toolbar .count{font-size:var(--text-sm);color:var(--fg-faint);font-family:var(--font-mono)}
.cat-chips{margin-bottom:var(--sp-4)}
.pager{display:flex;gap:var(--sp-2);justify-content:center;align-items:center;padding:var(--sp-6) 0;flex-wrap:wrap;font-family:var(--font-mono)}
.pager a,.pager span{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-soft);border-radius:var(--radius-s);font-size:var(--text-sm);color:var(--fg-muted);padding:0 10px}
.pager a:hover{border-color:var(--border-strong);color:var(--seed-fg);text-decoration:none}
.pager .is-current{background:var(--seed-primary);color:var(--seed-bg);border-color:var(--seed-primary);font-weight:var(--fw-bold)}
.pager .gap{border:0;color:var(--fg-faint)}
.pager [aria-disabled="true"]{opacity:.4;pointer-events:none}
mark{background:var(--mark-bg);color:var(--seed-accent);padding:0 2px;border-radius:3px}

/* ============ 屏3 文章详情 ============ */
.article-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-7);max-width:var(--container);margin:0 auto;padding:0 var(--sp-4)}
.article-layout:not(:has(> .toc)){grid-template-columns:minmax(0,1fr)}
.prose-col{min-width:0;max-width:var(--container-prose);width:100%;margin:0 auto}
.toc{position:sticky;top:88px;align-self:start;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-m);background:var(--seed-surface)}
.toc h2{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--fg-faint);font-family:var(--font-mono);margin-bottom:var(--sp-3)}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:2px}
.toc a{display:block;font-size:var(--text-sm);color:var(--fg-muted);padding:5px 10px;border-left:2px solid var(--border-soft);border-radius:0 var(--radius-s) var(--radius-s) 0;overflow-wrap:anywhere}
.toc a.toc-sub{margin-left:var(--sp-3);font-size:var(--text-xs)}
.toc a:hover{color:var(--seed-fg);text-decoration:none}
.toc a.is-active{color:var(--seed-primary);border-left-color:var(--seed-primary);background:var(--primary-softer)}
.post-head{padding:var(--sp-6) 0 var(--sp-5)}
.post-head h1{font-size:var(--text-2xl);line-height:1.3;font-weight:var(--fw-bold);margin:var(--sp-3) 0}
.post-head .meta{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--text-sm);color:var(--fg-muted)}
.author-chip{display:inline-flex;align-items:center;gap:var(--sp-2)}
.author-chip img{width:26px;height:26px;border-radius:50%;border:1px solid var(--border-strong)}
.post-cover{border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border-strong);box-shadow:var(--shadow-1);margin-bottom:var(--sp-6)}
.post-cover img{width:100%;height:auto;display:block}
.post-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--sp-5)}
.article-summary{padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-6)}
.article-summary:hover{border-color:var(--border);box-shadow:none}
.article-summary-label{display:block;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--seed-primary);margin-bottom:var(--sp-2)}
.article-summary-text{margin:0;color:var(--fg-muted);font-size:var(--text-sm);line-height:1.8}
.prose{font-size:17px;line-height:1.85;color:color-mix(in srgb, var(--seed-fg) 92%, var(--seed-bg))}
.prose>p{margin-bottom:var(--sp-4)}
.prose h2{font-size:var(--text-xl);font-weight:var(--fw-bold);margin:var(--sp-6) 0 var(--sp-3);padding-left:var(--sp-3);border-left:3px solid var(--seed-primary);scroll-margin-top:96px}
.prose h3{font-size:var(--text-lg);font-weight:var(--fw-bold);margin:var(--sp-5) 0 var(--sp-2);scroll-margin-top:96px}
.prose ul,.prose ol{margin:0 0 var(--sp-4) var(--sp-5)}
.prose li{margin-bottom:var(--sp-2)}
.prose a{border-bottom:1px solid var(--border-strong)}
.prose code{background:var(--primary-softer);color:var(--seed-primary);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:.88em}
.prose pre{position:relative;background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius-m);padding:var(--sp-5) var(--sp-4) var(--sp-4);overflow-x:auto;margin-bottom:var(--sp-4);font-size:var(--text-sm);line-height:1.6}
.prose pre code{background:transparent;border:0;padding:0;color:color-mix(in srgb,var(--seed-primary) 78%, var(--seed-fg))}
.code-copy{position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-muted);background:var(--seed-panel);border:1px solid var(--border);border-radius:var(--radius-s);padding:3px 9px;cursor:pointer}
.code-copy:hover{color:var(--seed-primary);border-color:var(--border-strong)}
.prose blockquote{border-left:3px solid var(--seed-accent);background:var(--accent-soft);padding:var(--sp-3) var(--sp-4);border-radius:0 var(--radius-m) var(--radius-m) 0;margin-bottom:var(--sp-4);color:var(--fg-muted)}
.prose .callout{border:1px solid var(--border-strong);background:var(--primary-softer);border-radius:var(--radius-m);padding:var(--sp-4);margin-bottom:var(--sp-4);font-size:var(--text-sm);color:var(--fg-muted)}
.prose .callout b{color:var(--seed-primary)}
.prose table{width:100%;border-collapse:collapse;margin-bottom:var(--sp-4);font-size:var(--text-sm);display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--border-soft);padding:8px 12px;text-align:left}
.prose th{background:var(--seed-panel);color:var(--seed-fg);font-family:var(--font-mono);font-size:var(--text-xs)}
.prose img{border-radius:var(--radius-m);border:1px solid var(--border);margin:var(--sp-3) 0;max-width:100%;height:auto}
.prose figcaption{font-size:var(--text-xs);color:var(--fg-faint);font-family:var(--font-mono);text-align:center;margin-top:calc(var(--sp-2) * -1)}
kbd{background:var(--seed-panel);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:.85em;color:var(--seed-fg)}
.author-card{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--radius-l);background:var(--seed-panel);margin:var(--sp-7) 0}
.author-card>img{width:64px;height:64px;border-radius:var(--radius-m);border:1px solid var(--border-strong)}
.author-card h3{font-size:var(--text-lg);margin-bottom:var(--sp-1)}
.author-card p{color:var(--fg-muted);font-size:var(--text-sm)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin:var(--sp-5) 0 var(--sp-7)}
.related-card{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);text-decoration:none}
.related-card h4{font-size:var(--text-base);line-height:1.4;color:var(--seed-fg)}
.related-card:hover{text-decoration:none}
.related-card:hover h4{color:var(--seed-primary)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin:var(--sp-6) 0}
.post-nav a{padding:var(--sp-4);display:block}
.post-nav a:hover{text-decoration:none}
.post-nav .dir{font-size:var(--text-xs);color:var(--fg-faint);font-family:var(--font-mono);display:block;margin-bottom:var(--sp-1)}
.post-nav .t{color:var(--seed-fg);font-size:var(--text-sm)}
.post-nav a:hover .t{color:var(--seed-primary)}
.post-nav .is-none{color:var(--fg-faint);font-size:var(--text-sm);padding:var(--sp-4);border:1px dashed var(--border-soft);border-radius:var(--radius-m)}

/* ============ 屏4 产品 ============ */
.guarantee{display:flex;gap:var(--sp-5);flex-wrap:wrap;padding:var(--sp-4) var(--sp-5);border:1px solid var(--border);border-radius:var(--radius-m);background:var(--seed-surface);margin-bottom:var(--sp-6)}
.guarantee .g{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:var(--fg-muted)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.product-card{display:flex;flex-direction:column}
.product-media{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--border);position:relative;background:linear-gradient(150deg,var(--primary-softer),transparent 55%),var(--seed-bg)}
.product-media img{width:100%;height:100%;object-fit:cover}
.product-media .tag{position:absolute;top:var(--sp-3);left:var(--sp-3);z-index:1}
.product-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.product-body h3{font-size:var(--text-lg);font-weight:var(--fw-bold)}
.price{font-family:var(--font-mono);font-size:var(--text-xl);color:var(--seed-accent);font-weight:var(--fw-bold);text-shadow:var(--glow-accent)}
.price small{font-size:var(--text-xs);color:var(--fg-faint);font-weight:400;margin-left:6px}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:var(--text-sm);color:var(--fg-muted)}
.feat-list li{display:flex;gap:var(--sp-2);align-items:flex-start}
.feat-list li::before{content:"▹";color:var(--seed-primary)}
.product-detail{border-top:1px dashed var(--border-soft);padding-top:var(--sp-3);font-size:var(--text-sm);color:var(--fg-muted)}
.product-detail p{margin-bottom:var(--sp-2)}
.buy-guide{display:flex;align-items:center;gap:var(--sp-3);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--seed-accent) 35%,transparent);border-radius:var(--radius-m);padding:var(--sp-3) var(--sp-4);flex-wrap:wrap;margin-top:auto}
.buy-guide .label{font-size:var(--text-xs);color:var(--seed-accent);font-family:var(--font-mono)}
.buy-guide .wechat{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--seed-fg);font-weight:var(--fw-bold)}

/* ============ 屏5 关于 ============ */
.about-hero{display:grid;grid-template-columns:200px 1fr;gap:var(--sp-7);align-items:start;padding:var(--sp-7) 0 var(--sp-6)}
.about-avatar{position:relative;width:200px;height:200px;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border-strong);box-shadow:var(--glow);background:var(--seed-panel)}
.about-avatar::before{content:"";position:absolute;top:8px;right:8px;width:12px;height:12px;border-top:2px solid var(--seed-primary);border-right:2px solid var(--seed-primary);z-index:2;opacity:.6}
.about-avatar img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease-out}
.about-hero:hover .about-avatar img{transform:scale(1.05)}
.about-avatar-meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-faint);text-align:center;line-height:1.6;margin-top:var(--sp-3)}
.about-avatar-meta b{color:var(--seed-primary);font-weight:var(--fw-bold)}
.stack-panel{padding:var(--sp-5);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-6)}
.stack-row{font-size:var(--text-sm);line-height:1.6;padding:8px 0;border-bottom:1px dashed var(--border-soft)}
.stack-row:last-child{border-bottom:none}
.sk-k{font-weight:var(--fw-bold);color:var(--seed-primary);margin-right:8px}
.sk-v{color:var(--fg-muted)}
.sk-v em{color:var(--seed-accent);font-style:normal;font-weight:var(--fw-medium)}
.doing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.doing-card{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);transition:border-color .15s ease-out,transform .15s ease-out}
.doing-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.doing-card p{font-size:var(--text-sm);color:var(--fg-muted);line-height:1.7}
.ip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.ip-card{overflow:hidden;transition:border-color .15s ease-out,transform .15s ease-out}
.ip-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.ip-media{aspect-ratio:16/10;overflow:hidden;background:var(--seed-panel)}
.ip-card--portrait .ip-media{aspect-ratio:4/5}
.ip-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease-out}
.ip-card:hover .ip-media img{transform:scale(1.04)}
.ip-media--logo{display:flex;align-items:center;justify-content:center;padding:var(--sp-5);background:linear-gradient(135deg,var(--seed-panel) 0%,var(--primary-softer) 100%)}
.logo-demo{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.logo-mark{display:flex;line-height:1}
.logo-mark img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--seed-primary) 35%,transparent))}
.logo-text{font-size:var(--text-2xl);font-weight:var(--fw-bold);color:var(--seed-fg);letter-spacing:.05em}
.logo-accent{color:var(--seed-accent)}
.logo-sub{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-faint)}
.ip-meta{padding:var(--sp-4)}
.ip-meta h3{font-size:var(--text-lg);margin-bottom:4px}
.ip-meta p{font-size:var(--text-sm);color:var(--fg-muted)}
.why-card p{font-size:var(--text-sm);color:var(--fg-muted);line-height:1.7}
.why-card p em{color:var(--seed-accent);font-style:normal;font-weight:var(--fw-bold)}
.ico--accent{color:var(--seed-accent)!important}
.stats-row--tight{margin-top:var(--sp-4)}
.about-hero-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.about-hero-head h1{font-size:var(--text-2xl)}
.about-hero-head .tagline{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--seed-primary);letter-spacing:.08em}
.about-intro{font-size:var(--text-lg);color:var(--fg-muted);max-width:46em}
.about-intro strong{color:var(--seed-fg)}
.about-intro em{color:var(--seed-accent);font-style:normal;font-weight:var(--fw-bold)}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin:var(--sp-5) 0}
.stat{padding:var(--sp-4);text-align:center}
.stat b{display:block;font-size:var(--text-2xl);font-family:var(--font-mono);color:var(--seed-primary)}
.stat span{font-size:var(--text-xs);color:var(--seed-accent);margin-top:6px;display:block;font-family:var(--font-mono);letter-spacing:.5px}
.stat--link{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;transition:border-color .15s ease-out,transform .15s ease-out}
.stat--link:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.doing-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-6)}
.doing-list li{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-m);background:var(--seed-panel)}
.doing-list .dt{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--seed-accent)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.why-card{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);transition:border-color .15s ease-out,transform .15s ease-out}
.why-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.why-head{display:flex;align-items:center;gap:var(--sp-3)}
.why-ico{width:36px;height:36px;border-radius:var(--radius-m);display:flex;align-items:center;justify-content:center;font-size:var(--text-base);color:var(--seed-primary);background:var(--primary-soft);border:1px solid var(--border);flex-shrink:0}
.why-card h3{font-size:var(--text-base);font-weight:var(--fw-bold)}
.why-card p{font-size:var(--text-sm);color:var(--fg-muted);line-height:1.7}
.brand-asset{margin:var(--sp-6) 0;padding:var(--sp-6);display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);background:var(--plate-bg);border-radius:var(--radius-l)}
.brand-asset img{height:56px;width:auto;min-height:0}
.brand-asset span{font-size:var(--text-xs);color:var(--plate-fg);font-family:var(--font-mono)}
.platform-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-4)}
.platform-card{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);align-items:stretch;transition:border-color .15s ease-out,transform .15s ease-out}
.platform-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.platform-card .pc-head{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.platform-card .pc-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.platform-logo{width:64px;height:64px;border-radius:var(--radius-m);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--text-xl);background:var(--primary-soft);color:var(--seed-primary);border:1px solid var(--border);min-height:0;flex-shrink:0;object-fit:contain;padding:8px}
.platform-card h3{font-size:var(--text-base);font-weight:var(--fw-bold)}
.platform-card .handle{font-size:var(--text-sm);color:var(--fg-muted);font-family:var(--font-mono);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.platform-card .btn{width:100%;justify-content:center;margin-top:auto}

/* ============ 屏7 404 ============ */
.error-page{min-height:66vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sp-8) var(--sp-4);position:relative;overflow:hidden}
.error-code{font-family:var(--font-mono);font-size:clamp(80px,18vw,168px);font-weight:var(--fw-bold);line-height:1;color:transparent;-webkit-text-stroke:1px var(--border-strong);letter-spacing:.06em}
.error-page h1{font-size:var(--text-xl);margin:var(--sp-4) 0 var(--sp-2)}
.error-page p{color:var(--fg-muted);max-width:34em;margin-bottom:var(--sp-5)}
.error-links{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-5);max-width:46em}
.error-links .tag{white-space:normal}

/* ============ 屏9 研报 ============ */
.report-feature{display:grid;grid-template-columns:220px 1fr;gap:var(--sp-6);padding:var(--sp-6);margin-bottom:var(--sp-6)}
.rf-no{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-2);border-right:1px dashed var(--border-soft);padding-right:var(--sp-5)}
.rf-no b{font-family:var(--font-mono);font-size:var(--text-xl);color:var(--seed-primary);text-shadow:var(--glow)}
.rf-no span{font-size:var(--text-xs);color:var(--fg-faint);font-family:var(--font-mono)}
.rf-body h3{font-size:var(--text-xl);line-height:1.35;margin-bottom:var(--sp-2)}
.rf-body h3 a{color:var(--seed-fg)}
.rf-body h3 a:hover{color:var(--seed-primary);text-decoration:none}
.rf-points{list-style:none;display:flex;flex-direction:column;gap:6px;margin:var(--sp-3) 0 var(--sp-4);font-size:var(--text-sm);color:var(--fg-muted)}
.rf-points li{display:flex;gap:var(--sp-2);align-items:flex-start}
.rf-points li::before{content:"▹";color:var(--seed-accent)}
.report-item{display:grid;grid-template-columns:132px 1fr auto;gap:var(--sp-4);align-items:center;padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-3)}
.report-item .ri-no{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--seed-accent)}
.report-item .ri-no small{display:block;font-size:var(--text-xs);color:var(--fg-faint);margin-top:2px}
.report-item h3{font-size:var(--text-base);line-height:1.45;margin-bottom:var(--sp-1)}
.report-item h3 a{color:var(--seed-fg)}
.report-item h3 a:hover{color:var(--seed-primary);text-decoration:none}
.report-topics{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}

/* ============ 页脚 ============ */
.site-footer{border-top:1px solid var(--border);background:var(--seed-surface);margin-top:var(--sp-7)}
.footer-cols{max-width:var(--container);margin:0 auto;padding:var(--sp-8) var(--sp-4) var(--sp-6);display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-6)}
.footer-brand .brand-name{font-size:var(--text-lg)}
.footer-tag{color:var(--fg-muted);font-size:var(--text-sm);margin-top:var(--sp-3);max-width:26em}
.footer-col h4{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--fg-faint);font-family:var(--font-mono);margin-bottom:var(--sp-3)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-col a{color:var(--fg-muted);font-size:var(--text-sm)}
.footer-col a:hover{color:var(--seed-primary);text-decoration:none}
.footer-bottom{max-width:var(--container);margin:0 auto;padding:var(--sp-4);border-top:1px solid var(--border-soft);display:flex;gap:var(--sp-4);align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer-meta{font-size:var(--text-xs);color:var(--fg-faint);font-family:var(--font-mono);display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center}
.footer-meta a{color:var(--fg-faint)}
.footer-meta a:hover{color:var(--seed-primary)}

/* 回到顶部(默认 hidden,JS 滚动 >400px 显示) */
.back-top{position:fixed;right:22px;bottom:22px;width:42px;height:42px;border-radius:50%;background:var(--seed-panel);border:1px solid var(--border-strong);color:var(--seed-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--glow);z-index:60;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s;font-size:var(--text-base)}
.back-top.is-show{opacity:1;transform:none;pointer-events:auto}

/* ============ 响应式(PRD §2.0 三档) ============ */
/* 640~1023px:版心 92%;导航横排可换行;网格降列(非单列) */
@media (max-width:1023px){
  .container{max-width:92%}
  .nav-inner{flex-wrap:wrap}
  .nav-links{flex-wrap:wrap;row-gap:var(--sp-1)}
  .hero-inner{grid-template-columns:1fr;padding:var(--sp-8) var(--sp-4) var(--sp-7)}
  .hero-figure{max-width:520px}
  .hero h1{font-size:var(--text-3xl)}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .platform-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;top:auto;margin:var(--sp-5) 0}
  .toc ol{flex-direction:row;flex-wrap:wrap}
  .footer-cols{grid-template-columns:1fr 1fr}
  .about-band{grid-template-columns:auto 1fr}
  .report-feature{grid-template-columns:1fr;gap:var(--sp-4)}
  .rf-no{border-right:0;border-bottom:1px dashed var(--border-soft);padding:0 0 var(--sp-3)}
  .report-item{grid-template-columns:1fr}
}

/* <640px:汉堡菜单;无 JS 时导航纵向平铺直出(爬虫可读);全部网格单列;搜索框全宽 */
@media (max-width:639px){
  .about-hero{grid-template-columns:1fr;gap:var(--sp-5)}
  .about-avatar{width:160px;height:160px}
  .stack-panel{grid-template-columns:1fr}
  .doing-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .ip-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .nav-inner{flex-wrap:wrap}
  /* 无 JS:汉堡隐藏,导航纵向平铺直出 */
  .nav-burger{display:none}
  .site-nav nav{width:100%}
  .nav-links{position:static;flex-direction:column;align-items:stretch;width:100%;margin:0;padding:var(--sp-3) 0 0;gap:0;border-top:1px solid var(--border-soft)}
  .nav-links a{display:block;padding:10px var(--sp-3);border-bottom:1px solid var(--border-soft)}
  .nav-links a.is-current{background:var(--primary-softer)}
  .nav-links a.is-current::after{left:0;right:auto;top:9px;bottom:9px;width:3px;height:auto}
  .nav-sub{position:static;display:block;box-shadow:none;border:0;background:transparent;padding-left:var(--sp-4)}
  .search-box{width:100%;min-width:0}
  /* 有 JS(html.js):汉堡出现,导航默认收起,点汉堡展开 */
  html.js .nav-burger{display:block}
  html.js .site-nav:not(.is-open) .nav-links{display:none}
  html.js .site-nav.is-open .nav-links{display:flex}

  .section{padding:var(--sp-6) 0}
  .hero-inner{padding:var(--sp-7) var(--sp-4) var(--sp-6)}
  .hero h1{font-size:var(--text-2xl)}
  .hero-figure{max-width:100%}
  .hero-figure img{aspect-ratio:16/10}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
  .post-item{grid-template-columns:1fr}
  .post-thumb{aspect-ratio:16/9}
  .proj-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .platform-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;top:auto;margin:var(--sp-5) 0}
  .toc ol{flex-direction:row;flex-wrap:wrap}
  .post-nav{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .about-hero{grid-template-columns:1fr}
  .about-band{grid-template-columns:1fr}
  .doing-list{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
  .prose{font-size:16px}
  .list-toolbar{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .report-feature{grid-template-columns:1fr;gap:var(--sp-4)}
  .rf-no{border-right:0;border-bottom:1px dashed var(--border-soft);padding:0 0 var(--sp-3)}
  .report-item{grid-template-columns:1fr}
}

/* 无障碍:prefers-reduced-motion 全停动画 */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}