/* ============================================================
   DunOS Toolbox 使用手册 · 样式
   风格基准：dunos.vip/home —— 暗夜实验室仪器 · 纯黑白灰单色
   ============================================================ */

/* 字体自托管（latin 子集 variable woff2）：无 Google Fonts 外链，首屏不被第三方 CSS 阻塞 */
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;src:url("assets/fonts/sora-latin.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("assets/fonts/jbmono-latin.woff2") format("woff2")}

:root{
  --bg:        #050507;
  --panel:     #090909;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --line-3:    rgba(255,255,255,.24);
  --t1:        #f2f2f5;
  --t2:        #9a9aa3;
  --t3:        #5c5c66;
  --t4:        #3d3d44;
  --warn:      #ffb86b;   /* 仅真正的警示文本 */
  --err:       #ff6b6b;   /* 仅真正的错误文本 */
  --font:      "Sora","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:      "JetBrains Mono","PingFang SC","Microsoft YaHei",monospace;
  --radius:    16px;
  --radius-sm: 10px;
  --side-w:    264px;
  --ease:      cubic-bezier(.16,1,.3,1);
  accent-color:#888;      /* 浏览器默认控件（checkbox/radio/switch）禁蓝 */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

::selection{ background:rgba(255,255,255,.85); color:#050507; }

body{
  background:var(--bg);
  color:var(--t1);
  font:300 15px/1.75 var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* 焦点可见性：白光描边系，永不出蓝 */
:focus:not(:focus-visible){ outline:none; }
:focus-visible{ outline:1px solid rgba(255,255,255,.4); outline-offset:2px; border-radius:4px; }

/* autofill 黄/蓝底清零 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #090909 inset;
  -webkit-text-fill-color:var(--t1);
  caret-color:var(--t1);
  transition:background-color 99999s ease-in-out 0s;
}
input{ caret-color:var(--t1); }

/* 细暗滚动条 */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border-radius:5px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.26); }

/* ============================================================
   背景层：WebGL 丝网（bg.js）→ 蓝图网格 → 胶片噪点 → 星尘
   纯单色，零彩色装饰
   ============================================================ */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#graph{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#dust{ position:absolute; inset:0; width:100%; height:100%; }

/* 蓝图网格：56px，静止，向四周淡出（官网内容区同款肌理） */
.bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 120% 90% at 50% 28%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 28%, #000 30%, transparent 78%);
}

/* 胶片噪点：feTurbulence + steps(10) 跳动（官网 .grain 同款参数） */
.bg-noise{
  position:absolute; inset:-50%; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noiseJitter 8s steps(10) infinite;
  will-change:transform;
}
@keyframes noiseJitter{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,-6%)}20%{transform:translate(-8%,3%)}
  30%{transform:translate(5%,-8%)}40%{transform:translate(-3%,8%)}50%{transform:translate(-8%,3%)}
  60%{transform:translate(6%,0)}70%{transform:translate(0,6%)}80%{transform:translate(-6%,0)}90%{transform:translate(8%,3%)}
}

/* 跟随鼠标的光晕：520px 径向白 5%（官网 #glow） */
.cursor-glow{
  position:fixed; left:0; top:0; width:520px; height:520px;
  margin:-260px 0 0 -260px; border-radius:50%; z-index:1;
  background:radial-gradient(circle, rgba(255,255,255,.05), transparent 62%);
  pointer-events:none; opacity:0;
  transform:translate3d(var(--gx,-9999px), var(--gy,-9999px), 0);
  transition:opacity .5s var(--ease);
  will-change:transform;
}
.cursor-glow.on{ opacity:1; }
@media (hover:none){ .cursor-glow{ display:none; } }

/* 页面切到后台时暂停无限循环动画 */
.page-hidden .bg-noise{ animation-play-state:paused; }

/* 减少动态：只停无限循环，一次性入场保留 */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .bg-noise{ animation:none; }
  .cursor-glow{ display:none; }
}

.app{ position:relative; z-index:1; display:flex; min-height:100vh; }

.ico{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* eyebrow 铭文里的中文补丁：CJK 字形自带全宽留白，.42em 会拆散词 */
.cn{ letter-spacing:.06em; padding-left:.34em; }

/* ============================================================
   侧边栏
   ============================================================ */
.side{
  width:var(--side-w); flex:none;
  position:fixed; top:0; left:0; bottom:0; z-index:40;
  background:rgba(5,5,7,.72);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column;
  padding:26px 14px 18px;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .side{
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
}

.side-head{ padding:0 8px 24px; }
/* 品牌：对齐官网 .brand（26px 图标 + mono 500 12px ls .34em 字标） */
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--t1); }
.logo-mark{ width:26px; height:26px; border-radius:6px; flex:none; display:block; }
.logo-txt{ font:500 12px/1 var(--mono); letter-spacing:.34em; text-transform:uppercase; }
.logo-txt em{ font-style:normal; color:var(--t3); font-weight:300; margin-left:8px; }
.logo-sub{
  font:400 10px/1 var(--mono); color:var(--t4);
  letter-spacing:.28em; margin-top:11px;
}

