/* ---------- 基础 ---------- */
*{box-sizing:border-box}
[hidden]{display:none !important}          /* v3 的 bug：class 覆盖了 UA 的 [hidden] */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}

.wrap{width:min(var(--wrap), 100% - var(--gutter)*2); margin-inline:auto}

h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.02em; line-height:1.14; font-weight:700}
h1{font-size:clamp(2.4rem, 6.2vw, 4.3rem); letter-spacing:-.035em}
h2{font-size:clamp(1.85rem, 4vw, 2.9rem); letter-spacing:-.03em}
h3{font-size:1.0625rem; letter-spacing:-.01em}
p{margin:0}
.lede{font-size:clamp(1.02rem,1.6vw,1.16rem); color:var(--ink-2); max-width:var(--measure); line-height:1.68}

/* 产品界面的文字一律等宽 —— 字体分工即信息 */
.ui{font-family:var(--mono); font-size:.78rem; letter-spacing:.01em; font-variant-numeric:tabular-nums}
.label{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

/* ---------- 合成样片：分层渐变 + 噪点，读起来像失焦摄影 ---------- */
.ph{display:block;                   /* span 用作图块时必须块级化，否则 width/height 不生效 */
    position:relative; background-color:#1a1d22; background-repeat:no-repeat;
    background-size:cover; background-position:center}
.ph-01{background-image:url("/assets/shot-01.webp")}
.ph-01{background-position:50% 16%}   /* 人像主体偏上，居中裁切会切掉头部 */
.ph-02{background-image:url("/assets/shot-02.webp")}
/* ============================================================
   顶栏
   ============================================================ */
.nav{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 86%, transparent);
     backdrop-filter:blur(14px) saturate(150%); border-bottom:1px solid transparent; transition:border-color .2s}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{display:flex; align-items:center; gap:32px; height:64px}

.nav-links{display:flex; gap:26px; font-size:.9rem; color:var(--ink-2)}
.nav-links a{padding:4px 0; border-bottom:1.5px solid transparent}
.nav-links a:hover{color:var(--ink); border-bottom-color:var(--amber)}

.btn{display:inline-flex; align-items:center; gap:9px; padding:10px 17px; border-radius:9px;
     background:var(--btn-bg); color:var(--btn-ink); font-size:.9rem; font-weight:600; white-space:nowrap;
     transition:transform .15s, opacity .15s}
.btn:hover{transform:translateY(-1px); opacity:.9}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn-lg{padding:15px 24px; font-size:1rem; border-radius:11px}

.burger{display:none; width:40px;height:40px; border:1px solid var(--line); border-radius:9px;
        align-items:center; justify-content:center; flex-direction:column; gap:4px}
.burger span{display:block;width:15px;height:1.5px;background:var(--ink);transition:.2s}
.drawer{display:none}

@media (max-width:860px){
  .nav-links{display:none}
  .nav .btn{display:none}
  .burger{display:flex}
  .drawer{display:block; position:fixed; inset:64px 0 auto 0; z-index:59;
          background:var(--paper); border-bottom:1px solid var(--line);
          transform:translateY(-120%); transition:transform .26s cubic-bezier(.2,.7,.2,1)}
  .drawer[data-open="true"]{transform:translateY(0)}
  .drawer-in{display:flex; flex-direction:column; padding:12px 0 22px}
  .drawer a{padding:13px 0; border-bottom:1px solid var(--line); font-size:1.02rem}
  .drawer .btn{margin-top:18px; justify-content:center}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding:clamp(52px,8vw,96px) 0 0; text-align:center}
.hero h1 span{font-family:var(--display); font-weight:700}
.hero .lede{margin:22px auto 0; text-align:left}
@media (min-width:720px){ .hero .lede{text-align:center} }
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px}
.facts{display:flex; gap:8px 20px; justify-content:center; flex-wrap:wrap; margin-top:24px}
.facts li{list-style:none}
.facts{padding:0; font-family:var(--mono); font-size:.74rem; color:var(--ink-3); letter-spacing:.02em}

/* ---------- 看图器：真实可操作 ---------- */
.stage{background:var(--canvas); margin-top:clamp(44px,6vw,72px); padding:clamp(28px,4vw,52px) 0 clamp(36px,5vw,64px)}
.viewer{border-radius:14px; overflow:hidden; background:var(--canvas-2);
        border:1px solid var(--canvas-line); box-shadow:0 40px 90px rgba(0,0,0,.45)}
.vbar{display:flex; align-items:center; gap:14px; padding:11px 14px; background:#1b1b21;
      border-bottom:1px solid var(--canvas-line)}
