/* The Liner · liner.party
   拟态外壳 + 产品本身的视觉规范。颜色、圆角、缓动取自 demo/style.css。
   只做浅色：拟态依赖固定的光源方向，深色需要另一整套阴影，而产品本身就是白盒子 + 蓝线。 */
:root{
  --accent:#002FA7;
  --ink:#1B2438;
  --muted:#5B6580;
  --bg:#E6EAF3;
  --hi:#FFFFFF;
  --sh:#C2C9DA;
  --hair:#D8DEEA;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:28px;
  --r-s:22px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;position:relative;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;line-height:1.75;letter-spacing:.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}

/* ---------- 贯穿全页的那条线 ---------- */
#thread{position:absolute;top:0;left:0;z-index:0;pointer-events:none;overflow:visible}
#thread .ghost{fill:none;stroke:#002FA7;stroke-opacity:.13;stroke-width:2;stroke-linecap:round}
#thread .live{fill:none;stroke:#002FA7;stroke-opacity:.6;stroke-width:2.4;stroke-linecap:round}
#thread circle{fill:none;stroke:#002FA7;stroke-opacity:.16;stroke-width:2;transition:stroke-opacity .6s var(--ease)}
#thread circle.lit{stroke-opacity:.75}

/* ---------- 顶栏 ---------- */
header.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:center;padding:14px 16px;pointer-events:none}
.bar-inner{pointer-events:auto;width:min(1120px,100%);display:flex;align-items:center;gap:14px;justify-content:space-between;
  border-radius:999px;padding:8px 10px 8px 20px;background:rgba(232,236,244,.88);backdrop-filter:blur(14px);
  box-shadow:7px 7px 18px rgba(150,160,185,.42),-7px -7px 18px rgba(255,255,255,.7)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.06em;color:var(--accent);font-size:15px;white-space:nowrap}