.side-search{
  position:relative; display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:0 10px; height:38px;
  margin-bottom:18px; transition:border-color .22s var(--ease), background .22s var(--ease);
}
.side-search:focus-within{ border-color:rgba(255,255,255,.28); background:#0d0d0f; }
.side-search .ico{ color:var(--t3); width:15px; height:15px; }
.side-search input{
  flex:1; background:none; border:none; outline:none;
  color:var(--t1); font:300 13px/1 var(--font); min-width:0;
}
.side-search input::placeholder{ color:var(--t4); }
.s-clear{
  display:none; background:none; border:none; color:var(--t3);
  font-size:17px; line-height:1; cursor:pointer; padding:0 2px;
}
.s-clear:hover{ color:var(--t1); }
.side-search.has-val .s-clear{ display:block; }

.side-nav{ flex:1; overflow-y:auto; padding-right:2px; }
.side-nav::-webkit-scrollbar{ width:4px; }
.side-nav::-webkit-scrollbar-track{ background:transparent; }
.side-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border:none; }

.nav-item{
  position:relative;
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; margin-bottom:2px;
  border-radius:9px; cursor:pointer;
  color:var(--t2); font:400 12.5px/1.5 var(--mono); letter-spacing:.04em;
  border:1px solid transparent;
  transition:color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  text-decoration:none;
}
.nav-item:hover{ background:rgba(255,255,255,.03); color:var(--t1); }
.nav-item.on{ color:var(--t1); background:rgba(255,255,255,.045); border-color:var(--line); }
.nav-item.on .ico{ color:var(--t1); }
/* 当前项前置发光圆点（官网 rail 当前态同款） */
.nav-item.on::before{
  content:''; position:absolute; left:1px; top:50%; margin-top:-2.5px;
  width:5px; height:5px; border-radius:50%;
  background:var(--t1); box-shadow:0 0 8px rgba(255,255,255,.7);
}
.nav-item .ico{ width:16px; height:16px; color:var(--t3); transition:color .18s var(--ease); }
.nav-item:hover .ico{ color:var(--t2); }
.nav-item .nv-t{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.nav-sub{ margin:2px 0 8px 15px; padding-left:12px; border-left:1px solid var(--line); display:none; }
.nav-group.open .nav-sub{ display:block; }
.nav-sub a{
  position:relative;
  display:block; padding:5px 10px; font:400 12px/1.6 var(--mono);
  color:var(--t3); text-decoration:none; border-radius:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .15s var(--ease), background .15s var(--ease);
}
/* 官网 nav-links 同款下划线：scaleX(0→1) */
.nav-sub a::after{
  content:''; position:absolute; left:10px; right:10px; bottom:3px; height:1px;
  background:rgba(255,255,255,.6); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-sub a:hover{ color:var(--t1); }
.nav-sub a:hover::after{ transform:scaleX(1); }
.nav-sub a.on{ color:var(--t1); background:rgba(255,255,255,.05); }

.nav-sub-3{ margin-left:8px; border-left:1px solid rgba(255,255,255,.05); }
.nav-sub-3 a{ font-size:11px; padding:4px 8px; color:var(--t4); }
.nav-sub-3 a:hover{ color:var(--t2); }
.nav-sub-3 a.on{ color:var(--t2); background:rgba(255,255,255,.04); }

.side-foot{ padding:16px 8px 0; border-top:1px solid var(--line); margin-top:10px; }
.side-foot a{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  color:var(--t3); font:400 11px/1.6 var(--mono); letter-spacing:.08em;
  text-decoration:none; transition:color .18s var(--ease);
}
.side-foot a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:rgba(255,255,255,.6); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.side-foot a:hover{ color:var(--t1); }
.side-foot a:hover::after{ transform:scaleX(1); }
.side-foot .ico{ width:14px; height:14px; }
.foot-q{ font:400 11px/1.6 var(--mono); color:var(--t4); margin-top:9px; letter-spacing:.06em; }

/* ============================================================
   主区域
   ============================================================ */
.main{ flex:1; min-width:0; margin-left:var(--side-w); min-height:100vh; position:relative; }
.progress{
  position:fixed; top:0; left:var(--side-w); right:0; height:2px;
  background:linear-gradient(90deg, var(--t1), rgba(255,255,255,.2));
  transform:scaleX(0); transform-origin:0 50%;
  z-index:50; transition:transform .1s linear;
}
.view{ padding:64px 64px 130px; max-width:1180px; min-width:0; }

@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.rise{ animation:rise .9s var(--ease) both; }
.rise-1{ animation-delay:.05s } .rise-2{ animation-delay:.11s }
.rise-3{ animation-delay:.17s } .rise-4{ animation-delay:.23s }

/* ---------- 主页 Hero ---------- */
.hero{ margin-bottom:56px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:400 11px/1 var(--mono); letter-spacing:.42em; text-transform:uppercase;
  color:var(--t3); margin-bottom:22px;
}
.hero-eyebrow::before{ content:''; width:26px; height:1px; background:var(--line-3); }
.hero h1{
  font:200 clamp(30px, 4vw, 52px)/1.28 var(--font); letter-spacing:.03em; margin-bottom:20px;
}
.hero h1 .thin{ color:var(--t3); font-weight:200; }
.hero p{ color:var(--t2); font-size:15px; max-width:700px; }
.hero p b, .hero b{ font-weight:400; color:var(--t1); }

/* 首页大数字指标：官网 .mrow 款——Sora 200 30px 数字 + mono 右侧标注，行底发丝线，hover 发光 */
.hero-meta{ margin-top:36px; border-top:1px solid var(--line); max-width:700px; }
.hm{
  display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:18px;
  padding:20px 4px; border-bottom:1px solid var(--line);
  transition:background .3s;
}
.hm:hover{ background:rgba(255,255,255,.025); }
.hm b{
  font:200 30px/1 var(--font); letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  transition:text-shadow .3s;
}
.hm:hover b{ text-shadow:0 0 24px rgba(255,255,255,.28); }
.hm span{
  font:400 11px/1.6 var(--mono); color:var(--t3);
  letter-spacing:.14em; text-transform:uppercase; text-align:right;
}

/* 首页搜索入口 */
.hero-search{
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:560px; margin-top:36px;
  padding:15px 18px;
  background:var(--panel); border:1px solid var(--line-2);
  border-radius:12px; cursor:text;
  color:var(--t3); font:300 13.5px/1.5 var(--font);
  text-align:left; transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.hero-search:hover{ border-color:rgba(255,255,255,.28); background:#0d0d0f; color:var(--t2); }
.hero-search .ico{ width:16px; height:16px; flex:none; }
.hero-search span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-search kbd{
  font:400 11px/1 var(--mono); color:var(--t3); flex:none;
  border:1px solid var(--line-2); border-radius:5px; padding:3px 7px; background:rgba(255,255,255,.03);
}

/* 首页底部入口：描边次按钮 + 115° 扫光 */
.home-foot{ margin-top:56px; text-align:center; }
.home-foot a{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px;
  font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--t1); text-decoration:none;
  padding:12px 22px; border:1px solid rgba(255,255,255,.2); border-radius:8px;
  transition:border-color .3s var(--ease), background .3s var(--ease), gap .25s var(--ease);
  cursor:pointer; background:transparent;
}
.home-foot a::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.13) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .6s ease;
}
.home-foot a:hover{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); gap:12px; }
.home-foot a:hover::before{ transform:translateX(130%); }
.home-foot .ico{ width:14px; height:14px; }

