.vbar-top{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:14px 24px}.vbar-top b{color:var(--navy);font-size:15px}.vbar-top a{color:var(--ink-soft);text-decoration:none;font-size:13.5px;font-weight:600}.vbar-top a:hover{color:var(--navy)}.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}@media(max-width:760px){.ex-grid{grid-template-columns:1fr;gap:22px}}.ex-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px 28px;box-shadow:var(--sh-sm);display:flex;flex-direction:column}.ex-panel .ex-kicker{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;padding:5px 14px;border-radius:var(--r-pill);margin-bottom:6px}.ex-panel.web .ex-kicker{color:var(--ink-soft);background:var(--bg-soft)}.ex-panel.agent .ex-kicker{color:#fff;background:var(--navy)}.ex-panel h3{color:var(--navy);font-size:18px;line-height:1.5;margin:8px 0 4px}.ex-panel .ex-sub{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px;min-height:2.4em}.stage{position:relative;border-radius:var(--r);height:300px;overflow:hidden;background:var(--bg-mist);border:1px solid var(--line)}.browser{position:absolute;inset:18px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;overflow:hidden}.browser .bar{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--bg-soft)}.browser .bar .dot{width:9px;height:9px;border-radius:50%;background:#cbcbc3}.browser .bar .url{flex:1;margin-left:8px;height:16px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;padding:0 9px;font-size:9px;color:var(--ink-soft);letter-spacing:.02em;overflow:hidden;white-space:nowrap}.browser .body{flex:1;padding:14px 14px 12px;display:flex;flex-direction:column;gap:9px;position:relative}.bubble{max-width:78%;font-size:12px;line-height:1.6;padding:8px 11px;border-radius:12px;opacity:0}.bubble.q{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}.bubble.a{align-self:flex-start;background:var(--bg-soft);color:var(--ink);border-bottom-left-radius:4px}.copy-hand{position:absolute;right:14px;bottom:12px;display:flex;align-items:center;gap:7px;opacity:0}.copy-hand .lbl{font-size:10.5px;font-weight:700;color:var(--cyan-deep);background:#fff;border:1px solid var(--cyan);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}.copy-hand .hand{width:24px;height:24px;color:var(--navy)}.stage.run .bubble.q{animation:webQ 8s infinite}.stage.run .bubble.a{animation:webA 8s infinite}.stage.run .copy-hand{animation:webCopy 8s infinite}@keyframes webQ{0%{opacity:0;transform:translateY(6px)}6%{opacity:1;transform:none}88%{opacity:1}96%,to{opacity:0}}@keyframes webA{0%,18%{opacity:0;transform:translateY(6px)}26%{opacity:1;transform:none}88%{opacity:1}96%,to{opacity:0}}@keyframes webCopy{0%,40%{opacity:0;transform:translate(6px)}50%{opacity:1;transform:none}60%{transform:translateY(-3px)}70%{transform:none}88%{opacity:1}96%,to{opacity:0}}.pc{position:absolute;inset:18px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;overflow:hidden}.pc .titlebar{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--navy);color:#fff}.pc .titlebar .dot{width:9px;height:9px;border-radius:50%;background:#ffffff8c}.pc .titlebar .t{margin-left:6px;font-size:10px;letter-spacing:.06em;opacity:.9}.pc .desktop{flex:1;position:relative;padding:16px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}.app{position:relative;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:.2s}.app .glyph{width:26px;height:26px;color:var(--navy)}.app .name{font-size:11px;font-weight:700;color:var(--navy);letter-spacing:.02em}.app.word{border-top:3px solid var(--navy)}.app.excel{border-top:3px solid var(--cyan-deep)}.app.ppt{border-top:3px solid var(--navy-grad)}.app.mail{border-top:3px solid var(--cyan)}.cells{display:flex;gap:3px;margin-top:2px}.cells .cell{width:9px;height:9px;border:1px solid var(--line);border-radius:2px;background:#fff;transition:background .25s}.check{position:absolute;top:6px;right:7px;width:15px;height:15px;border-radius:50%;background:var(--cyan-deep);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4)}.check svg{width:9px;height:9px}.agent-bot{position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-grad));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-md);z-index:5}.agent-bot svg{width:16px;height:16px}.stage.run .agent-bot{animation:botMove 10s infinite}@keyframes botMove{0%{transform:translate(8px,8px)}18%{transform:translate(132px,8px)}62%{transform:translate(132px,8px)}78%{transform:translate(8px,120px)}92%,to{transform:translate(8px,8px)}}.stage.run .app.excel{animation:appFocus 10s infinite}@keyframes appFocus{0%,16%{box-shadow:none;border-color:var(--line)}24%{box-shadow:0 0 0 2px var(--cyan)}62%{box-shadow:0 0 0 2px var(--cyan)}72%,to{box-shadow:none;border-color:var(--line)}}.stage.run .app.excel .cell:nth-child(1){animation:cellFill 10s infinite;animation-delay:.2s}.stage.run .app.excel .cell:nth-child(2){animation:cellFill 10s infinite;animation-delay:.2s}.stage.run .app.excel .cell:nth-child(3){animation:cellFill 10s infinite;animation-delay:.2s}.stage.run .app.excel .cell:nth-child(1){animation:cellFill1 10s infinite}.stage.run .app.excel .cell:nth-child(2){animation:cellFill2 10s infinite}.stage.run .app.excel .cell:nth-child(3){animation:cellFill3 10s infinite}@keyframes cellFill1{0%,26%{background:#fff}32%,70%{background:var(--cyan)}80%,to{background:#fff}}@keyframes cellFill2{0%,34%{background:#fff}40%,70%{background:var(--cyan)}80%,to{background:#fff}}@keyframes cellFill3{0%,42%{background:#fff}48%,70%{background:var(--cyan)}80%,to{background:#fff}}.stage.run .app.excel .check{animation:checkPop 10s infinite}@keyframes checkPop{0%,52%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}80%,to{opacity:0;transform:scale(.4)}}.ex-caption{max-width:760px;margin:34px auto 0;text-align:center;font-size:15.5px;color:var(--ink);line-height:1.85}.ex-caption strong{color:var(--navy)}@media(prefers-reduced-motion:reduce){.stage.run .bubble.q,.stage.run .bubble.a,.stage.run .copy-hand,.stage.run .agent-bot,.stage.run .app.excel,.stage.run .app.excel .cell,.stage.run .app.excel .check{animation:none!important}.bubble,.copy-hand{opacity:1!important;transform:none!important}.agent-bot{transform:translate(132px,8px)!important}.app.excel{box-shadow:0 0 0 2px var(--cyan)}.app.excel .cell{background:var(--cyan)!important}.check{opacity:1!important;transform:scale(1)!important}}