.ftth-story{background:#fff}.bot-story{background:#f6f8fc}.portal-story{background:#eef3fb}
.product-tour{position:relative;margin:0;min-width:0}.product-tour:before{content:"";position:absolute;inset:-18px;background:linear-gradient(130deg,rgba(31,102,242,.13),rgba(53,213,255,.06));border-radius:32px;transform:rotate(-2deg)}
.product-tour-scene{position:relative;overflow:hidden;border:1px solid #cbd7e8;border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.product-tour-bar{height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;border-bottom:1px solid #dfe6f0;background:#f8fafc;color:#64748b;font-size:10px;font-weight:700;white-space:nowrap}.product-tour-bar>span:last-child{color:#2563eb;font-size:9px;letter-spacing:.08em}.tour-dots{display:flex;gap:4px}.tour-dots i{width:6px;height:6px;border-radius:50%;background:#cbd5e1}.tour-dots i:first-child{background:#f5aaa5}.tour-dots i:nth-child(2){background:#f5d087}.tour-dots i:nth-child(3){background:#a6debb}
.product-tour-crop{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f8fafc}.product-tour-crop img{width:100%;height:auto;max-width:none;display:block}.tour-pointer{position:absolute;z-index:3;left:36%;top:29%;width:20px;height:26px;opacity:0;filter:drop-shadow(0 2px 2px rgba(15,23,42,.5));transition:left .55s ease,top .55s ease,opacity .2s;pointer-events:none}.tour-pointer:before{content:"";display:block;width:100%;height:100%;background:#fff;clip-path:polygon(0 0,0 81%,27% 61%,47% 100%,62% 91%,42% 55%,74% 55%);filter:drop-shadow(0 0 1px #0f172a)}.product-tour.is-playing .tour-pointer{opacity:1}
.product-tour>figcaption{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;padding-top:10px;color:#657289;font-size:.82rem}.tour-replay{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border:1px solid #cbd7e8;border-radius:8px;background:#fff;color:#2563eb;cursor:pointer}.tour-replay:before{content:"↺";font-size:20px;line-height:1}.tour-replay i,.tour-replay svg{display:none}.tour-replay:hover{background:#eaf1ff}
.bot-canvas{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:12px;aspect-ratio:16/10;padding:15px;background:radial-gradient(circle at 8% 13%,rgba(31,102,242,.08),transparent 35%),#f4f7fc;overflow:hidden}.bot-flow{display:flex;align-items:center;flex-direction:column;min-width:0}.bot-flow-title{align-self:stretch;display:flex;justify-content:space-between;gap:5px;margin-bottom:10px;color:#344054;font-size:11px;font-weight:800}.bot-flow-title span{color:#2563eb;font-size:9px}.bot-node{width:min(100%,250px);padding:9px 11px;border:1px solid #d7e0ed;border-radius:9px;background:#fff;box-shadow:0 3px 10px rgba(7,21,47,.06);transition:border-color .3s,box-shadow .3s,transform .3s}.bot-node.is-active{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.11),0 8px 18px rgba(7,21,47,.08);transform:translateY(-2px)}.bot-node small,.bot-node strong,.bot-node>span{display:block}.bot-node small{color:#2563eb;font-size:9px;font-weight:800;text-transform:uppercase}.bot-node strong{color:#1d2939;font-size:11px;margin:3px 0}.bot-node>span{color:#667085;font-size:9px}.bot-connector{height:11px;width:2px;background:#b9c8de}.bot-chat{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #d7e0ed;border-radius:11px;background:#fff;box-shadow:0 8px 20px rgba(7,21,47,.07)}.bot-chat-head{display:flex;align-items:center;gap:8px;padding:9px;border-bottom:1px solid #e4e7ec;color:#1d2939;font-size:10px;font-weight:800}.bot-chat-head small{display:block;color:#667085;font-size:9px;font-weight:500}.bot-chat-avatar{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#2563eb;color:#fff;font-size:9px}.bot-chat-messages{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 9px;background:#f9fafb;overflow:hidden}.bot-chat-messages p{max-width:90%;margin:0;padding:7px 9px;border:1px solid #e4e7ec;border-radius:9px 9px 9px 2px;background:#fff;color:#344054;font-size:9px;line-height:1.35;opacity:0;transform:translateY(7px);transition:opacity .3s,transform .3s}.bot-chat-messages p.is-visible{opacity:1;transform:none}.bot-chat-messages p.from-user{align-self:flex-end;border-color:#2563eb;border-radius:9px 9px 2px 9px;background:#2563eb;color:#fff}.bot-chat-input{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-top:1px solid #e4e7ec;color:#98a2b3;font-size:9px}.bot-chat-input i{width:12px;color:#2563eb}.bot-scene .tour-pointer{left:43%;top:21%}
@media(max-width:900px){.product-tour{width:min(100%,680px);margin:auto}}
@media(max-width:600px){.product-tour-scene{border-radius:12px}.product-tour-bar{height:29px;font-size:8px;padding:0 8px}.bot-canvas{display:flex;flex-direction:column;aspect-ratio:auto;min-height:500px;gap:12px;padding:12px}.bot-flow{flex:0 0 auto}.bot-flow-title{font-size:11px;margin-bottom:8px}.bot-node{width:min(100%,280px);padding:7px 10px;border-radius:7px}.bot-node strong{font-size:10px;margin:2px 0}.bot-node small,.bot-node>span{font-size:8px}.bot-connector{height:7px}.bot-chat{flex:1;min-height:210px}.bot-chat-head{padding:7px;font-size:10px}.bot-chat-head small{font-size:8px}.bot-chat-avatar{width:24px;height:24px;font-size:8px}.bot-chat-messages{padding:7px;gap:5px}.bot-chat-messages p{font-size:9px;padding:5px 7px}.bot-chat-input{padding:7px;font-size:9px}.product-tour>figcaption{font-size:.75rem}}
.tour-pointer.is-clicking:before{animation:tour-pointer-press .5s ease-out}
.tour-pointer.is-clicking:after{content:"";position:absolute;left:-10px;top:-10px;width:20px;height:20px;border:2px solid #2563eb;border-radius:50%;pointer-events:none;animation:tour-click .55s ease-out both}
@keyframes tour-pointer-press{20%,45%{transform:scale(.82)}100%{transform:scale(1)}}
@keyframes tour-click{0%{opacity:0;transform:scale(.35)}20%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
@media(prefers-reduced-motion:reduce){.tour-pointer{display:none}.bot-chat-messages p{opacity:1;transform:none}.bot-node{transition:none}}
.bot-chat-input [data-bot-input].is-typing{color:#344054;font-weight:700}
.bot-chat-input [data-bot-input].is-typing:after{content:"";display:inline-block;width:1px;height:10px;margin-left:2px;background:#2563eb;vertical-align:-1px;animation:bot-caret .65s steps(1) infinite}
@keyframes bot-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.bot-chat-input [data-bot-input].is-typing:after{animation:none}}