/* 新手横幅：.lift 同款底 + 官网签名四角瞄准框；无图标盒，排版撑场 */
.banner-row{
  display:grid; gap:14px; margin-bottom:48px;
  grid-template-columns:1fr 1fr;
}
.banner-row .start-banner{ margin-bottom:0; }
.start-banner{
  --bc:rgba(255,255,255,.28);
  display:flex; align-items:center; gap:20px;
  background:#090909;
  border:1px solid var(--line); border-radius:12px;
  padding:20px 24px; margin-bottom:40px; cursor:pointer;
  transition:border-color .3s var(--ease), transform .5s var(--ease);
  text-decoration:none; color:inherit;
  position:relative; overflow:hidden;
}
/* 四角瞄准框（八条 12px 短线拼四角括弧，官网 .auth/.slot 签名元素） */
.start-banner::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(to right,  var(--bc) 12px, transparent 12px) 0 0/100% 1px,
    linear-gradient(to bottom, var(--bc) 12px, transparent 12px) 0 0/1px 100%,
    linear-gradient(to left,   var(--bc) 12px, transparent 12px) 100% 0/100% 1px,
    linear-gradient(to bottom, var(--bc) 12px, transparent 12px) 100% 0/1px 100%,
    linear-gradient(to right,  var(--bc) 12px, transparent 12px) 0 100%/100% 1px,
    linear-gradient(to bottom, var(--bc) 12px, transparent 12px) 0 100%/1px 100%,
    linear-gradient(to left,   var(--bc) 12px, transparent 12px) 100% 100%/100% 1px,
    linear-gradient(to bottom, var(--bc) 12px, transparent 12px) 100% 100%/1px 100%;
  background-repeat:no-repeat;
  opacity:.5; transition:opacity .3s;
}
/* 顶部高光（.lift::before 同款） */
.start-banner::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.09), transparent 12%);
}
.start-banner:hover{
  --bc:rgba(255,255,255,.5);
  border-color:rgba(255,255,255,.22); transform:translateY(-2px);
}
.start-banner.alt{ background:#070707; }
/* 标题旁裸细线图标（无盒） */
.sb-ic{ width:17px; height:17px; stroke-width:1.5; color:var(--t2); margin-right:9px; vertical-align:-3px; transition:color .25s var(--ease); }
.start-banner:hover .sb-ic{ color:var(--t1); }
.sb-b{ flex:1; min-width:0; display:block; position:relative; z-index:1; }
.sb-t{ display:block; font:400 15.5px/1.4 var(--font); margin-bottom:5px; }
.sb-d{ display:block; font-size:13px; color:var(--t2); line-height:1.65; }
.sb-go{
  display:flex; align-items:center; gap:6px; position:relative; z-index:1;
  font:400 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3); flex:none; transition:all .25s var(--ease);
}
.start-banner:hover .sb-go{ color:var(--t1); gap:10px; }

