/* 识多 AI 工作台公开页公共样式（工作流 / 玩起来两页共用）；识多 VI 1.1 */
  /* 识多 VI 1.1：白底、黑色主按钮、识多蓝为唯一主强调、橙色只做小圆点；无渐变、无玻璃、无彩色发光 */
  :root {
    --paper:#ffffff; --surface:#ffffff; --ink:#0b0b0b; --text:#334155; --muted:#475569; --faint:#94a3b8; --line:#e5e7eb;
    --green:#0b0b0b; --green-2:#262626; --accent:#f59e0b; --soft:#f1f5f9; --lime:#eff6ff; --warn:#92400e; --blue:#2563eb; --blue-soft:#eff6ff;
    --r-sm:8px; --r-md:14px; --r-lg:22px; --ease:cubic-bezier(.2,.7,.2,1);
    --shadow:0 18px 48px rgb(15 23 42 / .12);
    --max:1180px;
    font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
  }
  * { box-sizing:border-box; }
  [hidden] { display:none !important; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--paper); color:var(--ink); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; }
  img { display:block; max-width:100%; }
  a { color:inherit; text-decoration:none; }
  button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
  :focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }
  .wrap { max-width:var(--max); margin:0 auto; padding:0 24px; }
  .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.08em; color:var(--muted); }
  .eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:#f59e0b; }
  .h2 { font-size:clamp(28px, 3.4vw, 40px); line-height:1.25; font-weight:800; margin:10px 0 0; letter-spacing:-.01em; }
  .lead { color:var(--muted); margin:0; }
  .btn { white-space:nowrap; display:inline-flex; align-items:center; gap:12px; height:48px; padding:0 22px; border-radius:var(--r-sm); background:var(--ink); color:#fff; font-weight:600; transition:background 180ms var(--ease), transform 180ms var(--ease); }
  .btn:hover { background:var(--green); }
  .btn:active { transform:translateY(1px); }
  .btn .arr { font-size:18px; line-height:1; }
  .btn.line { background:#fff; color:var(--ink); border:1px solid var(--line); }
  .btn.line:hover { background:#f1f5f9; }
  .link { display:inline-flex; align-items:center; gap:6px; color:var(--text); font-size:14px; border-bottom:1px solid transparent; transition:border-color 180ms; }
  .link:hover { border-color:var(--text); }
  .tag { display:inline-block; font-size:11px; padding:2px 8px; border-radius:99px; background:var(--blue-soft); color:var(--blue); }
  .tag.eval { background:#fff3e6; color:var(--warn); }

  /* 滚动淡入 */
  .rv { opacity:0; transform:translateY(18px); transition:opacity 700ms var(--ease), transform 700ms var(--ease); }
  .rv.in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation:none !important; transition:none !important; }
    .rv { opacity:1; transform:none; }
  }

  /* ---------- 头部 */
  header { position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:1px solid transparent; transition:border-color 200ms; }
  header.scrolled { border-color:var(--line); }
  .nav { height:68px; display:flex; align-items:center; gap:28px; }
  .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; }
  .brand img { width:30px; height:30px; }
  .brand small { font-size:12px; font-weight:400; color:var(--muted); }
  /* 两个页面的切换：工作流 / 玩起来 */
  .nav nav { display:flex; gap:4px; font-size:14px; padding:3px; border-radius:99px; background:#f1f5f9; }
  .nav nav a { padding:6px 16px; border-radius:99px; color:var(--muted); transition:background 180ms, color 180ms; }
  .nav nav a:hover { color:var(--ink); }
  .nav nav a.on { background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgb(15 23 42 / .08); }
  .nav .grow { flex:1; }
  .nav .btn { height:40px; padding:0 16px; font-size:14px; }

  /* ---------- 首屏 */
  .hero { display:grid; grid-template-columns:1fr 1.02fr; gap:56px; align-items:center; padding-top:56px; padding-bottom:72px; }
  .hero h1 { font-size:clamp(40px, 5.6vw, 64px); line-height:1.16; font-weight:800; margin:18px 0 22px; letter-spacing:-.02em; }
  .hero h1 .u { position:relative; white-space:nowrap; }
  .hero h1 .u::after { content:''; position:absolute; left:2%; right:4%; bottom:-6px; height:5px; border-radius:6px; background:#2563eb; transform-origin:left; animation:draw 900ms 400ms var(--ease) both; }
  @keyframes draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  .hero p.lead { font-size:16px; line-height:1.9; max-width:470px; }
  .hero .ctas { display:flex; align-items:center; gap:22px; margin:30px 0 22px; flex-wrap:wrap; }
  .ticks { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
  .ticks span::before { content:'✓ '; color:var(--green); }

  .stage { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:16px; }
  .stage .top { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); padding:2px 4px 12px; }
  .stage .top::before { content:''; width:6px; height:6px; border-radius:50%; background:#f59e0b; }
  .stage .top .sp { flex:1; }
  .frames { position:relative; aspect-ratio:1 / 1; border-radius:var(--r-md); overflow:hidden; background:#f8fafc; }
  .frame { position:absolute; inset:0; opacity:0; transition:opacity 700ms var(--ease); }
  .frame.on { opacity:1; }
  .frame img { width:100%; height:100%; object-fit:cover; }
  .frame.wipe img.after { clip-path:inset(0 100% 0 0); }
  .frame.wipe.on img.after { animation:wipe 1400ms 350ms var(--ease) forwards; }
  @keyframes wipe { to { clip-path:inset(0 0 0 0); } }
  .frame.wipe img { position:absolute; inset:0; }
  .frame .long { container-type:size; position:absolute; left:50%; top:0; width:56%; transform:translateX(-50%); box-shadow:0 8px 30px rgb(0 0 0 / .14); border-radius:8px; overflow:hidden; height:100%; background:#fff; }
  .frame .long img { height:auto; }
  .frame.on .long img { animation:longScroll 3200ms 300ms ease-in-out forwards; }
  @keyframes longScroll { to { transform:translateY(calc(-100% + 100cqh)); } }
  .frame.fill { background:#f1f5f9; display:grid; place-items:center; }
  .capline { padding:14px 4px 2px; min-height:62px; transition:opacity 300ms; }
  .capline.fade { opacity:0; }
  .capline small { display:block; font-size:12px; color:var(--muted); letter-spacing:.04em; }
  .capline b { display:block; font-size:19px; font-weight:700; margin-top:2px; }
  .stage .tabs { display:flex; gap:6px; align-items:center; padding:12px 2px 0; }
  .stage .tabs button { font-size:13px; padding:5px 12px; border-radius:var(--r-sm); color:var(--muted); transition:background 180ms, color 180ms; }
  .stage .tabs button.on { background:var(--soft); color:var(--ink); }
  .stage .tabs .sp { flex:1; }
  .stage .tabs .pause { font-size:12px; color:var(--muted); }

  /* ---------- 用户故事 */
  section { padding:84px 0; }
  .sec-hd { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
  .sec-hd .lead { max-width:380px; font-size:14px; }
  .story { display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:start; }
  .story > div { min-width:0; }
  .steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; position:sticky; top:96px; }
  .steps li button { width:100%; text-align:left; display:grid; grid-template-columns:34px 1fr; gap:10px; padding:12px 14px; border-radius:var(--r-md); transition:background 200ms; }
  .steps li button:hover { background:var(--surface); }
  .steps .no { font-size:13px; color:var(--faint); padding-top:2px; font-variant-numeric:tabular-nums; }
  .steps b { display:block; font-size:15px; }
  .steps small { display:block; font-size:12px; color:var(--muted); }
  .steps .bar { grid-column:2; height:2px; background:var(--line); border-radius:2px; margin-top:8px; overflow:hidden; }
  .steps .bar i { display:block; height:100%; width:0; background:var(--green); }
  .steps li.on button { background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
  .steps li.on .no { color:var(--green); }
  .steps li.done .bar i { width:100%; }
  .story-ctl { display:flex; gap:14px; align-items:center; padding:12px 14px 0; font-size:12px; color:var(--muted); }
  .story-ctl button { color:var(--text); border-bottom:1px solid var(--line); }

  .device { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; }
  .dv-top { height:44px; display:flex; align-items:center; gap:10px; padding:0 16px; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; }
  .dv-top img { width:20px; height:20px; }
  .dv-top small { font-weight:400; color:var(--muted); font-size:11px; }
  .dv-top .sp { flex:1; }
  .dv-top .st { font-size:11px; font-weight:400; color:var(--muted); display:flex; align-items:center; gap:6px; }
  .dv-top .st::before { content:''; width:6px; height:6px; border-radius:50%; background:#16a34a; }
  .dv-body { display:grid; grid-template-columns:1fr 0px; transition:grid-template-columns 500ms var(--ease); min-height:520px; }
  .dv-body.panel { grid-template-columns:1fr 230px; }
  .dv-main { padding:18px 18px 0; display:flex; flex-direction:column; gap:12px; min-width:0; }
  .dv-canvas { position:relative; height:330px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--paper); overflow:hidden; }
  .dropzone { position:absolute; inset:16px; border:1.5px dashed #cbd5e1; border-radius:var(--r-md); display:grid; place-items:center; color:var(--muted); font-size:13px; transition:opacity 300ms; }
  .filecard { position:absolute; width:110px; padding:6px; background:#fff; border-radius:10px; box-shadow:0 10px 30px rgb(0 0 0 / .18); font-size:10px; color:var(--muted); left:70%; top:-40%; opacity:0; transform:rotate(-8deg); transition:all 1000ms var(--ease); }
  .filecard img { border-radius:6px; margin-bottom:4px; }
  .filecard.fly { left:42%; top:30%; opacity:1; transform:rotate(0); }
  .filecard.drop { opacity:0; transform:scale(.8); }
  .shot { position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity 500ms; }
  .shot.on { opacity:1; }
  .shot img { width:100%; height:100%; object-fit:contain; }
  .live-label { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:rgb(255 255 255 / .94); padding:6px 14px; border-radius:99px; font-size:12px; color:var(--text); opacity:0; transition:opacity 300ms; white-space:nowrap; }
  .live-label.on { opacity:1; }
  .meter { position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--green); }
  .phone { position:absolute; top:10px; bottom:10px; left:50%; width:190px; transform:translateX(-50%); border-radius:16px; border:6px solid var(--ink); overflow:hidden; background:#fff; opacity:0; transition:opacity 400ms; }
  .phone.on { opacity:1; }
  .phone img { width:100%; transition:transform 5200ms ease-in-out; }
  .wave { position:absolute; inset:auto 24px 24px; height:80px; display:flex; align-items:center; justify-content:center; gap:4px; opacity:0; transition:opacity 300ms; }
  .wave.on { opacity:1; }
  .wave i { width:5px; border-radius:3px; background:var(--green); height:12px; }
  .wave.on i { animation:wv 900ms ease-in-out infinite alternate; }
  @keyframes wv { from { height:8px; } to { height:var(--h, 48px); } }
  .karaoke { position:absolute; left:24px; right:24px; top:28px; font-size:15px; line-height:1.8; color:var(--faint); opacity:0; transition:opacity 300ms; text-align:center; }
  .karaoke.on { opacity:1; }
  .karaoke span { transition:color 200ms; }
  .karaoke span.lit { color:var(--ink); }
  .dv-picks { display:flex; gap:8px; justify-content:center; min-height:56px; }
  .dv-picks img { width:52px; height:52px; object-fit:cover; border-radius:8px; border:1px solid var(--line); opacity:0; transform:translateY(8px) scale(.9); transition:all 400ms var(--ease); }
  .dv-picks img.in { opacity:1; transform:none; }
  .dv-picks img.sel { box-shadow:0 0 0 2px var(--green); }
  .dv-picks .pk { position:relative; }
  .dv-picks .pk em { position:absolute; right:3px; bottom:3px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px #fff; opacity:0; transition:opacity 300ms 300ms; }
  .dv-picks .pk.flag em { opacity:1; }
  .dv-chain { display:flex; align-items:center; gap:0; min-height:46px; }
  .dv-chain .nd { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:var(--muted); animation:pop 400ms var(--ease) both; }
  .dv-chain .nd img { width:34px; height:34px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
  .dv-chain .nd.on { color:var(--green); font-weight:600; }
  .dv-chain .nd.on img { box-shadow:0 0 0 2px var(--green); }
  .dv-chain .lk { width:14px; height:1px; background:var(--line); margin-bottom:14px; }
  @keyframes pop { from { opacity:0; transform:scale(.85); } }
  .dv-bar { margin:0 0 16px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 22px rgb(15 23 42 / .08); padding:8px 8px 8px 14px; }
  .dv-intent { font-size:11px; color:var(--muted); min-height:18px; }
  .dv-intent b { color:var(--text); }
  .dv-intent .ar { color:var(--accent); margin:0 6px; }
  .dv-row { display:flex; align-items:center; gap:8px; }
  .dv-cmd { flex:1; font-size:14px; color:var(--ink); min-height:34px; display:flex; align-items:center; }
  .dv-cmd .ph { color:var(--faint); }
  .dv-cmd .caret { display:inline-block; width:1px; height:16px; background:var(--ink); margin-left:1px; animation:blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity:0; } }
  .dv-run { height:36px; padding:0 14px; border-radius:10px; background:var(--green); color:#fff; font-size:13px; font-weight:600; transition:transform 150ms, background 150ms; white-space:nowrap; }
  .dv-run.press { transform:scale(.94); background:var(--green-2); }
  .dv-side { border-left:1px solid var(--line); background:var(--paper); overflow:hidden; min-width:0; }
  .dv-side .in { width:230px; padding:16px 14px; display:flex; flex-direction:column; gap:9px; font-size:11px; color:var(--muted); }
  .dv-side h4 { margin:0; font-size:11px; font-weight:600; color:var(--muted); }
  .dv-side .fld { background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:5px 8px; color:var(--ink); font-size:12px; min-height:28px; }
  .dv-side .seg2 { display:flex; gap:4px; }
  .dv-side .seg2 span { padding:2px 9px; border-radius:99px; border:1px solid var(--line); background:var(--surface); font-size:11px; transition:all 250ms; }
  .dv-side .seg2 span.on { background:var(--green); border-color:var(--green); color:#fff; }
  .dv-side .ok { color:var(--green); }
  .dv-side .warn { color:var(--warn); }
  .story-foot { margin-top:14px; font-size:12px; color:var(--faint); }

  /* ---------- 能力卡片 */
  .cards { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .card { background:#f8fafc; border:0; border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow 260ms var(--ease), transform 260ms var(--ease); }
  .media { position:relative; height:300px; background:#f1f5f9; overflow:hidden; }
  .media .chip { position:absolute; left:14px; top:14px; z-index:3; background:rgb(255 255 255 / .94); font-size:12px; color:var(--muted); padding:4px 10px; border-radius:99px; }
  .body { padding:22px 24px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .body .k { font-size:12px; color:var(--muted); letter-spacing:.04em; }
  .body h3 { margin:0; font-size:24px; font-weight:800; letter-spacing:-.01em; }
  .body p { margin:0; color:var(--muted); font-size:14px; }
  .body .ft { margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-size:14px; }
  .body .ft span { color:var(--faint); font-size:12px; }
  .card.wide { grid-column:1 / -1; flex-direction:row; }
  .card.wide .media { flex:1.25; height:auto; min-height:380px; }
  .card.wide .body { flex:1; padding:34px 36px; justify-content:center; }
  .card.wide .body h3 { font-size:30px; }

  /* 前后对比滑块 */
  .compare { position:absolute; inset:0; --pos:52%; }
  .compare img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .compare .after { clip-path:inset(0 0 0 var(--pos)); }
  .compare .line { position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgb(0 0 0 / .05); pointer-events:none; }
  .compare .knob { position:absolute; top:50%; left:var(--pos); width:40px; height:40px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 4px 14px rgb(0 0 0 / .2); display:grid; place-items:center; font-size:13px; color:var(--ink); pointer-events:none; }
  .compare input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
  .compare .lab { position:absolute; bottom:14px; font-size:12px; color:#fff; background:rgb(15 23 42 / .72); padding:3px 10px; border-radius:99px; pointer-events:none; }
  .compare .lab.l { left:14px; } .compare .lab.r { right:14px; }

  .fan { position:absolute; inset:0; display:grid; place-items:center; }
  .fan img { position:absolute; height:82%; width:auto; border-radius:8px; box-shadow:0 10px 28px rgb(0 0 0 / .18); transition:transform 500ms var(--ease); }
  .fan img:nth-child(1) { transform:translateX(-46%) rotate(-7deg) scale(.86); }
  .fan img:nth-child(2) { transform:translateX(0) rotate(0); z-index:2; }
  .fan img:nth-child(3) { transform:translateX(46%) rotate(7deg) scale(.86); }
  @media (hover:hover) {
    .card:hover .fan img:nth-child(1) { transform:translateX(-66%) rotate(-10deg) scale(.86); }
    .card:hover .fan img:nth-child(3) { transform:translateX(66%) rotate(10deg) scale(.86); }
  }
  .longpeek { position:absolute; top:22px; bottom:0; left:50%; width:58%; transform:translateX(-50%); border-radius:12px 12px 0 0; overflow:hidden; box-shadow:0 10px 30px rgb(0 0 0 / .14); background:#fff; container-type:size; }
  .longpeek img { width:100%; }
  .rv.in .longpeek img { animation:peek 16s 600ms ease-in-out infinite alternate; }
  @keyframes peek { to { transform:translateY(calc(-100% + 100cqh)); } }

  .mini-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:22px; }
  .mini-cards .media { height:220px; }
  .mini-cards .body h3 { font-size:20px; }
  .checker { position:absolute; inset:0; background:repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 18px 18px; }
  .sq { position:absolute; top:0; bottom:0; left:50%; aspect-ratio:1; transform:translateX(-50%); }
  .sq img { width:100%; height:100%; }
  .ocrbox { position:absolute; border:2px solid var(--accent); border-radius:4px; opacity:0; transform:scale(1.08); transition:all 500ms var(--ease); }
  .rv.in .ocrbox { opacity:1; transform:none; }
  .rv.in .ocrbox.b2 { transition-delay:300ms; }
  .ocrbox span { position:absolute; left:-2px; bottom:100%; margin-bottom:4px; background:var(--accent); color:#fff; font-size:10px; padding:1px 6px; border-radius:4px; white-space:nowrap; }
  .copymock { position:absolute; inset:18px; background:#fff; border-radius:12px; border:1px solid var(--line); padding:14px 16px; font-size:12.5px; display:flex; flex-direction:column; gap:7px; }
  .copymock .ln { display:flex; gap:8px; align-items:baseline; opacity:0; transform:translateY(6px); transition:all 400ms var(--ease); }
  .rv.in .copymock .ln { opacity:1; transform:none; }
  .copymock .ln:nth-child(2) { transition-delay:120ms; } .copymock .ln:nth-child(3) { transition-delay:240ms; }
  .copymock .ln:nth-child(4) { transition-delay:360ms; } .copymock .ln:nth-child(5) { transition-delay:480ms; }
  .copymock .k { color:var(--faint); width:40px; flex-shrink:0; }
  .copymock .ok { color:var(--green); margin-left:auto; flex-shrink:0; font-size:11px; }
  .copymock .warn { color:var(--warn); margin-left:auto; flex-shrink:0; font-size:11px; }
  .copymock s { color:var(--faint); }
  .voice { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:24px; gap:14px; background:var(--soft); }
  .voice .bars { display:flex; align-items:center; gap:3px; height:54px; }
  .voice .bars i { flex:1; border-radius:2px; background:#cbd5e1; height:var(--h); transition:background 200ms; }
  .voice .bars i.lit { background:var(--green); }
  .voice .row { display:flex; align-items:center; gap:12px; }
  .voice .play { width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; flex-shrink:0; transition:background 180ms; }
  .voice .play:hover { background:var(--green); }
  .voice .txt { font-size:13px; color:var(--text); line-height:1.6; }
  .chat { position:absolute; inset:16px; display:flex; flex-direction:column; gap:8px; font-size:12px; }
  .chat .msg { align-self:flex-start; max-width:88%; background:#fff; border-radius:4px 12px 12px 12px; padding:8px 10px; box-shadow:0 1px 3px rgb(0 0 0 / .06); }
  .chat .msg small { display:block; color:var(--faint); font-size:10px; }
  .chat .res { margin-top:auto; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; flex-wrap:wrap; gap:6px; }
  .chat .res span { font-size:11px; padding:2px 8px; border-radius:99px; background:var(--soft); color:var(--green); opacity:0; transform:scale(.9); transition:all 300ms var(--ease); }
  .rv.in .chat .res span { opacity:1; transform:none; }
  .chat .res span:nth-child(2) { transition-delay:150ms; } .chat .res span:nth-child(3) { transition-delay:300ms; }
  .chat .res span:nth-child(4) { transition-delay:450ms; } .chat .res span:nth-child(5) { transition-delay:600ms; }
  .duo { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; }
  .duo img { width:100%; height:100%; object-fit:cover; }
  .pair { position:absolute; inset:0; }
  .pair img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 800ms; }
  .pair img.b { opacity:0; }
  .rv.in .pair img.b { animation:swap 5s 1s ease-in-out infinite; }
  @keyframes swap { 0%, 40% { opacity:0; } 50%, 90% { opacity:1; } 100% { opacity:0; } }
  .prompt { position:absolute; left:14px; right:14px; bottom:14px; background:rgb(255 255 255 / .95); border-radius:10px; padding:8px 12px; font-size:12px; color:var(--text); }
  .prompt b { color:var(--green); font-weight:600; }

  /* ---------- 玩起来：灵感 + 风格画廊 + 玩法 */
  .ideas { display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; margin-bottom:56px; }
  .askbox { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:18px; }
  .askbox .q { display:flex; align-items:center; gap:10px; min-height:46px; padding:4px 6px 12px; border-bottom:1px solid var(--line); font-size:16px; }
  .askbox .q::before { content:'✦'; color:var(--accent); }
  .askbox .q .caret { display:inline-block; width:1px; height:18px; background:var(--ink); animation:blink 1s steps(1) infinite; }
  .askbox .guess { font-size:12px; color:var(--muted); padding:12px 6px 8px; min-height:38px; }
  .askbox .guess b { color:var(--green); }
  .chips { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 2px 2px; }
  .chipi { display:flex; gap:12px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); opacity:0; transform:translateY(8px); transition:opacity 400ms var(--ease), transform 400ms var(--ease); }
  .chipi.in { opacity:1; transform:none; }
  .chipi img { width:48px; height:48px; border-radius:10px; object-fit:cover; flex-shrink:0; background:#fff; }
  .chipi b { display:block; font-size:14px; }
  .chipi small { display:block; font-size:11px; color:var(--muted); line-height:1.4; }
  .chipi .act { margin-left:auto; font-size:11px; color:var(--blue); background:var(--blue-soft); padding:2px 8px; border-radius:99px; white-space:nowrap; align-self:flex-start; }
  .marquee { overflow:hidden; margin:0 -24px; padding:6px 0; }
  .track { display:flex; gap:16px; width:max-content; animation:marq 70s linear infinite; }
  .track.rev { animation-direction:reverse; animation-duration:80s; }
  .marquee:hover .track { animation-play-state:paused; }
  @keyframes marq { to { transform:translateX(-50%); } }
  .tile { position:relative; height:260px; margin:0; border-radius:var(--r-md); overflow:hidden; flex-shrink:0; background:#f8fafc; }
  .tile img { height:100%; width:auto; transition:transform 600ms var(--ease); }
  .tile.stk { background:var(--lime); width:240px; display:grid; place-items:center; }
  .tile.stk img { height:78%; animation:bob 3.2s ease-in-out infinite; }
  @keyframes bob { 50% { transform:translateY(-8px) rotate(-2deg); } }
  .tile .lab { position:absolute; left:10px; top:10px; font-size:11px; padding:2px 9px; border-radius:99px; background:rgb(255 255 255 / .94); color:var(--ink); }
  .tile .pr { position:absolute; left:10px; right:10px; bottom:10px; font-size:12px; line-height:1.5; color:#fff; background:rgb(15 23 42 / .86); padding:8px 10px; border-radius:10px; opacity:0; transform:translateY(6px); transition:all 300ms var(--ease); }
  @media (hover:hover) { .tile:hover .pr { opacity:1; transform:none; } .tile:hover img { transform:scale(1.03); } }
  .plays { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:40px; }
  .stack { position:absolute; inset:0; }
  .stack img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:cycle3 9s infinite; }
  .stack img:nth-child(2) { animation-delay:3s; } .stack img:nth-child(3) { animation-delay:6s; }
  @keyframes cycle3 { 0% { opacity:0; transform:scale(1.04); } 6%, 33% { opacity:1; transform:none; } 40%, 100% { opacity:0; } }
  .floaty { position:absolute; inset:0; background:var(--lime); }
  .floaty img { position:absolute; width:40%; animation:bob 3.4s ease-in-out infinite; }
  .floaty img:nth-child(1) { left:5%; top:12%; animation-delay:-1s; }
  .floaty img:nth-child(2) { left:32%; top:34%; width:36%; animation-delay:-2s; }
  .floaty img:nth-child(3) { right:5%; top:6%; width:34%; animation-delay:-.4s; }
  @media (max-width:960px) { .ideas, .plays { grid-template-columns:1fr; } .chips { grid-template-columns:1fr; } .tile { height:200px; } .tile.stk { width:180px; } .marquee { margin:0 -16px; } }
  @media (prefers-reduced-motion: reduce) { .marquee { overflow-x:auto; } .chipi { opacity:1; transform:none; } .stack img:first-child { opacity:1; } }

  .morph { display:grid; grid-template-columns:1fr 1.35fr; gap:48px; align-items:center; margin-top:72px; }
  .mtabs { display:flex; flex-wrap:wrap; gap:6px; margin:22px 0 14px; }
  .mtabs button { font-size:13px; padding:6px 12px; border-radius:99px; border:1px solid var(--line); background:var(--surface); color:var(--text); transition:all 200ms var(--ease); }
  .mtabs button.on { background:var(--ink); border-color:var(--ink); color:#fff; }
  .morph-r { display:grid; grid-template-columns:1fr 32px 1.35fr; align-items:center; gap:8px; }
  .morph-r figure { margin:0; position:relative; }
  .morph-r img { width:100%; border-radius:var(--r-md); box-shadow:var(--shadow); display:block; transition:opacity 450ms var(--ease); }
  .morph-r .mout img.fade { opacity:0; }
  .morph-r figcaption { position:absolute; left:10px; top:10px; font-size:11px; padding:2px 9px; border-radius:99px; background:rgb(255 255 255 / .94); color:var(--ink); }
  .morph-r .marrow { color:var(--accent); font-size:22px; text-align:center; }
  @media (max-width:960px) { .morph { grid-template-columns:1fr; gap:24px; } }

  /* ---------- 真实工作 */
  .work { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .work .photo { border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4 / 3.4; }
  .work .photo img { width:100%; height:100%; object-fit:cover; }
  .jobs { list-style:none; padding:0; margin:28px 0 0; }
  .jobs li { display:grid; grid-template-columns:36px 1fr auto; gap:12px; padding:18px 0; border-top:1px solid var(--line); }
  .jobs li:last-child { border-bottom:1px solid var(--line); }
  .jobs .no { font-size:12px; color:var(--faint); padding-top:3px; }
  .jobs b { display:block; font-size:16px; }
  .jobs small { display:block; color:var(--muted); font-size:13px; margin-top:2px; }
  .jobs .t { font-size:12px; color:var(--green); white-space:nowrap; padding-top:3px; }

  /* ---------- 放心用 */
  .trust { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
  .trust div { background:#f8fafc; border-radius:var(--r-lg); padding:26px 24px; }
  .trust .ic { width:40px; height:40px; border-radius:11px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; margin-bottom:16px; }
  .trust h3 { margin:0 0 8px; font-size:19px; }
  .trust p { margin:0; color:var(--muted); font-size:14px; }
  .license { margin-top:18px; font-size:12px; color:var(--faint); }

  /* ---------- 接入 */
  .api { display:grid; grid-template-columns:1fr 1.25fr; gap:48px; align-items:center; }
  .code { background:var(--ink); color:#e2e8f0; border-radius:var(--r-lg); padding:22px 24px; font:12.5px/1.75 ui-monospace,Menlo,Consolas,monospace; overflow:auto; white-space:pre; }
  .code .c { color:#94a3b8; } .code .s { color:var(--lime); }
  .eps { list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; font-size:13px; color:var(--muted); }
  .eps code { font-size:12px; color:var(--text); }

  .band { background:var(--blue); color:#fff; border-radius:var(--r-lg); padding:52px 56px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .band small { color:rgb(255 255 255 / .82); font-size:13px; }
  .band .btn { background:#fff; color:var(--ink); }
  .band .btn:hover { background:#f1f5f9; }
  .band h2 { margin:6px 0 0; font-size:30px; font-weight:800; }
  footer { border-top:1px solid var(--line); padding:36px 0 44px; margin-top:84px; font-size:13px; color:var(--muted); }
  footer .row { display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
  footer b { color:var(--ink); font-size:18px; margin-right:auto; }

  @media (max-width:960px) {
    .nav nav { display:none; }
    .hero { grid-template-columns:1fr; gap:40px; padding-top:28px; padding-bottom:56px; }
    .note { right:8px; top:-14px; }
    .story { grid-template-columns:1fr; }
    .steps { position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px; }
    .steps li { flex:0 0 auto; }
    .steps li button { grid-template-columns:24px auto; padding:8px 12px; }
    .steps small, .steps .bar { display:none; }
    .dv-body.panel { grid-template-columns:1fr 0px; }
    .dv-canvas { height:290px; }
    .cards, .mini-cards, .work, .trust, .api { grid-template-columns:1fr; }
    .card.wide { flex-direction:column; }
    .card.wide .media { min-height:300px; }
    .card.wide .body { padding:22px 24px 20px; }
    .card.wide .body h3 { font-size:24px; }
    .eps { grid-template-columns:1fr; }
    section { padding:60px 0; }
    .band { padding:30px 24px; }
  }
  @media (max-width:520px) {
    .wrap { padding:0 16px; }
    .brand small { display:none; }
    .nav .btn { padding:0 12px; }
    .dv-chain .nd img { width:28px; height:28px; }
    .dv-run { padding:0 10px; }
    .media { height:260px; }
    .dv-main { padding:12px 12px 0; }
    .dv-body { min-height:0; }
  }
  .mini-cards.four { grid-template-columns:repeat(4, 1fr); }
  .allplays { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:16px; }
  .allplays .pl { display:block; background:#f8fafc; border-radius:var(--r-md); overflow:hidden; color:inherit; transition:box-shadow 200ms var(--ease); }
  @media (hover:hover) { .allplays .pl:hover { box-shadow:0 0 0 2px var(--blue); } [data-href]:hover h3 { color:var(--blue); } .tile[data-href]:hover { box-shadow:0 0 0 2px var(--blue); } }
  .allplays .pl .im { aspect-ratio:1; background:#f1f5f9 center / cover no-repeat; display:grid; place-items:center; color:var(--blue); font-size:22px; }
  .allplays .pl div { padding:10px 12px 12px; }
  .allplays .pl b { display:block; font-size:14px; }
  .allplays .pl small { display:block; font-size:12px; color:var(--muted); }
  .allplays h4 { grid-column:1 / -1; margin:18px 0 0; font-size:13px; color:var(--muted); font-weight:600; }
  @media (max-width:960px) { .mini-cards.four { grid-template-columns:1fr; } .allplays { grid-template-columns:repeat(2, 1fr); } .nav nav a { padding:6px 12px; } }