/* Product stories: one conversation, then a useful task in Codex. */
.hero{display:block;padding-top:54px;padding-bottom:42px}
.hero-copy{text-align:center;max-width:880px;margin:0 auto 38px}
.hero h1{font-size:52px;letter-spacing:-2px;margin:10px 0 18px}
.hero h1 br{display:none}
.hero-actions,.hero-notes{justify-content:center}
.hero-actions,.hero-notes{margin-top:22px}
.product-demo{--reveal:0;--wx-shift:25%;--codex-y:24px;min-width:0}
.product-demo [hidden]{display:none!important}
.product-demo button{border:0;background:transparent;color:#758073;border-radius:6px;transition:color 180ms ease,background 180ms ease}
.product-demo button:focus-visible{outline-offset:2px}
.story-top{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:18px;gap:12px}
.story-scenes{display:flex;gap:4px;padding:4px;border:1px solid #e2e7dd;background:#f2f5ee;border-radius:9px}
.story-scenes button{font-size:12px;padding:9px 17px;white-space:nowrap}
.story-scenes button[aria-pressed=true]{background:#fff;color:#286a45;box-shadow:0 1px 4px #29442c0a}
.story-fiction{position:absolute;right:0;color:#8a9585;font-size:10px}
.story-surfaces{display:none}
.story-viewport{height:502px;position:relative;isolation:isolate}
.story-window{font-family:"Segoe UI","Microsoft YaHei UI",sans-serif;position:absolute;top:0;bottom:0;border:1px solid #dbe3d5;border-radius:11px;overflow:hidden;box-shadow:0 12px 32px #334c3108;display:flex;flex-direction:column;min-width:0}
.story-wechat{left:0;width:calc(54% - 10px);transform:translateX(var(--wx-shift));background:#1f1f1f;border-color:#3b3b3b;color:#ddd;box-shadow:0 12px 32px #1a231c14;color-scheme:dark}
.story-codex{right:0;width:calc(46% - 10px);background:#fff;border-color:#e0e0de;color:#30302e;opacity:var(--reveal);transform:translateY(var(--codex-y));pointer-events:none}
.product-demo[data-codex=true] .story-codex{pointer-events:auto}
.story-titlebar{height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #e3e6df;background:#f7f8f5;color:#626e5b;font-size:12px}
.story-titlebar>span:last-child{color:#91998b;font-size:10px}
.story-wechat .story-titlebar{height:28px;background:#252525;border-bottom:0;padding:0 11px;color:#a8a8a8;font-size:10px}
.story-window-controls{display:flex;align-items:center;gap:12px;color:#8a8a8a}
.story-window-controls svg{width:20px;height:20px;display:block}
.story-codex .story-titlebar{height:40px;background:#fff;border-color:#ececea;padding:0 16px;color:#363634}
.story-codex-brand{display:flex;align-items:center;gap:10px;min-width:0;color:#363634;font-size:12px;font-weight:600}
#story-task-title{font-weight:400;color:#848480;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-codex-chrome{display:flex;gap:12px;margin-left:12px;flex-shrink:0}
.story-codex-chrome svg{width:16px;height:16px;color:#858581}
.story-wx-layout{display:flex;flex:1;min-height:0}
.story-wx-rail{width:44px;flex-shrink:0;background:#252525;display:flex;flex-direction:column;align-items:center;gap:18px;padding:10px 0 13px;color:#898989}
.story-owner{display:block;width:26px;height:26px;flex-shrink:0;border-radius:4px;overflow:hidden;background:#57635f}
.story-owner svg,.story-chat i svg,.story-message-avatar svg{display:block;width:100%;height:100%}
.story-rail-icon{display:grid;place-items:center;width:20px;height:20px;color:#929292}
.story-rail-icon svg{width:18px;height:18px}
.story-rail-icon.is-active{color:#18c787}
.story-rail-bottom{margin-top:auto}
.story-chat-list{width:132px;flex-shrink:0;background:#2c2c2c;border-right:1px solid #303030}
.story-search-row{height:42px;display:flex;align-items:center;gap:7px;padding:0 9px}
.story-search{min-width:0;flex:1;display:flex;align-items:center;gap:5px;background:#393939;color:#777;font-size:10px;border-radius:5px;padding:6px}
.story-search svg{width:12px;height:12px;flex-shrink:0}
.story-search-add{display:grid;place-items:center;width:15px;height:15px;color:#929292;flex-shrink:0}
.story-search-add svg{width:15px;height:15px}
.story-chat{display:flex;gap:8px;padding:10px 9px;min-height:52px;align-items:center;min-width:0}
.story-chat.selected{background:#08a970}
.story-chat i,.story-message-avatar{font-style:normal;display:block;width:28px;height:28px;flex-shrink:0;background:#465b50;color:#fff;border-radius:4px;overflow:hidden;font-size:11px}
.story-chat i{width:26px;height:26px}
.story-chat>div{min-width:0;flex:1;overflow:hidden}
.story-chat-meta{display:flex;align-items:center;gap:4px;min-width:0}
.story-chat b{display:block;min-width:0;flex:1;font-size:11px;white-space:nowrap;font-weight:500;overflow:hidden;text-overflow:ellipsis;color:#dedede}
.story-chat time{flex-shrink:0;color:#888;font-size:8px;font-variant-numeric:tabular-nums}
.story-chat small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#969696;font-size:10px;margin-top:4px}
.story-chat.selected b{color:#fff}
.story-chat.selected small,.story-chat.selected time{color:#d4eee2}
.story-conversation{min-width:0;flex:1;display:flex;flex-direction:column;background:#1f1f1f}
.story-chat-heading{height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #292929;padding:0 16px;font-size:12px}
.story-chat-heading b{flex:1;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ddd}
.story-heading-actions{display:flex;align-items:center;gap:14px;color:#888;flex-shrink:0}
.story-heading-actions svg{display:block;width:18px;height:18px}
.story-messages{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#454545 transparent}
.story-message-track{position:relative;padding:14px 16px 6px}
.story-message-time{font-size:9px;color:#797979;text-align:center;margin:0 0 18px}
.story-message{display:flex;gap:9px;padding-bottom:14px;position:relative;transform-origin:left center}
.story-message[hidden],.story-answer-item[hidden]{display:none}
.story-message.self{flex-direction:row-reverse;transform-origin:right center}
.story-message.self .story-message-avatar{background:#596b56}
.story-message-body{min-width:0;max-width:calc(100% - 48px)}
.story-message small{display:block;color:#8b8b8b;font-size:10px;margin:0 0 3px 1px}
.story-message.self small{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.story-message p{position:relative;font-size:12px;line-height:1.55;margin:0;padding:7px 9px;background:#303030;border:0;border-radius:5px;color:#dedede;overflow-wrap:anywhere;white-space:pre-line}
.story-message p:before{content:'';position:absolute;left:-3px;top:12px;width:6px;height:6px;background:inherit;transform:rotate(45deg);border-radius:1px}
.story-message.self p{background:#27cb89;color:#103b2c}
.story-message.self p:before{left:auto;right:-3px}
.story-message.is-read p,.story-message.is-read .story-attachment{box-shadow:0 0 0 2px #39d69d88}
.story-attachment{border:1px solid #414b43;border-radius:5px;background:#292e29;margin:6px 0 0;padding:6px}
.story-attachment svg{width:100%;height:auto;display:block;max-width:220px;border-radius:2px}
.story-attachment figcaption{color:#a2aba0;font-size:9px;padding-top:5px}
.story-compose{height:84px;flex-shrink:0;border:1px solid #353535;border-radius:7px;background:#202020;margin:0 8px 8px;padding:10px 12px 37px;position:relative;color:#888;font-size:12px}
.story-compose p{font-size:11px;line-height:1.65;margin:0;color:#c9c9c9;white-space:pre-line;overflow:auto;overflow-wrap:anywhere;max-height:100%;scrollbar-width:thin;scrollbar-color:#454545 transparent}
.story-compose p:empty:before{content:'输入消息';color:#727272}
.story-compose-tools{position:absolute;left:12px;bottom:10px;display:flex;align-items:center;gap:14px;color:#999}
.story-compose-tools svg{display:block;width:18px;height:18px}
.story-send-label{position:absolute;right:10px;bottom:9px;font-size:10px;color:#838383;background:#2b2b2b;padding:4px 11px;border-radius:4px}
.story-compose.has-draft .story-send-label{color:#32cf95;background:#26382f}
.story-wx-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#story-message-count{white-space:nowrap;font-variant-numeric:tabular-nums}
.story-codex-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px;scrollbar-width:thin;scrollbar-color:#d4d4d0 transparent}
.story-question{width:fit-content;max-width:88%;margin:0 0 20px auto;padding:10px 13px;border-radius:16px;background:#f0f0ee;font-size:12px;line-height:1.65;color:#323230}
.story-question p{margin:0;overflow-wrap:anywhere;white-space:pre-line}
.product-demo[data-scene=send] .story-compose{height:110px}
.story-tool{display:flex;gap:8px;align-items:center;font-size:11px;color:#8a8a85;padding:0;margin:16px 0}
.story-tool-icon{display:flex;align-items:center;width:12px;flex-shrink:0;color:#91918d}
.story-tool-icon svg{width:12px;height:12px}
.story-tool>div{flex:1;min-width:0}
.story-tool code{font:11px var(--mono);color:#696965;overflow-wrap:anywhere}
.story-tool small{display:block;font-size:10px;line-height:1.5;margin-top:3px;color:#91918b}
#story-tool-status,#story-send-status{font-size:10px;white-space:nowrap}
.story-context{margin:16px 0;font-size:11px;line-height:1.7;color:#777773;overflow-wrap:anywhere}
.story-context summary{cursor:pointer;display:flex;align-items:center;gap:8px;list-style:none;padding:2px 0}
.story-context summary::-webkit-details-marker{display:none}
.story-context summary:before{content:'';width:5px;height:5px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg);margin:0 4px;flex-shrink:0;transition:transform 180ms ease}
.story-context[open] summary:before{transform:rotate(135deg)}
.story-context>div{margin:9px 0 0 7px;padding-left:12px;border-left:1px solid #e3e3df}
.story-context p{margin:5px 0}
.story-context b{font-weight:500;color:#5f5f5b;margin-right:6px}
.story-reply{font-size:12px;line-height:1.75;overflow-wrap:anywhere;margin:18px 0;color:#383835}
.story-reply p{margin:0 0 12px;white-space:pre-line}
.story-reply .story-reply-intro{color:#777773;font-size:11px;margin-bottom:10px}
.story-image-result{margin:16px 0 20px;padding:10px;background:#f6f6f3;border:1px solid #e7e7e1;border-radius:10px}
.story-image-result figcaption{font-size:10px;color:#83837c;margin-bottom:8px}
.story-image-result svg{display:block;width:100%;max-width:260px;height:auto;margin:auto}
.story-answer-heading{font-size:12px;line-height:1.75;color:#383835;margin:18px 0 12px}
.story-answer-item{font-size:12px;line-height:1.75;margin:12px 0;color:#444440;overflow-wrap:anywhere}
.story-answer-item b{font-weight:600;color:#373734;margin-right:6px}
.story-answer-item p{display:inline;margin:0}
#story-answer-note{font-size:11px;line-height:1.75;color:#80807a;margin:14px 0 0}
.story-response-actions{display:flex;align-items:center;gap:13px;color:#93938e;margin-top:16px;padding:2px 0}
.story-response-actions svg{width:14px;height:14px}
.story-codex-composer{flex-shrink:0;margin:8px 12px 12px;padding:11px 12px 9px;background:#f0f0ee;border:1px solid #e7e7e3;border-radius:20px;color:#888882}
.story-prompt-entry{font-size:12px;line-height:20px;height:40px;overflow:auto;scrollbar-width:thin;scrollbar-color:#cecec8 transparent;white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:8px;color:#383835}
#story-prompt-draft:empty:before{content:'询问 Codex…';color:#999992}
.story-caret{display:inline-block;width:1px;height:12px;background:#555550;vertical-align:middle;margin-left:2px}
.story-composer-toolbar{height:26px;display:flex;align-items:center;gap:12px}
.story-composer-toolbar svg{display:block;width:16px;height:16px}
.story-composer-add,.story-composer-mic{flex-shrink:0;display:flex;align-items:center}
.story-model{display:flex;align-items:center;gap:5px;margin-left:auto;white-space:nowrap;font-size:11px;color:#666660}
.story-model>span{font-size:12px;color:#8e8e88}
.story-composer-send{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#deded8;color:#92928a;flex-shrink:0;transition:color 160ms ease,background 160ms ease,transform 180ms ease}
.story-codex-composer.has-prompt .story-composer-send{background:#343431;color:#fff}
.story-codex-footer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.story-caption{text-align:center;font-size:12px;line-height:1.8;color:#75846a;margin:20px 0 13px;min-height:22px}
.story-disclaimer{text-align:center;font-size:9px;line-height:1.8;color:#98a18e;margin:6px 0 0}
@media(hover:hover){.product-demo button:hover{background:#eaf1e2;color:#367047}}
@media(max-width:1000px){.hero h1{font-size:45px}.story-chat-list{width:112px}.story-wx-rail{width:36px}.story-chat{padding-inline:7px;gap:6px}.story-chat i{width:26px;height:26px}.story-chat time{display:none}.story-fiction{position:static}.story-top{justify-content:space-between}.story-codex-body{padding:18px 16px}.story-message-body{max-width:calc(100% - 39px)}}
@media(max-width:800px){
 .hero{padding-top:36px}.hero h1{font-size:37px;line-height:1.4}.hero h1 br{display:block}.hero-copy{margin-bottom:30px}
 .story-top{justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}.story-scenes{width:100%;justify-content:center}.story-scenes button{flex:1;padding:9px 5px;font-size:11px}.story-fiction{font-size:9px}
 .story-surfaces{display:flex;justify-content:center;gap:3px;margin:0 auto 11px}.story-surfaces button{font-size:11px;padding:6px 18px;min-height:32px}.story-surfaces button[aria-pressed=true]{background:#eaf1e2;color:#376d42}.story-surfaces button:disabled{opacity:.4;cursor:default}
 .story-viewport{height:clamp(350px,calc(100svh - 360px),478px)}.story-window{width:100%;left:0;right:0}
 .story-wechat{transform:translateX(calc(var(--reveal) * -12px));opacity:calc(1 - var(--reveal));pointer-events:none}
 .story-codex{transform:translateX(calc((1 - var(--reveal)) * 18px));pointer-events:none}
 .product-demo[data-surface=wechat] .story-wechat{transform:none;opacity:1;pointer-events:auto}
 .product-demo[data-surface=wechat] .story-codex{opacity:0;pointer-events:none}
 .product-demo[data-surface=codex] .story-wechat{opacity:0;pointer-events:none}
 .product-demo[data-surface=codex] .story-codex{opacity:1;transform:none;pointer-events:auto}
 .product-demo[data-surface=auto][data-codex=false] .story-wechat{pointer-events:auto}
 .product-demo[data-surface=auto][data-codex=true] .story-codex{pointer-events:auto}
 .story-chat-list,.story-wx-rail{display:none}
 .story-titlebar{padding:0 13px;height:39px}
 .story-wechat .story-titlebar{height:28px;padding-inline:13px}
 .story-chat-heading{height:42px}
 .story-message-track{padding-inline:13px}.story-message-body{max-width:calc(100% - 48px)}
 .story-message p{font-size:12px;line-height:1.6}.story-message small{font-size:10px}.story-message-avatar{width:28px;height:28px}
 .story-compose{height:80px}
 .product-demo[data-scene=send] .story-compose{height:110px}
 .product-demo[data-scene=send] .story-compose p{font-size:12px}
 .story-codex-body{padding:16px 14px}.story-question{max-width:92%;padding:9px 12px}
 .story-codex-composer{margin:6px 10px 10px;padding:10px 11px 9px}.story-prompt-entry{height:40px}.story-context,.story-reply{font-size:12px}
 .story-answer-heading{font-size:12px}.story-answer-item{font-size:12px;line-height:1.75}
 .story-caption{font-size:11px;min-height:40px;margin:16px 6px 5px}
}
@media(max-width:360px){.story-codex-body{padding:13px}.story-scenes button{font-size:10px}.story-caption{margin-inline:0}}
@media(prefers-reduced-motion:reduce){.product-demo *{animation:none!important;transition:none!important}}