/* ---------- 目录卡片 ---------- */
.sec-title{
  display:flex; align-items:center; gap:12px;
  font:400 11px/1 var(--mono); color:var(--t3);
  letter-spacing:.42em; text-transform:uppercase; margin:0 0 22px;
}
.sec-title::after{ content:''; flex:1; height:1px; background:var(--line); }

.grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }

.card{
  position:relative; overflow:hidden;
  background:#090909;
  border:1px solid var(--line);
  border-radius:12px; padding:24px 24px 20px;
  box-shadow:0 30px 70px rgba(0,0,0,.62), 0 4px 14px rgba(0,0,0,.5);
  cursor:pointer; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:12px;
  transition:transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease);
}
/* 顶部高光（.lift::before 同款） */
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background:linear-gradient(180deg, rgba(255,255,255,.09), transparent 12%);
  pointer-events:none;
}
/* hover 渐变描边（单色） */
.card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(255,255,255,.32), transparent 42%, transparent 58%, rgba(255,255,255,.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none; z-index:2;
}
.card:hover{
  border-color:rgba(255,255,255,.22);
  transform:translateY(-4px);
  box-shadow:0 46px 96px rgba(0,0,0,.72), 0 6px 18px rgba(0,0,0,.5);
}
.card:hover::after{ opacity:1; }
.card > *{ position:relative; z-index:1; }

.card-hd{ display:flex; align-items:baseline; gap:14px; position:relative; }
/* 标题旁裸细线图标（无盒），编号用 mono 铭文压右（官网 .wcol 纯排版款） */
.card-ic{ width:18px; height:18px; stroke-width:1.5; color:var(--t2); margin-right:9px; vertical-align:-3px; transition:color .3s var(--ease); }
.card:hover .card-ic{ color:var(--t1); }
.card-title{ flex:1; min-width:0; font:400 16px/1.4 var(--font); letter-spacing:.03em; }
.card-no{
  font:400 10px/1 var(--mono); letter-spacing:.2em; color:var(--t4);
  flex:none; margin-right:32px; font-variant-numeric:tabular-nums;
}
.card-brief{ font-size:13px; color:var(--t2); line-height:1.7; position:relative; }
.card-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:13px; border-top:1px solid rgba(255,255,255,.06); position:relative;
}
/* 徽章：mono 铭文小签，发丝边、微圆角，不圆润 */
.tag{
  font:400 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3); background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:4px; padding:4px 10px;
}
.card-go{
  display:flex; align-items:center; gap:5px;
  font:400 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--t3); transition:all .25s var(--ease);
}
.card:hover .card-go{ color:var(--t1); gap:9px; }
.card-go .ico{ width:14px; height:14px; }

.star{
  position:absolute; top:18px; right:18px;
  width:26px; height:26px; border-radius:7px;
  display:grid; place-items:center; cursor:pointer;
  color:var(--t3); background:transparent; border:none;
  opacity:0; transition:all .2s var(--ease); z-index:3;
}
.card:hover .star{ opacity:1; }
.star:hover{ background:rgba(255,255,255,.06); color:var(--t1); }
.star.on{ opacity:1; color:var(--t1); }
.star.on .ico{ fill:var(--t1); stroke:var(--t1); }

/* 子项入口 */
.entry-list{ display:grid; gap:10px; }
.entry{
  display:flex; align-items:center; gap:14px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:15px 18px;
  text-decoration:none; color:inherit;
  transition:border-color .24s var(--ease), background .24s var(--ease), transform .24s var(--ease);
}
.entry:hover{ background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.22); transform:translateX(4px); }
.entry-b{ flex:1; min-width:0; }
.entry-t{ font-size:14px; font-weight:400; margin-bottom:2px; display:block; }
.entry-d{ font-size:12.5px; color:var(--t2); display:block; }
.entry .ico{ color:var(--t3); width:16px; height:16px; transition:color .2s var(--ease); }
.entry:hover .ico{ color:var(--t1); }

/* ============================================================
   详情页
   ============================================================ */
/* 返回：描边次按钮（官网 #unlockBtn 款）+ 115° 扫光 */
.crumb{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px;
  font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--t1); text-decoration:none;
  padding:11px 18px; border-radius:8px;
  border:1px solid rgba(255,255,255,.2); background:transparent;
  margin-bottom:36px; cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.crumb::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.13) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .6s ease;
}
.crumb:hover{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); }
.crumb:hover::before{ transform:translateX(130%); }
.crumb .ico{ width:14px; height:14px; }