.dots{display:flex; gap:7px; flex:none}
.dots i{width:11px;height:11px;border-radius:50%;background:#3a3a44}
.vname{flex:1; text-align:center; color:var(--canvas-ink); font-family:var(--mono); font-size:.78rem}
.vname b{font-weight:500}
.vname small{color:var(--canvas-ink2); margin-left:10px}
.vtools{display:flex;gap:6px;flex:none}
.vtools button{width:26px;height:26px;border-radius:6px;color:var(--canvas-ink2);font-size:.8rem;
               display:grid;place-items:center}
.vtools button:hover{background:#2a2a33;color:var(--canvas-ink)}

.frame{position:relative; height:min(58vh, 460px); overflow:hidden; background:#0b0b0d;
       cursor:grab; touch-action:pan-y}
/* 窄屏改成按比例，否则固定 460px 高会把横构图裁成竖条 */
@media (max-width:720px){ .frame{height:auto; aspect-ratio:4/3} }
.frame.grabbing{cursor:grabbing}
.frame .ph{position:absolute; inset:0; transform-origin:0 0; will-change:transform}
.hint{position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
      background:rgba(12,12,15,.82); backdrop-filter:blur(8px); color:#fff;
      border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:7px 15px;
      font-family:var(--mono); font-size:.72rem; display:flex; gap:9px; align-items:center;
      transition:opacity .3s}
.hint b{color:var(--amber);font-weight:500}
.edge{position:absolute; top:50%; transform:translateY(-50%); width:38px;height:38px;border-radius:50%;
      background:rgba(20,20,24,.7); backdrop-filter:blur(8px); color:#fff; font-size:1.1rem;
      display:grid;place-items:center; border:1px solid rgba(255,255,255,.14); opacity:0; transition:opacity .2s}
.frame:hover .edge, .edge:focus-visible{opacity:1}
.edge.prev{left:14px} .edge.next{right:14px}

.vfoot{display:flex; align-items:center; gap:14px; padding:10px 14px; background:#1b1b21;
       border-top:1px solid var(--canvas-line); color:var(--canvas-ink2);
       font-family:var(--mono); font-size:.74rem; flex-wrap:wrap}
.vfoot .sep{width:1px;height:14px;background:var(--canvas-line)}
.zoom{margin-left:auto; display:flex; align-items:center; gap:4px}
.zoom button{width:24px;height:24px;border-radius:5px;color:var(--canvas-ink)}
.zoom button:hover{background:#2a2a33}
.zoom output{min-width:52px;text-align:center;color:var(--canvas-ink)}
.zoom .fit{width:auto;padding:0 9px}

.strip{display:flex; gap:8px; margin-top:14px; overflow-x:auto; padding-bottom:4px}
.strip button{flex:none; width:78px; height:52px; border-radius:7px; overflow:hidden; padding:0;
              border:2px solid transparent; opacity:.5; transition:.18s}
.strip button:hover{opacity:.85}
.strip button[aria-current="true"]{opacity:1; border-color:var(--amber)}
.strip .ph{width:100%;height:100%}

/* ============================================================
   通用段落
   ============================================================ */
.sec{padding:clamp(64px,9vw,116px) 0}
.sec-dark{background:var(--canvas); color:var(--canvas-ink)}
.sec-dark .lede{color:var(--canvas-ink2)}
.sec-dark .label{color:var(--canvas-ink2)}

/* 2 — 文件夹：5/7 非对称 */
.split{display:grid; gap:clamp(32px,5vw,60px); align-items:center}
@media (min-width:940px){ .split{grid-template-columns:5fr 7fr} }
.steps{display:flex; flex-direction:column; gap:0; margin-top:30px; border-top:1px solid var(--line)}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:14px; padding:16px 0;
          border-bottom:1px solid var(--line); list-style:none}
.steps{padding:0}
.steps .k{font-family:var(--mono); font-size:.72rem; color:var(--ink-3); padding-top:3px}
.steps p{color:var(--ink-2); font-size:.94rem; margin-top:3px}

.handoff{display:grid; gap:14px; grid-template-columns:1fr; align-items:center}
@media (min-width:620px){ .handoff{grid-template-columns:1fr auto 1fr} }
.panel{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card)}
.panel-top{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--paper-2);
           border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.72rem}
.panel-top .dots i{width:9px;height:9px;background:var(--line)}
.panel-top b{font-weight:500}
.panel-top small{margin-left:auto;color:var(--ink-3)}
.files{padding:6px}
.files button{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
              width:100%; padding:7px 8px; border-radius:7px; text-align:left;
              font-family:var(--mono); font-size:.72rem; color:var(--ink-2)}
.files button:hover{background:var(--paper-2)}
.files button[aria-current="true"]{background:var(--paper-2); color:var(--ink)}
.files .th{width:30px;height:22px;border-radius:4px}
.files .sz{color:var(--ink-3)}
.arrow{display:grid; place-items:center; gap:6px; color:var(--ink-3);
       font-family:var(--mono); font-size:.66rem; text-align:center}
.arrow i{display:block;width:34px;height:1px;background:var(--line);position:relative}
.arrow i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
                border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg)}
@media (max-width:619px){ .arrow i{width:1px;height:26px;margin:auto} .arrow i::after{transform:rotate(135deg);right:-3px;top:auto;bottom:0} }
.mini{aspect-ratio:4/3}
.mini-foot{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--line);
           font-family:var(--mono); font-size:.7rem; color:var(--ink-3)}
kbd{font-family:var(--mono); font-size:.7rem; border:1px solid var(--line); border-bottom-width:2px;
    border-radius:5px; padding:2px 6px; background:var(--card); color:var(--ink)}