.brand svg{flex:none;fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round}
.bar nav{display:flex;gap:2px;overflow:auto;scrollbar-width:none}
.bar nav::-webkit-scrollbar{display:none}
.bar nav a{font-size:13px;color:var(--muted);padding:8px 12px;border-radius:999px;white-space:nowrap;transition:color .25s var(--ease),background-color .25s var(--ease)}
.bar nav a:hover{color:var(--accent);background:rgba(255,255,255,.6)}
.langs{display:flex;gap:4px;padding:4px;border-radius:999px;background:linear-gradient(145deg,#DFE4F0,#F0F3FA);
  box-shadow:inset 3px 3px 7px var(--sh),inset -3px -3px 7px var(--hi)}
.langs button{font:13px inherit;border:0;background:transparent;color:var(--muted);min-height:34px;padding:0 13px;border-radius:999px;cursor:pointer;
  transition:color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.langs button[aria-pressed=true]{color:var(--accent);font-weight:600;background:linear-gradient(145deg,#F2F5FC,#E2E7F2);
  box-shadow:3px 3px 7px var(--sh),-3px -3px 7px var(--hi)}

/* ---------- 版式 ---------- */
.sec{position:relative;z-index:1;padding:clamp(66px,8vw,116px) 20px;scroll-margin-top:92px}
.wrap{width:min(1080px,100%);margin:0 auto}
.head{display:flex;gap:16px;align-items:flex-start;margin-bottom:clamp(28px,4vw,46px)}
.head>div{min-width:0}
.dot{flex:none;width:12px;height:12px;border-radius:50%;margin-top:15px;background:var(--bg);
  box-shadow:inset 2px 2px 4px var(--sh),inset -2px -2px 4px var(--hi)}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);opacity:.72;margin-bottom:8px}
h2{font-size:clamp(25px,3.3vw,39px);line-height:1.32;font-weight:650;letter-spacing:.01em;text-wrap:balance}
.lead{margin-top:14px;max-width:64ch;color:var(--muted);font-size:clamp(15px,1.3vw,17px)}

/* ---------- 首屏 ---------- */
.hero{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;padding:124px 20px 74px}
.hero-grid{width:min(1080px,100%);margin:0 auto;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4vw,60px);align-items:center}
.hero h1{font-size:clamp(46px,7vw,88px);line-height:1;font-weight:600;letter-spacing:-.015em;color:var(--accent)}
.hero .kicker{margin-bottom:18px}
.hero p.lead{margin-top:24px;font-size:clamp(16px,1.35vw,18px);color:var(--ink);opacity:.8;max-width:46ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 26px;border:0;border-radius:var(--r-s);cursor:pointer;
  font:15px inherit;font-weight:550;color:var(--accent);background:linear-gradient(145deg,#F1F4FB,#DDE2EE);
  box-shadow:8px 8px 17px var(--sh),-8px -8px 17px var(--hi);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.btn:hover{box-shadow:5px 5px 12px var(--sh),-5px -5px 12px var(--hi)}
.btn:active{box-shadow:inset 5px 5px 11px var(--sh),inset -5px -5px 11px var(--hi);transform:translateY(1px)}
.btn.solid{color:#F2F5FD;background:linear-gradient(145deg,#0C3DBA,#002A92);box-shadow:8px 8px 17px rgba(126,138,170,.6),-8px -8px 17px var(--hi)}
.btn.solid:active{box-shadow:inset 4px 4px 10px rgba(0,16,64,.5),inset -4px -4px 10px rgba(92,132,232,.35)}
.stage-card{position:relative;border-radius:36px;padding:18px;background:linear-gradient(145deg,#DFE4F0,#F2F5FC);
  box-shadow:inset 8px 8px 18px var(--sh),inset -8px -8px 18px var(--hi)}
.stage-inner{position:relative;border-radius:22px;background:#FFFFFF;box-shadow:0 10px 30px rgba(28,44,92,.10);overflow:hidden;aspect-ratio:4/3}
canvas{display:block;width:100%;height:100%}
.stage-tag{position:absolute;left:16px;bottom:11px;font-size:10px;letter-spacing:.2em;color:var(--accent);opacity:.45}
.anchor{position:absolute;left:50%;bottom:-17px;width:12px;height:12px;transform:translateX(-50%);opacity:0;pointer-events:none}
.hero-meta{margin-top:28px;font-size:12px;color:var(--muted);letter-spacing:.04em}

/* ---------- 设计理念 ---------- */
.idea-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));gap:clamp(16px,2vw,24px);margin-bottom:clamp(34px,4.5vw,58px)}
.demo{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,3vw,46px);align-items:center}
.switch-group+.switch-group{margin-top:26px}
.switch-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:13px inherit;border:0;cursor:pointer;color:var(--muted);min-height:42px;padding:0 16px;border-radius:999px;
  background:linear-gradient(145deg,#F1F4FB,#DEE3EF);box-shadow:5px 5px 11px var(--sh),-5px -5px 11px var(--hi);
  transition:color .25s var(--ease),box-shadow .25s var(--ease)}
.chip:hover{color:var(--accent)}
.chip[aria-pressed=true]{color:var(--accent);font-weight:600;box-shadow:inset 4px 4px 9px var(--sh),inset -4px -4px 9px var(--hi)}
.demo-note{margin-top:26px;font-size:12.5px;line-height:1.8;color:var(--muted);max-width:50ch}

/* ---------- 卡片 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(282px,100%),1fr));gap:clamp(18px,2.2vw,26px)}
.card{border-radius:var(--r);padding:30px 28px 32px;background:linear-gradient(145deg,#F1F4FB,#DFE4F0);
  box-shadow:9px 9px 20px var(--sh),-9px -9px 20px var(--hi);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:13px 13px 26px var(--sh),-13px -13px 26px var(--hi)}
.ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(145deg,#DFE4F0,#F2F5FC);box-shadow:inset 4px 4px 9px var(--sh),inset -4px -4px 9px var(--hi)}
.ico svg{stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:19px;font-weight:620;letter-spacing:.02em}
.card p{margin-top:10px;font-size:14.5px;line-height:1.8;color:var(--muted)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- 四种纸的 Tab ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:8px;border-radius:var(--r-s);margin-bottom:24px;
  background:linear-gradient(145deg,#DFE4F0,#F0F3FA);box-shadow:inset 5px 5px 11px var(--sh),inset -5px -5px 11px var(--hi)}
.tabs button{flex:1 1 150px;font:14px inherit;border:0;cursor:pointer;color:var(--muted);min-height:48px;border-radius:16px;background:transparent;
  transition:color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.tabs button[aria-selected=true]{color:var(--accent);font-weight:600;background:linear-gradient(145deg,#F2F5FC,#E3E8F3);
  box-shadow:5px 5px 11px var(--sh),-5px -5px 11px var(--hi)}
.panel{display:none;border-radius:var(--r);padding:clamp(26px,3vw,40px);background:linear-gradient(145deg,#F1F4FB,#DFE4F0);
  box-shadow:9px 9px 20px var(--sh),-9px -9px 20px var(--hi)}
.panel.on{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,3vw,40px);align-items:center}
.panel h3{font-size:clamp(20px,2.2vw,26px);font-weight:620}
.panel p{margin-top:14px;color:var(--muted);font-size:15px;line-height:1.85}
.panel .tail{margin-top:16px;font-size:13px;color:var(--accent);opacity:.82;line-height:1.75}
.paper{border-radius:20px;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair),0 12px 26px rgba(28,44,92,.09);
  aspect-ratio:4/3;display:grid;place-items:center;padding:16px}
.paper svg{width:100%;height:auto;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.paper .faint{stroke-opacity:.26}
.paper .fill{fill:var(--accent);stroke:none}

/* ---------- 看一看的步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(246px,100%),1fr));gap:18px}
.step{border-radius:var(--r-s);padding:26px 24px;background:linear-gradient(145deg,#F1F4FB,#DFE4F0);
  box-shadow:7px 7px 16px var(--sh),-7px -7px 16px var(--hi)}
.step .n{font-size:11px;letter-spacing:.2em;color:var(--accent);opacity:.55}
.step h3{margin-top:8px;font-size:17px;font-weight:620}
.step p{margin-top:8px;font-size:14px;line-height:1.8;color:var(--muted)}

/* ---------- 边界 ---------- */
.priv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(304px,100%),1fr));gap:16px}
.priv li{display:flex;gap:14px;align-items:flex-start;border-radius:var(--r-s);padding:22px 24px;
  background:linear-gradient(145deg,#F1F4FB,#E1E6F1);box-shadow:6px 6px 14px var(--sh),-6px -6px 14px var(--hi);
  font-size:14.5px;line-height:1.8;color:var(--muted)}
.mark{flex:none;width:26px;height:26px;margin-top:3px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#DFE4F0,#F2F5FC);box-shadow:inset 2px 2px 5px var(--sh),inset -2px -2px 5px var(--hi)}
.mark svg{stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.note{margin-top:26px;font-size:13px;line-height:1.85;color:var(--muted);max-width:72ch}

/* ---------- 在哪里运行 ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.14em;color:var(--accent);
  padding:5px 13px;border-radius:999px;background:linear-gradient(145deg,#DFE4F0,#F2F5FC);
  box-shadow:inset 2px 2px 5px var(--sh),inset -2px -2px 5px var(--hi);margin-bottom:14px}
.badge b{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.7}

/* ---------- 页脚 ---------- */
footer{position:relative;z-index:1;padding:clamp(56px,7vw,96px) 20px 46px;text-align:center}
.ft-node{margin:0 auto 30px}
.inf{width:min(250px,62vw);height:auto;margin:0 auto;display:block;overflow:visible}
.inf path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);transition:stroke-dashoffset 2.6s var(--ease)}
.inf.drawn path{stroke-dashoffset:0}
.ft-name{margin-top:20px;font-size:15px;letter-spacing:.3em;color:var(--accent)}
.ft-tag{margin-top:12px;font-size:14.5px;color:var(--muted)}
.ft-note{margin:28px auto 0;max-width:64ch;font-size:12px;line-height:1.85;color:var(--muted);opacity:.85}
.ft-bottom{margin-top:28px;display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center;font-size:12px;color:var(--muted)}

/* ---------- 功能演示动画 ----------
   每段演示是一个内联 SVG（.anim）。所有演示共用一个 8 秒节拍：
     d0–d5：一笔一笔画出来（线条要加 pathLength="1"），分别从第 0/12/24/36/48/60% 开始，每步 12%；
     f0–f5：同样的时刻“洇出来”（透明、模糊 → 清楚）。
   画好后停到 86%，94% 之前淡出，然后从头再来。其余类是各段自己的动作（沉下、呼吸、流动、滑动……）。
   只有在屏幕里看得到的时候才动（app.js 给 .anim 加 .playing）；系统开了“减少动态效果”就只显示最后一帧。
   写新演示：先把画面画成“完成时”的样子（这就是静止帧），再挂上 d/f 类。 */
.scene{border-radius:18px;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair),0 8px 20px rgba(28,44,92,.08);margin-bottom:20px;overflow:hidden}
.anim{display:block;width:100%;height:auto;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.anim .faint{stroke-opacity:.28}
.anim .fill{fill:var(--accent);stroke:none}
.anim text{fill:var(--accent);stroke:none;text-anchor:middle;font-family:inherit}
.anim text.start{text-anchor:start}
.t-lang{font-size:30px;font-weight:600}
.t-mark{font-size:20px;font-weight:600}
.anim *{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:var(--ease);animation-play-state:paused}
.anim.playing *{animation-play-state:running}

/* 一笔一笔画出来 */
/* 虚线周期 2.2、偏移 1.1：还没画的线整段落在路径外面，圆头线帽不会留下小点 */
.d0,.d1,.d2,.d3,.d4,.d5,.sink0,.sink1,.re-line,.re-text{stroke-dasharray:1 1.2}
.d0{animation-name:d0}.d1{animation-name:d1}.d2{animation-name:d2}.d3{animation-name:d3}.d4{animation-name:d4}.d5{animation-name:d5}
@keyframes d0{0%{stroke-dashoffset:1.1;opacity:1}12%,86%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes d1{0%,12%{stroke-dashoffset:1.1;opacity:1}24%,86%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes d2{0%,24%{stroke-dashoffset:1.1;opacity:1}36%,86%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes d3{0%,36%{stroke-dashoffset:1.1;opacity:1}48%,86%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes d4{0%,48%{stroke-dashoffset:1.1;opacity:1}60%,86%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes d5{0%,60%{stroke-dashoffset:1.1;opacity:1}72%,86%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}

/* 洇出来：和产品里的“魔法墨”一样，先模糊后清楚 */
.f0{animation-name:f0}.f1{animation-name:f1}.f2{animation-name:f2}.f3{animation-name:f3}.f4{animation-name:f4}.f5{animation-name:f5}
@keyframes f0{0%{opacity:0;filter:blur(4px)}12%,86%{opacity:1;filter:blur(0)}94%,100%{opacity:0;filter:blur(0)}}
@keyframes f1{0%,12%{opacity:0;filter:blur(4px)}24%,86%{opacity:1;filter:blur(0)}94%,100%{opacity:0;filter:blur(0)}}
@keyframes f2{0%,24%{opacity:0;filter:blur(4px)}36%,86%{opacity:1;filter:blur(0)}94%,100%{opacity:0;filter:blur(0)}}
@keyframes f3{0%,36%{opacity:0;filter:blur(4px)}48%,86%{opacity:1;filter:blur(0)}94%,100%{opacity:0;filter:blur(0)}}
@keyframes f4{0%,48%{opacity:0;filter:blur(4px)}60%,86%{opacity:1;filter:blur(0)}94%,100%{opacity:0;filter:blur(0)}}
@keyframes f5{0%,60%{opacity:0;filter:blur(4px)}72%,86%{opacity:1;filter:blur(0)}94%,100%{opacity:0;filter:blur(0)}}

/* 魔法书 / 手写：你的字写出来，再沉进纸里；中间一滴墨在呼吸；笔跟着第一行走 */
.sink0{animation-name:sink0}.sink1{animation-name:sink1}
@keyframes sink0{0%{stroke-dashoffset:1.1;opacity:1;transform:none;filter:blur(0)}12%,30%{stroke-dashoffset:0;opacity:1;transform:none;filter:blur(0)}44%,100%{stroke-dashoffset:0;opacity:0;transform:translateY(10px);filter:blur(3px)}}
@keyframes sink1{0%,12%{stroke-dashoffset:1.1;opacity:1;transform:none;filter:blur(0)}24%,30%{stroke-dashoffset:0;opacity:1;transform:none;filter:blur(0)}44%,100%{stroke-dashoffset:0;opacity:0;transform:translateY(10px);filter:blur(3px)}}
.breathe{transform-box:fill-box;transform-origin:center;animation-name:breathe}
@keyframes breathe{0%,34%{opacity:0;transform:scale(.3)}38%{opacity:1;transform:scale(1)}42%{transform:scale(1.35)}46%{transform:scale(1)}50%{opacity:1;transform:scale(1.3)}56%,100%{opacity:0;transform:scale(1)}}
.pen{stroke-width:3.4;opacity:0;animation-name:pen}
@keyframes pen{0%{opacity:1;transform:translate(60px,48px)}12%{opacity:1;transform:translate(172px,48px)}15%,100%{opacity:0;transform:translate(172px,48px)}}

/* 语音：你说话时声波在跳，它回答时线在呼吸 */
.talk{transform-box:fill-box;transform-origin:center;animation-name:talk}
.talk.b2{animation-delay:-.15s}.talk.b3{animation-delay:-.3s}.talk.b4{animation-delay:-.45s}
@keyframes talk{0%{transform:scaleY(.4)}4%{transform:scaleY(1)}8%{transform:scaleY(.5)}12%{transform:scaleY(1)}16%{transform:scaleY(.45)}20%,54%{transform:scaleY(.2)}58%{transform:scaleY(1)}62%{transform:scaleY(.5)}66%{transform:scaleY(1)}70%,100%{transform:scaleY(.2)}}
.pulse{transform-box:fill-box;transform-origin:center;animation-name:pulse}
@keyframes pulse{0%,22%{opacity:.5;transform:scale(.9)}26%{opacity:1;transform:scale(1)}30%{transform:scale(1.07)}34%{transform:scale(1)}38%{transform:scale(1.07)}42%{transform:scale(1)}46%{transform:scale(1.07)}50%{opacity:1;transform:scale(1)}56%,100%{opacity:.5;transform:scale(.9)}}

/* 看一看：快门一闪 */
.flash{fill:var(--accent);stroke:none;opacity:0;animation-name:flash}
@keyframes flash{0%,46%{opacity:0}48%{opacity:.3}56%,100%{opacity:0}}

/* 说一声就到纸上：主界面暂停，滑到纸上，再回来 */
.slide{animation-name:slide}
@keyframes slide{0%,30%{transform:translateX(0)}40%,76%{transform:translateX(-220px)}86%,100%{transform:translateX(0)}}
.paused{opacity:0;animation-name:paused}
@keyframes paused{0%,24%{opacity:0}30%,84%{opacity:1}88%,100%{opacity:0}}
.back{opacity:0;animation-name:back}
@keyframes back{0%,62%{opacity:0}66%,78%{opacity:1}82%,100%{opacity:0}}

/* 三种语言轮流出现 */
.l1,.l2{opacity:0}
.l0{animation-name:l0}.l1{animation-name:l1}.l2{animation-name:l2}
@keyframes l0{0%,28%{opacity:1}33%,95%{opacity:0}100%{opacity:1}}
@keyframes l1{0%,33%{opacity:0}38%,61%{opacity:1}66%,100%{opacity:0}}
@keyframes l2{0%,66%{opacity:0}71%,94%{opacity:1}99%,100%{opacity:0}}

/* 共创画布：下面那个分支被擦掉，又长回来 */
.re-line{animation-name:reline}.re-text{animation-name:retext}.re-box{animation-name:rebox}
@keyframes reline{0%,24%{stroke-dashoffset:1.1;opacity:1}36%,58%{stroke-dashoffset:0;opacity:1}63%{stroke-dashoffset:0;opacity:0}64%,70%{stroke-dashoffset:1.1;opacity:0}71%{stroke-dashoffset:1.1;opacity:1}80%,86%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes rebox{0%,36%{opacity:0}44%,58%{opacity:1}63%,78%{opacity:0}84%,86%{opacity:1}94%,100%{opacity:0}}
@keyframes retext{0%,40%{stroke-dashoffset:1.1;opacity:1}48%,58%{stroke-dashoffset:0;opacity:1}63%{stroke-dashoffset:0;opacity:0}64%,82%{stroke-dashoffset:1.1;opacity:0}83%{stroke-dashoffset:1.1;opacity:1}86%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
.eraser{fill:#FFFFFF;opacity:0;animation-name:eraser}
@keyframes eraser{0%,52%{opacity:0;transform:translate(112px,128px)}54%{opacity:1;transform:translate(112px,128px)}62%{opacity:1;transform:translate(232px,142px)}64%,100%{opacity:0;transform:translate(232px,142px)}}

/* 画画：草图画完后退成淡淡的底（静止帧就是退淡后的样子）；成品是几块淡蓝色的面，在原处洇出来 */
.sketch{opacity:.2;animation-name:sketch}
@keyframes sketch{0%,46%{opacity:1}58%,86%{opacity:.2}94%,100%{opacity:0}}
.anim .pic{fill:rgba(0,47,167,.06);stroke-opacity:.5}
.anim .soft{fill:rgba(0,47,167,.22);stroke:none}
.anim .solid{fill:rgba(0,47,167,.6);stroke:none}
.anim .hole{fill:#FFFFFF;stroke:none}

/* 眼镜：镜片里的线和字幕 → 不说话熄屏 → 一开口又亮 */
.lens{animation-name:sleep}
@keyframes sleep{0%,50%{opacity:1}56%,74%{opacity:.08}80%,100%{opacity:1}}
.wake{opacity:0;animation-name:wake}
@keyframes wake{0%,70%{opacity:0}73%,82%{opacity:1}86%,100%{opacity:0}}

/* 通栏卡片（眼镜）：左边文字，右边演示；在 .grid 里占满一整行 */
.wide{grid-column:1/-1;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(22px,3vw,40px);align-items:center}
.wide h3{font-size:clamp(20px,2.2vw,26px)}
.wide .scene{margin-bottom:0}
.card .tail{margin-top:12px;font-size:13px;line-height:1.75;color:var(--accent);opacity:.82}

@media(max-width:920px){
  .hero-grid,.demo{grid-template-columns:1fr}
  .panel.on,.wide{grid-template-columns:1fr}
  .bar nav{display:none}
  .hero{min-height:auto;padding-top:106px}
  #thread{opacity:.6}
}
@media(max-width:560px){
  .sec,.hero{padding-left:16px;padding-right:16px}
  .card{padding:24px 22px 26px}
  .bar-inner{padding:8px 10px 8px 14px}
  .brand span{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.chip,.btn,.tabs button{transition:none}
  .inf path{transition:none;stroke-dashoffset:0}
  .anim *{animation:none!important}
  .anim .sink0,.anim .sink1{stroke-opacity:.28}
  .anim .breathe{opacity:0} /* 静止帧是“完成时”：等待的那滴墨不留在画面上 */
}