.detail-head{ margin-bottom:44px; padding-bottom:36px; border-bottom:1px solid var(--line); }
.dh-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
/* 详情页标题旁裸细线图标（无盒） */
.dh-ic{ width:28px; height:28px; stroke-width:1.4; color:var(--t2); flex:none; }
.detail-head h1{ font:200 clamp(26px, 3.4vw, 40px)/1.28 var(--font); letter-spacing:.03em; }
.detail-head .lead{ font-size:15px; color:var(--t2); margin-top:16px; max-width:800px; }
.detail-head .lead b{ font-weight:400; color:var(--t1); }
.detail-head .tag{ margin-top:18px; display:inline-block; }

.sec{ margin-bottom:52px; scroll-margin-top:24px; }
/* 首屏以下的小节跳过渲染与绘制（content-visibility 推荐用法） */
.sec.defer{ content-visibility:auto; contain-intrinsic-size:auto 620px; }
/* 英文代号铭文（官网 SYS.TUNING // PRE-FACTORY 写法） */
.dh-code{
  font:400 11px/1 var(--mono); letter-spacing:.42em; text-transform:uppercase;
  color:var(--t3); margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
.dh-code::before{ content:'// '; color:var(--t4); }

.sec-h{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.sec-h h2{ font:200 24px/1.3 var(--font); letter-spacing:.04em; white-space:nowrap; }
.sec-h .bar{
  width:3px; height:16px; border-radius:2px; flex:none;
  background:linear-gradient(180deg, var(--t1), var(--t4));
}
.sec-h .line{ flex:1; height:1px; background:var(--line); }
.sec-h .anchor{
  opacity:0; font:400 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3); cursor:pointer;
  background:none; border:none; padding:4px 8px;
  border-radius:5px; transition:all .18s var(--ease);
}
.sec-h:hover .anchor{ opacity:1; }
.sec-h .anchor:hover{ background:rgba(255,255,255,.06); color:var(--t1); }

.sec-intro{
  color:var(--t2); font-size:13.5px; margin-bottom:18px;
  padding-left:15px; border-left:1px solid var(--line-3);
}

.items{ display:grid; gap:9px; }
.item{
  position:relative; display:flex; gap:14px; align-items:flex-start;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px; padding:15px 18px 15px 20px;
  transition:border-color .24s var(--ease), background .24s var(--ease), transform .24s var(--ease);
}
/* 左侧强调线：hover 时点亮（官网 .tlist li::before 同款） */
.item::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:2px;
  border-radius:0 2px 2px 0; background:rgba(255,255,255,.8);
  opacity:0; transform:scaleY(.4); transform-origin:50% 0;
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.item:hover{
  background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.22);
  transform:translateX(2px);
}
.item:hover::before{ opacity:.8; transform:scaleY(1); }