.sec-dark kbd{border-color:var(--canvas-line); background:var(--canvas-2); color:var(--canvas-ink)}

/* 3 — 输入设备：深色，标题左 / 列表右 */
.inputs{display:grid; gap:clamp(30px,5vw,56px)}
@media (min-width:940px){ .inputs{grid-template-columns:7fr 5fr; align-items:start} }
.dev{display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 0;
     border-bottom:1px solid var(--canvas-line)}
.dev:first-child{border-top:1px solid var(--canvas-line)}
.dev-ic{width:34px;height:34px;border-radius:9px;background:var(--canvas-2);
        border:1px solid var(--canvas-line); display:grid;place-items:center; font-size:.9rem}
.dev h3{color:var(--canvas-ink)}
.dev p{color:var(--canvas-ink2); font-size:.9rem; margin-top:4px}
.dev .keys{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}

/* 4 — 格式：安静的一条，不用卡片 */
.formats{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.hero .formats{justify-content:center; margin-top:26px}
.hero-sub{margin-top:26px !important; font-size:.98rem}
.handoff-cap{max-width:var(--measure); margin:18px auto 0; text-align:center;
             font-size:.86rem; color:var(--ink-3)}
.tbl-wrap{margin-top:44px}
.fmt{font-family:var(--mono); font-size:.82rem; padding:8px 14px; border:1px solid var(--line);
     border-radius:999px; color:var(--ink-2)}
.fmt.hi{border-color:var(--ink); color:var(--ink); font-weight:500}

/* 5 — 更多一步：非对称 2-up */
.more{display:grid; gap:16px}
@media (min-width:860px){ .more{grid-template-columns:1.35fr 1fr} }
.tile{border:1px solid var(--line); border-radius:14px; padding:24px; background:var(--card);
      display:flex; flex-direction:column; gap:14px}
.tile p{color:var(--ink-2); font-size:.94rem}
.stack{display:grid; gap:16px}
.exif{display:grid; gap:0; font-family:var(--mono); font-size:.75rem; margin-top:auto}
.exif div{display:flex; justify-content:space-between; gap:14px; padding:7px 0;
          border-top:1px solid var(--line)}
.exif span{color:var(--ink-3)}
.ocr-doc{border-radius:10px; padding:20px; background:var(--paper-2); position:relative;
         border:1px solid var(--line)}
.ocr-doc strong{display:block; font-size:1.28rem; line-height:1.3; letter-spacing:-.02em}
.ocr-doc p{margin-top:8px; font-size:.86rem}
.ocr-box{position:absolute; inset:14px 16px auto 16px; height:76px; border:1.5px solid var(--amber);
         border-radius:5px; background:color-mix(in srgb, var(--amber) 12%, transparent);
         opacity:0; transition:opacity .3s}
.ocr-doc[data-on="true"] .ocr-box{opacity:1}
.ocr-out{border:1px solid var(--line); border-radius:9px; padding:12px 14px; background:var(--card);
         font-size:.88rem; opacity:0; transform:translateY(6px); transition:.3s}
.ocr-out[data-on="true"]{opacity:1; transform:none}
.swatches{display:flex; gap:8px; margin-top:auto}
.swatches button{flex:1; height:44px; border-radius:8px; border:1px solid var(--line);
                 font-family:var(--mono); font-size:.68rem; color:var(--ink-2)}
.swatches button[aria-pressed="true"]{border-color:var(--ink); color:var(--ink)}

/* 6 — 对比：朴素表格 */
.tbl-wrap{overflow-x:auto; margin-top:30px; border:1px solid var(--line); border-radius:12px}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:.92rem}
th,td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--line)}
thead th{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
         color:var(--ink-3); font-weight:400; background:var(--paper-2)}
tbody tr:last-child td{border-bottom:0}
td.no{color:var(--ink-3)}
td.yes{color:var(--ink); font-weight:500}

/* 7 — FAQ */
details{border-bottom:1px solid var(--line)}
summary{display:flex; justify-content:space-between; gap:20px; align-items:baseline;
        padding:20px 0; cursor:pointer; font-weight:600; font-size:1.02rem; list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--mono); color:var(--ink-3); flex:none}
details[open] summary::after{content:"−"}
details p{padding-bottom:22px; color:var(--ink-2); max-width:var(--measure); font-size:.95rem}

/* 8 — 下载 */
.dl{text-align:center}
.dl .btn{background:var(--canvas-ink); color:var(--canvas)}
.dl .btn-ghost{background:transparent; color:var(--canvas-ink); border-color:var(--canvas-line)}

footer{padding:44px 0 56px; border-top:1px solid var(--line); font-size:.86rem; color:var(--ink-2)}
.foot-in{display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center}
.foot-in .brand{margin-right:auto; font-size:.98rem}
.note{margin-top:26px; font-size:.78rem; color:var(--ink-3); max-width:52rem; line-height:1.6}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* 尚未可用的入口：保留按钮体量以免布局跳动，但明确不可点 */
.btn-off{opacity:.45;cursor:default;pointer-events:none}
.sec-dark .btn-off{opacity:.5}