/* 视觉方向：亚马逊编辑风
   - 舞台（操作手机）沿用亚马逊发布配图：蓝色渐变 + 白色手机
   - 开场 / 原理 / 收尾：白底墨黑大字，亚马逊蓝只点缀关键处；用字号与粗细分层级，不用发光和卡片
   - 动效只用淡入、轻微位移、遮罩擦除和慢速镜头，不用呼吸、流光、回弹 */

:root{
  --stage-a:#0b3d91;
  --stage-b:#1462cc;
  --stage-c:#2b84ea;
  --paper:#ffffff;
  --ink:#0f1111;
  --ink-2:#565959;
  --ink-3:#8d9191;
  --hair:#d5d9d9;
  --blue:#1066c9;
  --line:#e3e6e6;
  --chip:#d4e9fc;
  --link:#1f6fbf;
  --star:#ffa41c;
  --send:#1f8fff;
  --font:"MiSans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,system-ui,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.7,.2,1);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font);overflow:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 0}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
svg{display:block}

/* 背景：舞台为蓝色，其余为白纸 */
.bg{position:fixed;inset:0;transition:opacity 1s var(--ease)}
.bg-blue{background:radial-gradient(1100px 700px at 85% 0%,rgba(110,190,255,.55),transparent 60%),radial-gradient(900px 600px at 0% 100%,rgba(5,30,90,.55),transparent 60%),linear-gradient(135deg,var(--stage-a) 0%,var(--stage-b) 50%,var(--stage-c) 100%);opacity:0}
.bg-paper{background:var(--paper);opacity:1}
body.mode-stage .bg-blue{opacity:1}
body.mode-stage .bg-paper{opacity:0}

/* 1600×900 画布，等比缩放适配屏幕 */
#viewport{position:fixed;inset:0;overflow:hidden}
#canvas{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:center center;transform:translate(-50%,-50%)}

/* ---------- 开场 ---------- */
#intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .7s var(--ease)}
body:not(.mode-intro) #intro{opacity:0;pointer-events:none}
.i-kicker{font-size:17px;letter-spacing:.14em;color:var(--ink-2);opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.i-pill{display:flex;align-items:center;gap:18px;height:80px;width:80px;padding:0 26px;border-radius:40px;background:#fff;border:1px solid var(--hair);box-shadow:0 18px 40px rgba(15,17,17,.08);overflow:hidden;opacity:0;transition:width 1.2s var(--ease),opacity .6s var(--ease)}
.i-glyph{flex:none;width:28px;height:28px}
.i-glyph svg{width:28px;height:28px}
.pill-text{color:var(--ink);font-size:32px;white-space:nowrap}
.pill-caret{width:2px;height:34px;background:var(--blue);animation:blink 1.1s steps(1) infinite;flex:none}
#intro.k-in .i-kicker{opacity:1;transform:none}
#intro.p-in .i-pill{opacity:1}
#intro.open .i-pill{width:900px}
#intro:not(.open) .pill-caret{display:none}
@keyframes blink{50%{opacity:0}}

/* ---------- 时间标签 ---------- */
#timepill{position:absolute;left:420px;top:390px;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:translateX(16px);transition:opacity .5s,transform .5s;pointer-events:none}
#timepill.show{opacity:1;transform:none}
body:not(.mode-stage) #timepill{opacity:0}
.tp-icon{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--stage-b)}
.tp-icon svg{width:26px;height:26px}
.tp-text{background:var(--stage-b);color:#fff;border:2px solid #fff;font-size:18px;font-weight:500;padding:10px 16px;border-radius:6px;max-width:150px;text-align:center;line-height:1.3}

/* ---------- 手机 ---------- */
#phone-wrap{position:absolute;left:610px;top:46px;width:380px;height:808px;transition:opacity .7s var(--ease),transform 1s var(--ease)}
body.mode-intro #phone-wrap,body.mode-outro #phone-wrap{opacity:0;transform:translateY(40px) scale(.97);pointer-events:none}
body.mode-reveal #phone-wrap{transform:translateX(-170px)}
.phone{position:relative;width:100%;height:100%;background:#fff;border-radius:46px;overflow:hidden;display:grid;grid-template-rows:46px 50px 1fr auto 58px 20px;box-shadow:0 40px 90px rgba(0,25,80,.45),0 0 0 1px rgba(255,255,255,.6);transition:box-shadow .8s var(--ease)}
body.mode-reveal .phone,.o-item .phone{box-shadow:0 30px 70px rgba(15,17,17,.14),0 0 0 1px var(--line)}
.status{display:flex;align-items:center;justify-content:space-between;padding:12px 28px 0 34px;font-size:15px;font-weight:500}
.status-icons svg{width:66px;height:13px}
.app-head{display:flex;align-items:center;gap:8px;padding:0 16px}
.ico{width:22px;height:22px;color:var(--ink);display:grid;place-items:center}
.ico svg{width:20px;height:20px}
.wordmark{font-size:14px;color:#3a4553}
.wordmark i{font-style:italic;font-weight:600;color:#1fa5e8;font-size:16px;margin-right:2px}
.head-right{margin-left:auto;display:flex;gap:12px}

.screen{overflow-y:auto;padding:14px 18px 10px;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.home h3{margin:0;font-size:19px;font-weight:600;color:var(--ink)}
.home p{margin:2px 0 0;font-size:15px;color:var(--ink)}
.home .switch{font-size:12px;color:var(--ink-2)}
.home a,.ai-note a{color:var(--link)}
.home .sec{margin:18px 0 8px;font-weight:600;font-size:15px}
.chips{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.chip{background:var(--chip);color:var(--ink);font-size:13.5px;padding:7px 11px;border-radius:9px;line-height:1.3}
.ai-note{margin-top:16px!important;font-size:11.5px!important;color:var(--ink-2)!important;line-height:1.45}
.home.gone{display:none}

.convo{display:flex;flex-direction:column;gap:12px}
.u-msg{align-self:flex-end;background:#eef1f4;border-radius:18px;padding:8px 14px;font-size:14px;max-width:85%;animation:rise .4s var(--ease) backwards}
.ai{font-size:14px;line-height:1.55;color:var(--ink);animation:rise .45s var(--ease) backwards}
.ai b{font-weight:600}
.thinking{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13px}
.thinking .spark{width:16px;height:16px;animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ai .chips{flex-direction:row;flex-wrap:wrap;margin-top:8px}

.prow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.prod .pimg{height:92px;border-radius:8px;background:#f3f4f6;display:grid;place-items:center}
.prod .pimg svg{width:64px;height:64px}
.prod .rate{font-size:11.5px;color:var(--ink-2);margin-top:6px;display:flex;align-items:center;gap:3px}
.prod .rate b{color:var(--ink);font-weight:500}
.prod .rate svg{width:11px;height:11px;color:var(--star)}
.prod .price{font-size:14px;font-weight:600;margin-top:1px}
.prod .pname{font-size:11.5px;color:var(--ink-2);line-height:1.35;margin-top:1px}
.prod.pick .pimg{outline:2px solid var(--send);outline-offset:-2px}

.saved{border:1px solid var(--line);border-radius:12px;padding:12px 14px;animation:rise .45s var(--ease) backwards}
.saved-top{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;margin-bottom:8px}
.saved-top svg{width:18px;height:18px;color:var(--ink)}
.saved p{margin:0 0 6px;font-size:13px;line-height:1.5}
.saved p b{font-weight:600}
.saved .fine{font-size:11px;color:var(--ink-2)}
.mini-chart{margin:6px 0 8px;border-radius:8px;background:#f7f8fa;padding:8px 10px}
.mini-chart svg{width:100%;height:auto}
.mini-chart .leg{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-2)}
.order-row{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;margin-bottom:8px}
.order-row .pimg{height:64px;border-radius:8px;background:#f3f4f6;display:grid;place-items:center}
.order-row .pimg svg{width:46px;height:46px}
.kv{display:grid;grid-template-columns:4.6em 1fr;gap:3px 8px;font-size:12.5px}
.kv dt{color:var(--ink-2)}.kv dd{margin:0}

/* 输入栏：平时一行（加号 · 文字 · 语音）；带"定时任务"标签时文字单独一行，下面是加号 · 标签 · 发送 */
.composer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"plus field act";align-items:center;column-gap:10px;row-gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.composer.has-tok{grid-template-areas:"field field field" "plus tok act"}
.plus{grid-area:plus;width:34px;height:34px;border-radius:50%;border:1px solid #c9cdd2;display:grid;place-items:center}
.plus svg{width:16px;height:16px}
.field{grid-area:field;display:block;font-size:14px;line-height:1.45;min-height:20px;word-break:break-word}
.composer.has-tok .field{padding:0 4px}
.tok{grid-area:tok;justify-self:start;display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--send);color:#0b4f9c;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:500;background:#eaf4ff}
.tok-x svg{width:10px;height:10px}
.typed{color:var(--ink)}
.ghost{color:#9aa0a6}
.caret{display:inline-block;width:1.5px;height:1.15em;vertical-align:-.22em;margin:0 1px;background:var(--send);animation:blink 1s steps(1) infinite}
.caret.solid{animation:none}
.act{grid-area:act;display:flex}
.mic,.sendbtn{width:34px;height:34px;display:grid;place-items:center;flex:none}
.mic svg{width:20px;height:20px}
.sendbtn{border-radius:50%;background:var(--send);color:#fff}
.sendbtn svg{width:18px;height:18px}
.tabbar{display:flex;justify-content:space-around;align-items:center;border-top:1px solid var(--line);color:var(--ink)}
.tabbar svg{width:24px;height:24px}
.tab-on{border-top:2px solid #1fa5e8;padding-top:6px;margin-top:-8px}
.homebar{display:grid;place-items:center}
.homebar::after{content:"";width:130px;height:5px;border-radius:3px;background:var(--ink)}

/* 弹出面板 */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .3s;z-index:6}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 46px 46px;padding:16px 16px 34px;transform:translateY(105%);transition:transform .4s var(--ease);z-index:7}
.phone.sheet-open .scrim{opacity:1}
.phone.sheet-open .sheet{transform:none}
.sheet-x{position:absolute;right:16px;top:12px;width:14px;height:14px}
.sheet-x svg{width:14px;height:14px}
.sheet-tiles{display:flex;gap:14px;margin-top:6px}
.tile{width:52px;height:52px;border-radius:12px;background:#f3f4f6;display:grid;place-items:center}
.tile svg{width:24px;height:24px}
.sheet-labels{display:flex;gap:14px;font-size:12px;margin:6px 0 12px}
.sheet-labels span{width:52px;text-align:center}
.sheet-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px}
.sheet-row b{display:block;font-size:13.5px;font-weight:500}
.sheet-row span{font-size:11.5px;color:var(--ink-2)}
.sheet-row em{font-style:normal;font-size:11px;background:#eaf4ff;color:#0b4f9c;padding:2px 8px;border-radius:999px}

/* 锁屏 */
.lock{position:absolute;inset:0;z-index:8;opacity:0;pointer-events:none;transition:opacity .5s;color:#fff;text-align:center;padding-top:96px;
  background:radial-gradient(420px 300px at 85% 85%,rgba(20,90,170,.9),transparent 70%),radial-gradient(380px 360px at 10% 90%,rgba(40,170,210,.85),transparent 70%),linear-gradient(170deg,#f7c9b4 0%,#f3a3b4 38%,#5fb6dc 70%,#1d6fb6 100%)}
.phone.locked .lock{opacity:1}
.lock-date{font-size:17px;font-weight:500}
.lock-time{font-size:84px;font-weight:600;line-height:1;letter-spacing:-.02em;margin-top:2px}
.notif{position:absolute;z-index:2;left:12px;right:12px;bottom:110px;display:flex;gap:10px;text-align:left;padding:12px;border-radius:20px;background:rgba(40,40,48,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translateY(30px);opacity:0;transition:opacity .45s,transform .5s var(--ease)}
.notif.show{transform:none;opacity:1}
.notif-app{width:38px;height:38px;border-radius:9px;background:#fff;display:grid;place-items:center;flex:none}
.notif-app svg{width:22px;height:22px}
.notif-top{display:flex;justify-content:space-between;font-size:13px}
.notif-top span{opacity:.7;font-size:12px}
.notif p{margin:2px 0 0;font-size:13px;line-height:1.4}

/* 点击指示 */
.tap{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(31,143,255,.5);opacity:0;pointer-events:none;z-index:9;transform:scale(.6)}
.tap.go{animation:tap .7s ease}
@keyframes tap{0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}

/* ---------- 原理页：手机盖一层深灰遮罩（与"+"面板背后的遮罩相同），只把正在讲的元素"抠"出来 ---------- */
.dim{position:absolute;inset:0;background:rgba(15,17,17,.46);opacity:0;pointer-events:none;transition:opacity .7s var(--ease);z-index:10}
body.mode-reveal .dim{opacity:1}
.lit{position:relative;z-index:11;border-radius:10px;background-color:#fff;box-shadow:0 0 0 7px #fff,0 14px 34px rgba(0,0,0,.3)}
.notif.lit{position:absolute;background-color:rgba(40,40,48,.94);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.phone.lock-focus .lock{z-index:11}
.phone.lock-focus .lock::before{content:"";position:absolute;inset:0;background:rgba(15,17,17,.46)}

#reveal{position:absolute;inset:0;pointer-events:none;transition:opacity .6s var(--ease)}
body:not(.mode-reveal) #reveal{opacity:0}
.rv-text{position:absolute;left:64px;top:0;bottom:0;width:340px;display:flex;flex-direction:column;justify-content:center}
.rv-kicker{font-size:16px;letter-spacing:.12em;color:var(--blue);margin-bottom:18px}
.rv-text h2{margin:0;color:var(--ink);font-size:46px;line-height:1.18;font-weight:600;letter-spacing:-.01em}
.rv-text p{margin:24px 0 0;color:var(--ink-2);font-size:20px;line-height:1.75}
.rv-text > *{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-text.in > *{opacity:1;transform:none}
.rv-text.in > :nth-child(2){transition-delay:.12s}
.rv-text.in > :nth-child(3){transition-delay:.24s}

.rv-flow{position:absolute;left:1000px;width:520px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.mod{display:grid;grid-template-columns:44px minmax(0,1fr);padding:18px 0 20px;border-top:1px solid var(--hair);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mod:last-child{border-bottom:1px solid var(--hair)}
.mod.in{opacity:1;transform:none}
.mod .n{font-style:normal;font-size:18px;color:var(--ink-3);padding-top:4px;font-variant-numeric:tabular-nums;transition:color .5s}
.mod b{display:block;font-size:24px;font-weight:500;line-height:1.35;color:var(--ink-2);transition:color .5s}
.mod span{display:block;font-size:18px;color:var(--ink-3);margin-top:4px;line-height:1.6;transition:color .5s}
.mod.on .n{color:var(--blue)}
.mod.on b{color:var(--ink)}
.mod.on span{color:var(--ink-2)}
.mod .models{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mod .models i{font-style:normal;font-size:16px;padding:6px 12px;border-radius:8px;background:#f0f2f2;color:var(--ink-2)}
.mod .models i.pick{background:#e6f0fb;color:var(--blue)}
.mod pre{margin:12px 0 0;padding:12px 14px;border-radius:8px;background:#f7f8f8;font-family:var(--mono);font-size:15px;line-height:1.65;color:var(--ink);white-space:pre}
.mod pre em{font-style:normal;color:var(--blue)}
.rv-wires{position:absolute;inset:0;width:1600px;height:900px;overflow:visible}
.wire-g{transition:opacity .6s var(--ease)}
.wire-g.past{opacity:.28}
.wire{fill:none;stroke:var(--ink-2);stroke-width:1.2;transition:stroke-dashoffset .6s var(--ease)}
.wire-end{fill:var(--blue)}
.wire-start{fill:var(--ink-2)}

/* ---------- 收尾 ---------- */
/* 四部手机：横排 → 成环旋转 → 收束到中心（位置由 JS 逐帧计算）；之后展开标题和四项技术 */
#outro{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
body.mode-outro #outro{opacity:1}
.o-stage{position:absolute;inset:0}
.o-item{position:absolute;left:800px;top:450px;width:380px;height:808px;margin:-404px 0 0 -190px;transform-origin:center center;will-change:transform,opacity;opacity:0}
.o-label{position:absolute;top:100%;left:-140px;right:-140px;margin-top:44px;text-align:center;color:var(--ink);font-size:40px;font-weight:500;line-height:1.3}
.o-label em{display:block;font-style:normal;font-size:30px;color:var(--blue);margin-bottom:8px}

.o-final{position:absolute;left:160px;right:160px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.o-kicker{font-size:17px;letter-spacing:.14em;color:var(--ink-2)}
.o-title{margin:22px 0 0;color:var(--ink);font-size:84px;line-height:1.12;font-weight:600;letter-spacing:-.015em}
.o-title em{font-style:normal;color:var(--blue)}
.o-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px;margin-top:84px}
.o-col{position:relative;padding-top:22px}
.o-col::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.o-col i{display:block;font-style:normal;font-size:18px;color:var(--blue)}
.o-col b{display:block;font-size:28px;font-weight:500;margin-top:10px;line-height:1.3}
.o-col span{display:block;font-size:20px;color:var(--ink-2);margin-top:8px;line-height:1.5}
.o-col > *{opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease)}

.o-kicker,.o-title{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.o-title{clip-path:inset(0 0 100% 0);transition:opacity .9s var(--ease),transform 1s var(--ease),clip-path 1s var(--ease)}
.o-final.open .o-kicker{opacity:1;transform:none}
.o-final.open .o-title{opacity:1;transform:none;clip-path:inset(0 0 0 0);transition-delay:.15s}
.o-final.open .o-col::before{transform:none}
.o-final.open .o-col > *{opacity:1;transform:none}
.o-final.open .o-col:nth-child(1)::before{transition-delay:.7s}.o-final.open .o-col:nth-child(1) > *{transition-delay:1s}
.o-final.open .o-col:nth-child(2)::before{transition-delay:.85s}.o-final.open .o-col:nth-child(2) > *{transition-delay:1.15s}
.o-final.open .o-col:nth-child(3)::before{transition-delay:1s}.o-final.open .o-col:nth-child(3) > *{transition-delay:1.3s}
.o-final.open .o-col:nth-child(4)::before{transition-delay:1.15s}.o-final.open .o-col:nth-child(4) > *{transition-delay:1.45s}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}