/* 类型徽章：全黑白灰，仅实心白（btn）与描边两档 */
.it-badge{
  flex:none; min-width:74px; text-align:center;
  font:400 10px/1 var(--mono); letter-spacing:.14em;
  border-radius:6px; padding:5px 8px; margin-top:2px;
  border:1px solid var(--line-2); color:var(--t2);
  background:rgba(255,255,255,.03); white-space:nowrap;
}
.it-badge.btn{ background:var(--t1); color:#050507; border-color:var(--t1); font-weight:500; }
.it-badge.switch,
.it-badge.slider,
.it-badge.dialog,
.it-badge.link{ background:rgba(255,255,255,.045); color:var(--t2); border-color:var(--line-2); }
.it-badge.dot{ background:transparent; color:var(--t3); border-color:var(--line); }

.it-k{ font-size:14px; font-weight:400; margin-bottom:4px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; overflow-wrap:anywhere; }
/* 跳转芯片：描边次按钮，hover 反白 */
.it-k .kclick{
  font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--t2);
  border:1px solid rgba(255,255,255,.2); background:transparent;
  border-radius:8px; padding:6px 12px; cursor:pointer;
  transition:all .25s var(--ease);
}
.it-k .kclick:hover{ color:#050507; background:var(--t1); border-color:var(--t1); }
/* overflow-wrap 用于兜住硬件 ID、注册表路径这类无空格长串 */
.it-v{ font-size:13.5px; color:var(--t2); line-height:1.8; overflow-wrap:anywhere; }
.it-v b{ color:var(--t1); font-weight:400; }

/* ---------- 气泡按钮（条目 tone: 'cta'）：整块可点，右侧自带白色按钮 ---------- */
.cta{
  display:flex; align-items:center; gap:20px;
  background:linear-gradient(90deg, rgba(255,255,255,.075), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px; padding:22px 24px;
  text-decoration:none; color:inherit;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.cta:hover{
  border-color:rgba(255,255,255,.5); transform:translateY(-2px);
  background:linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
}
.cta-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.cta-k{ font-size:17px; letter-spacing:.02em; }
.cta-v{ font-size:13px; color:var(--t2); line-height:1.75; }
.cta-go{
  flex:none; display:inline-flex; align-items:center; gap:9px;
  font:500 12px/1 var(--mono); letter-spacing:.16em;
  color:#050507; background:var(--t1);
  border-radius:10px; padding:13px 18px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:gap .25s var(--ease);
}
.cta-go .ico{ width:15px; height:15px; }
.cta:hover .cta-go{ gap:13px; }
@media (max-width:640px){
  .cta{ flex-direction:column; align-items:stretch; gap:14px; }
  .cta-go{ justify-content:center; }
}

/* 步骤 */
.steps{ display:grid; gap:0; counter-reset:s; }
.step{ display:flex; gap:15px; padding:13px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step-n{
  counter-increment:s; flex:none;
  width:25px; height:25px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--panel);
  display:grid; place-items:center;
  font:400 11px/1 var(--mono); color:var(--t2);
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.step-n::before{ content:counter(s); }
.step-t{ font-size:13.5px; color:var(--t2); line-height:1.8; }

/* 提示条 */
.notes{ display:grid; gap:9px; margin-top:16px; }
.note{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--line);
  border-left:2px solid var(--line-3);
  border-radius:8px; padding:13px 16px;
  font-size:13px; color:var(--t2); line-height:1.75;
  overflow-wrap:anywhere;
}
.note .ico{ width:15px; height:15px; margin-top:4px; color:var(--t3); flex:none; }

.tips{ margin-top:24px; display:grid; gap:9px; }
.tip{
  display:flex; gap:11px; align-items:flex-start;
  background:linear-gradient(90deg, rgba(255,255,255,.03), transparent);
  border:1px solid var(--line); border-radius:11px;
  padding:14px 17px; font-size:13px; color:var(--t2); line-height:1.75;
}
.tip .ico{ width:15px; height:15px; margin-top:4px; color:var(--t3); flex:none; }
/* 语义色仅保留两档警示色，且只用于真正的警示文本 */
.note.warn{ border-left-color:rgba(255,182,107,.5); }
.note.warn .ico{ color:var(--warn); }
.note.err{ border-left-color:rgba(255,107,107,.5); }
.note.err .ico{ color:var(--err); }

/* ---------- 指标条：官网 .mrow 款（Sora 200 大数字 + mono 右标注 + 发丝线） ---------- */
.metrics{
  margin:20px 0 4px; border-top:1px solid var(--line);
}
.detail-head .metrics{ margin-top:26px; }
.metric{
  display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:18px;
  padding:18px 4px; border-bottom:1px solid var(--line);
  transition:background .3s;
}
.metric:hover{ background:rgba(255,255,255,.025); }
.metric b{
  font:200 30px/1 var(--font); letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--t1);
  transition:text-shadow .3s;
}
.metric:hover b{ text-shadow:0 0 24px rgba(255,255,255,.28); }
.metric span{
  font:400 11px/1.6 var(--mono); color:var(--t3);
  letter-spacing:.14em; text-transform:uppercase; text-align:right;
}

/* ---------- 对比表格：键列 mono 11px ls .14em uppercase --t3 ---------- */
.cmp-wrap{ margin:16px 0; border:1px solid var(--line); border-radius:12px; overflow-x:auto; background:var(--panel); }
.cmp{ min-width:520px; }
.cmp{ width:100%; border-collapse:collapse; font-size:13px; }
.cmp th,.cmp td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.cmp thead th{
  background:rgba(255,255,255,.025);
  font:400 10px/1.6 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--t3);
}
.cmp thead th.hi{ color:var(--t1); }
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:none; }
.cmp tbody th.k{
  font:400 11px/1.7 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3); background:rgba(255,255,255,.015); width:120px; white-space:nowrap;
}
.cmp td{ color:var(--t2); }
.cmp td.hi{ color:var(--t1); background:rgba(255,255,255,.03); }
.cmp tbody tr:hover th.k{ background:rgba(255,255,255,.03); }
.cmp tbody tr:hover td{ background:rgba(255,255,255,.025); }
.cmp tbody tr:hover td.hi{ background:rgba(255,255,255,.05); }

/* ---------- 截图（.lift 款卡 · 统一比例 · 点击放大） ---------- */
.shots, .shots.two{
  display:grid; gap:12px; margin:18px 0 6px;
  grid-template-columns:repeat(auto-fill, minmax(296px, 1fr));
  max-width:1040px;
}
@media (max-width:900px){
  .shots, .shots.two{ grid-template-columns:1fr; max-width:100%; }
}
.shot{
  position:relative; min-width:0;
  background:#090909; border:1px solid var(--line);
  border-radius:12px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.62), 0 4px 14px rgba(0,0,0,.5);
  transition:border-color .3s, box-shadow .5s var(--ease), transform .5s var(--ease);
}
/* 截图卡顶部高光（.lift::before 同款，mix-blend screen） */
.shot::before{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.09), transparent 12%);
  mix-blend-mode:screen; pointer-events:none;
}
.shot:hover{
  border-color:rgba(255,255,255,.22); transform:translateY(-2px);
  box-shadow:0 46px 96px rgba(0,0,0,.72), 0 6px 18px rgba(0,0,0,.5);
}
.shot-img{
  position:relative; cursor:zoom-in; background:#070709;
  aspect-ratio:4/3; display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  place-items:center;
  overflow:hidden; padding:6px; min-width:0;
}
.shot-img img{
  display:block; width:100%; height:100%; min-width:0; min-height:0;
  object-fit:contain; object-position:center;
  border-radius:5px;
  opacity:0; transform:scale(.985);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.shot-img img.loaded{ opacity:1; transform:none; }
.shot-img::after{
  content:'ZOOM +'; position:absolute; inset:0;
  display:grid; place-items:center;
  background:rgba(5,5,7,.55);
  color:var(--t1); font:400 11px/1 var(--mono); letter-spacing:.42em; text-transform:uppercase;
  opacity:0; transition:opacity .28s var(--ease);
  backdrop-filter:blur(2px);
}
.shot-img:hover::after{ opacity:1; }
.shot-cap{
  position:relative; z-index:2;
  padding:11px 15px; font-size:12px; color:var(--t3);
  border-top:1px solid rgba(255,255,255,.06); display:flex; gap:9px; align-items:flex-start;
  line-height:1.6; background:#070707;
}
.shot-cap::before{
  content:''; width:3px; height:3px; border-radius:50%;
  background:var(--t4); margin-top:8px; flex:none;
}
.shots.inline{ margin:14px 0 4px; }
/* 局部细节图：宽度与整屏图一致，高度按内容自适应 */
.shot.flat .shot-img{ aspect-ratio:auto; padding:0; }
.shot.flat .shot-img img{ width:100%; height:auto; }

/* ---------- 仅针对「横向长条实拍图」（宽高比 ≥ 4:1，如工具栏 / 进程行 / 按钮组）----------
   1) 比普通卡片宽约三分之一（450px），长条里的字更清楚，且仍在图片原始分辨率内不放大；
   2) 独占一行、贴紧内容——不再被同排的整页截图拉高，底下不留一大片空白；
   3) 图区给一个最小高度：比例特别大的那几条（如工具栏 17:1）不会被压成一条细线，
      卡片高矮基本拉齐；点击放大仍然只点图片区，说明条只作文案。 */
.shot.wide{
  grid-column:1 / -1; justify-self:start; align-self:start;
  width:450px; max-width:100%;
}
.shot.wide .shot-img{ min-height:44px; }
.shot.wide .shot-cap{
  padding:8px 14px; font-size:11.5px; line-height:1.5; gap:8px;
  transition:color .25s var(--ease);
}
.shot.wide .shot-cap::before{ margin-top:7px; }
.shot.wide:hover .shot-cap{ color:var(--t2); }

/* ---------- 滚动渐入（一次性入场；播完由 app.js 摘除内联 delay） ---------- */
.reveal{ opacity:0; transform:translateY(24px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}

/* ---------- 上一篇 / 下一篇 ---------- */
.pager{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-top:60px; padding-top:32px; border-top:1px solid var(--line);
}
.pg{
  display:flex; flex-direction:column; gap:6px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:18px 20px;
  text-decoration:none; color:inherit;
  transition:border-color .26s var(--ease), background .26s var(--ease);
}
.pg:hover{ background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.22); }
.pg.next{ text-align:right; align-items:flex-end; }
.pg-l{
  font:400 10px/1 var(--mono); color:var(--t4);
  letter-spacing:.3em; text-transform:uppercase;
}
.pg-t{ font-size:14px; font-weight:400; display:flex; align-items:center; gap:8px; }
.pg .ico{ width:15px; height:15px; color:var(--t3); transition:color .2s var(--ease); }
.pg:hover .ico{ color:var(--t1); }
.pg.ghost{ opacity:.3; pointer-events:none; }

/* ============================================================
   灯箱
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(5,5,7,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center; flex-direction:column;
}
.lightbox.on{ display:flex; animation:rise .3s var(--ease); }
.lb-stage{
  flex:1; width:100%; display:flex; align-items:center; justify-content:center;
  flex-direction:column; overflow:hidden; padding:56px 40px 10px;
}
.lb-stage img{
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:12px; cursor:grab;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 50px 120px rgba(0,0,0,.75);
  transition:transform .12s linear;
}
.lb-stage img:active{ cursor:grabbing; }
.lb-cap{
  margin-top:16px; font-size:13px; color:var(--t2); text-align:center; max-width:760px;
}
.lb-close{
  position:absolute; top:22px; right:26px;
  width:42px; height:42px; border-radius:8px;
  background:transparent; border:1px solid rgba(255,255,255,.2);
  color:var(--t1); font-size:20px; line-height:1; cursor:pointer;
  transition:all .3s var(--ease);
}
.lb-close:hover{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); }
.lb-hint{
  padding:12px 0 20px;
  font:400 10px/1 var(--mono); color:var(--t4);
  letter-spacing:.3em; text-transform:uppercase;
}

/* ============================================================
   搜索面板
   ============================================================ */
.search-panel{
  position:fixed; z-index:90; display:none;
  left:calc(var(--side-w) + 16px); top:128px;
  width:430px; max-height:calc(100vh - 190px);
  background:rgba(9,9,9,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12); border-radius:12px;
  box-shadow:0 30px 70px rgba(0,0,0,.62);
  overflow:hidden;
}
.search-panel.on{ display:block; animation:rise .25s var(--ease); }
.sp-inner{ display:flex; flex-direction:column; max-height:inherit; }
.sp-head{
  padding:13px 18px;
  font:400 10px/1.6 var(--mono); color:var(--t3);
  border-bottom:1px solid var(--line); letter-spacing:.2em; text-transform:uppercase;
}
.sp-list{ overflow-y:auto; padding:8px; }
.sp-list::-webkit-scrollbar{ width:5px; }
.sp-list::-webkit-scrollbar-track{ background:transparent; }
.sp-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border:none; }

.sp-item{
  display:flex; gap:12px; align-items:center;
  padding:11px 13px; border-radius:9px; cursor:pointer;
  transition:background .18s var(--ease);
}
.sp-item:hover, .sp-item.sel{ background:rgba(255,255,255,.05); }
.sp-ico{
  flex:none; display:grid; place-items:center; color:var(--t3);
  transition:color .2s var(--ease);
}
.sp-item.sel .sp-ico{ color:var(--t1); }
.sp-ico .ico{ width:16px; height:16px; stroke-width:1.5; }
.sp-b{ min-width:0; flex:1; }
.sp-t{ font-size:13.5px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
/* 搜索高亮：白字加亮，无彩色底 */
.sp-t mark{ background:none; color:#fff; font-weight:500; }
.sp-p{ font-size:11.5px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.sp-empty{ padding:26px 18px; text-align:center; color:var(--t3); font-size:13px; }

/* ============================================================
   回到顶部
   ============================================================ */
.to-top{
  position:fixed; right:30px; bottom:30px; z-index:60;
  width:42px; height:42px; border-radius:8px;
  background:rgba(9,9,9,.94); border:1px solid rgba(255,255,255,.12);
  color:var(--t2); cursor:pointer;
  display:grid; place-items:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all .28s var(--ease);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .to-top{ -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
}
.to-top.on{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); color:var(--t1); }

/* ============================================================
   响应式
   ============================================================ */
.menu-btn{
  display:none; position:fixed; top:16px; left:16px; z-index:70;
  width:40px; height:40px; border-radius:11px;
  background:rgba(9,9,9,.94); border:1px solid rgba(255,255,255,.12);
  color:var(--t1); cursor:pointer; place-items:center;
}

@media (max-width:1024px){
  :root{ --side-w:0px; }
  .side{
    transform:translateX(-100%); transition:transform .35s var(--ease);
    width:264px; box-shadow:0 0 60px rgba(0,0,0,.9);
    background:rgba(5,5,7,.9);
  }
  .side.open{ transform:none; }
  .main{ margin-left:0; }
  .progress{ left:0; }
  .view{ padding:72px 24px 110px; }
  .search-panel{ left:16px; right:16px; width:auto; }
  .hero h1{ font-size:32px; }
  .menu-btn{ display:grid; }
  .pager{ grid-template-columns:1fr; }
  .pg.next{ text-align:left; align-items:flex-start; }
  .banner-row{ grid-template-columns:1fr; }
  .cmp tbody th.k{ width:auto; }
  .cmp th,.cmp td{ padding:10px 12px; font-size:12.5px; }
}

@media (max-width:640px){
  .view{ padding:66px 16px 96px; }
  .hero h1{ font-size:27px; }
  .hm b{ font-size:26px; }
  .detail-head h1{ font-size:26px; }
  .detail-head .lead{ font-size:13.5px; }
  .sec-h h2{ font-size:19px; white-space:normal; }
  .item{ flex-direction:column; gap:9px; }
  .it-badge{ min-width:0; align-self:flex-start; }
  .grid{ grid-template-columns:1fr; }
  .metric b{ font-size:24px; }
  .start-banner{ padding:18px; gap:14px; }
  .sb-t{ font-size:14.5px; }
  .sb-d{ font-size:12.5px; }
  .to-top{ right:18px; bottom:18px; }
}

/* ---------- 低 DPI 字体层（官网同款）：1x/1.25x 屏可读性兜底 ---------- */
@media (max-resolution:1.5dppx){
  :root{ --t3:#8a8a93; }
  .hero h1, .detail-head h1, .hm b, .metric b, .sec-h h2{ font-weight:300; }
  .logo-sub, .hm span, .metric span, .pg-l, .lb-hint, .sp-head,
  .dh-code, .hero-eyebrow, .sec-title{ font-size:11px; }
  .logo-sub, .pg-l, .lb-hint, .foot-q{ color:#8a8a93; }
}
@media (min-resolution:2dppx){
  body{ -webkit-font-smoothing:antialiased; }
}