/* Scenario studio: a light, interactive product demonstration rather than another topology. */
.scenario-studio-section { padding:84px 0; background:linear-gradient(180deg,#f7faff,#fff); }
.scenario-studio { --ss-progress:0%; color:#243f61; border:1px solid #d5e4f4; border-radius:20px; background:#fff; box-shadow:0 24px 70px #3b6b9e10; overflow:hidden; }
.scenario-studio [hidden] { display:none!important; }
.ss-studio-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 26px; background:#fbfdff; border-bottom:1px solid #e4edf6; }
.ss-studio-header > span:first-child { display:flex; align-items:center; gap:9px; color:#467bab; font:12px/1.4 ui-monospace,monospace; letter-spacing:2px; }.ss-studio-header i { width:5px; height:5px; border-radius:50%; background:#267ff7; box-shadow:0 0 0 4px #3e9bff10; }.ss-studio-header > span:last-child { font-size:12px; color:#8c9fb5; }.ss-studio-header b { font-size:15px; font-weight:400; margin-left:12px; color:#538acc; }
.ss-body { display:grid; grid-template-columns:216px minmax(0,1fr); }
.ss-rail { padding:26px 18px 26px 22px; border-right:1px solid #e2ecf6; background:linear-gradient(155deg,#f6faff,#fafdff); display:flex; flex-direction:column; }
.ss-rail-heading { font-size:12px; color:#8197ad; display:flex; flex-direction:column; gap:5px; padding:0 5px 22px; }.ss-rail-heading span { font:12px/1.5 ui-monospace,monospace; letter-spacing:1.5px; color:#a0b4c7; }
.ss-directory { display:flex; flex-direction:column; gap:9px; }
.ss-directory [role=tab] { position:relative; display:flex; gap:12px; align-items:flex-start; width:100%; padding:20px 13px; text-align:left; border:1px solid transparent; border-radius:10px; color:#829ab4; background:transparent; transition:background .35s,border-color .35s,box-shadow .35s; }
.ss-tab-number { font:12px/1.6 ui-monospace,monospace; color:#a0b7cd; }.ss-tab-copy { display:grid; grid-template-columns:19px 1fr; gap:7px; flex:1; }.ss-tab-copy strong { color:inherit; font-size:14px; font-weight:500; line-height:20px; }.ss-tab-copy small { grid-column:1/-1; font-size:12px; color:#93a7bc; white-space:nowrap; }.ss-tab-icon svg { width:18px; height:18px; }.ss-tab-arrow { position:absolute; right:10px; top:9px; font-size:13px; color:#b1c5db; opacity:0; }
.ss-directory [role=tab][aria-selected=true] { color:#0866d9; background:#fff; border-color:#bdd7f8; box-shadow:0 7px 18px #3971b510; }.ss-directory [role=tab][aria-selected=true]::before { content:''; position:absolute; left:-23px; top:25px; bottom:25px; width:3px; background:#0066ff; border-radius:0 3px 3px 0; }.ss-directory [aria-selected=true] .ss-tab-number { color:#3e8cf0; }.ss-directory [aria-selected=true] .ss-tab-arrow { opacity:1; }.ss-directory [role=tab]:hover { background:#fff; border-color:#d3e4f7; }
.ss-rail-note { margin-top:auto; padding:40px 5px 0; }.ss-rail-index { display:block; color:#d1e4f9; font:76px/.95 ui-monospace,monospace; letter-spacing:-7px; margin-bottom:22px; }.ss-rail-note strong { font-size:19px; line-height:1.65; font-weight:500; color:#476b94; }.ss-rail-note p { font-size:12px; line-height:1.9; color:#8fa3ba; margin:12px 0 27px; }.ss-local-badge { display:flex; gap:6px; align-items:center; font-size:12px; color:#7797b7; }.ss-local-badge i { width:4px; height:4px; border-radius:50%; background:#649bea; }
.ss-demo { min-width:0; background:#fff; }
.ss-demo-head { padding:29px 28px 21px; display:flex; align-items:center; justify-content:space-between; gap:16px; }.ss-demo-head > div { min-width:0; }.ss-demo-eyebrow { font:12px/1.5 ui-monospace,monospace; color:#6d98c2; letter-spacing:1.5px; }.ss-demo h3 { font-size:25px; line-height:1.5; font-weight:600; color:#173b64; margin-top:8px; letter-spacing:-.5px; }.ss-demo-head p { font-size:12px; line-height:1.8; color:#8ba0b6; margin-top:7px; max-width:570px; }.ss-detail { white-space:nowrap; display:flex; align-items:center; gap:8px; font-size:12px; color:#337bd0; padding:8px 0; }.ss-detail span { font-size:20px; }.ss-detail:hover { color:#0066ff; }
.ss-sample-bar { display:flex; align-items:center; gap:16px; padding:0 28px 18px; }.ss-sample-bar > span { font-size:12px; color:#95a7ba; white-space:nowrap; }.ss-samples { display:flex; gap:7px; flex-wrap:wrap; }.ss-samples button { color:#7690ac; background:#f5f8fc; border:1px solid #e1eaf4; border-radius:5px; font-size:12px; padding:6px 11px; transition:all .25s; }.ss-samples button:hover { border-color:#8db7ec; }.ss-samples button[aria-pressed=true] { color:#0565dd; border-color:#95bffc; background:#edf5ff; box-shadow:inset 0 0 0 1px #ffffff80; }
.ss-stage { position:relative; isolation:isolate; padding:26px 28px 20px; background:radial-gradient(ellipse at 42% 54%,#d8ebff88,transparent 65%),linear-gradient(145deg,#f8fbff,#eff7ff 65%,#f6fbff); overflow:hidden; border-top:1px solid #e7eff8; border-bottom:1px solid #dfebf7; }
.ss-stage::before { content:''; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(#93b7db14 1px,transparent 1px),linear-gradient(90deg,#93b7db14 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(transparent,#000 50%,transparent); pointer-events:none; }
.ss-stage::after { content:''; position:absolute; z-index:-1; width:50%; height:150px; background:#b3dbff30; filter:blur(35px); border-radius:50%; left:20%; bottom:35px; pointer-events:none; }
.ss-question { display:flex; align-items:center; gap:12px; padding:13px 17px; border:1px solid #d0e3f8; border-radius:10px; background:#ffffffeb; box-shadow:0 5px 18px #3b80c60b; position:relative; z-index:8; }.ss-q-avatar { flex-shrink:0; width:31px; height:31px; border-radius:8px; background:#edf5ff; border:1px solid #d8e9ff; color:#3484ea; display:grid; place-items:center; font:15px ui-monospace,monospace; }.ss-question > div { flex:1; min-width:0; }.ss-question small { color:#8babc9; font-size:12px; letter-spacing:.5px; }.ss-question p { color:#3c5d7f; font-size:12px; margin-top:2px; line-height:1.65; }.ss-question-signal { display:flex; gap:3px; align-items:center; height:24px; }.ss-question-signal i { width:2px; height:7px; background:#8ec4ff; animation:ss-signal 1.8s ease-in-out infinite; }.ss-question-signal i:nth-child(2) { height:16px; animation-delay:-.4s; }.ss-question-signal i:nth-child(3) { height:11px; animation-delay:-.8s; }
.ss-object-label { font:12px/1.5 ui-monospace,monospace; color:#8faaca; letter-spacing:1px; margin-bottom:15px; }
/* Knowledge: source sheets, a scanning light gate and a citation-backed answer. */
.ss-rag-world { display:grid; grid-template-columns:minmax(0,1fr) 58px minmax(0,1.12fr); align-items:center; min-height:337px; padding-top:24px; }
.ss-library { min-width:0; }.ss-paper-stack { position:relative; height:269px; perspective:900px; }.ss-paper { position:absolute; left:21px; top:13px; width:calc(100% - 42px); min-width:160px; height:233px; padding:17px; background:#ffffffc9; border:1px solid #c8ddf3; border-radius:5px; box-shadow:3px 9px 21px #326ba111; transform:translate(calc((var(--paper) - 1)*10px),calc(var(--paper)*6px)) rotate(calc((var(--paper) - 1)*7deg)); transition:transform 1.1s cubic-bezier(.2,.7,.2,1),box-shadow .7s; opacity:.68; }
.ss-paper.is-source { z-index:3; background:#fff; opacity:1; transform:translate(-4px,4px) rotate(-5deg); }.scenario-studio:not([data-stage="0"]) .ss-paper.is-source { transform:translate(-3px,-3px) rotate(-2deg); box-shadow:0 15px 30px #3776bc20; border-color:#7dbaef; }
.ss-paper-head { display:flex; align-items:center; gap:7px; margin-bottom:14px; color:#83a8d2; }.ss-paper-head svg { width:16px; height:16px; }.ss-paper-head span { font:12px/1.5 ui-monospace,monospace; letter-spacing:.7px; }.ss-paper > strong { display:block; font-size:12px; font-weight:600; color:#446488; }.ss-paper-rule { display:block; height:1px; background:#e5edf5; margin:10px 0; }.ss-paper > i { display:block; height:3px; margin:6px 0; background:#eaf0f7; width:94%; }.ss-paper > i:nth-of-type(2n) { width:75%; }.ss-paper mark { display:block; background:#f1f6fc; color:#8098b3; font-size:12px; line-height:1.8; margin:10px -5px; padding:6px; border-left:2px solid transparent; transition:background .5s,color .5s; }.scenario-studio[data-stage="2"] .ss-paper.is-source mark,.scenario-studio[data-stage="3"] .ss-paper.is-source mark { background:#e3f0ff; color:#2475cc; border-color:#4198f9; }.ss-paper > small { display:block; color:#a1b6cb; font-size:12px; margin-top:12px; }
.ss-scan-beam { position:absolute; z-index:5; width:92%; height:42px; left:2%; top:16px; opacity:0; background:linear-gradient(transparent,#479fff15); border-bottom:1px solid #66b5ff; box-shadow:0 9px 13px -12px #097dff; pointer-events:none; animation:ss-scan 3.2s linear infinite; }.scenario-studio[data-stage="1"] .ss-scan-beam,.scenario-studio[data-stage="2"] .ss-scan-beam { opacity:1; }.ss-source-count { position:absolute; left:0; right:0; bottom:-9px; font-size:12px; color:#8ca7c3; text-align:center; }
.ss-transfer { display:flex; flex-direction:column; align-items:center; gap:10px; color:#96bcdf; transform:translateY(12px); }.ss-transfer > span { font:12px ui-monospace,monospace; letter-spacing:1px; }.ss-transfer > div { display:flex; width:100%; justify-content:center; gap:3px; }.ss-transfer i { width:9px; height:3px; background:#b8d7f6; border-radius:2px; }.ss-transfer b { font-size:20px; font-weight:400; color:#88b7e8; }.scenario-studio[data-stage="2"] .ss-transfer i { animation:ss-evidence 1.2s linear infinite; }.ss-transfer i:nth-child(2) { animation-delay:-.8s!important; }.ss-transfer i:nth-child(3) { animation-delay:-.4s!important; }
.ss-answer { position:relative; border:1px solid #c8def6; border-radius:13px; min-height:264px; background:#ffffffec; box-shadow:0 13px 35px #3874b017; transform:translateY(9px); transition:transform .8s,border-color .6s,box-shadow .6s; overflow:hidden; }.scenario-studio[data-stage="3"] .ss-answer { transform:translateY(0); border-color:#85baff; box-shadow:0 17px 38px #3886d922; }
.ss-answer-head { padding:16px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #e6eef8; }.ss-ai-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; background:#0872f4; color:#fff; font-size:23px; box-shadow:0 4px 10px #1c72dc20; }.ss-answer-head strong { display:block; font-size:12px; color:#2f577f; font-weight:500; }.ss-answer-head small { display:block; color:#91aac4; font:12px/2 ui-monospace,monospace; letter-spacing:.8px; }.ss-answer-check { font-size:12px; color:#369bc0; margin-left:auto; padding:3px 5px; background:#effaff; border-radius:3px; opacity:0; }.scenario-studio[data-stage="3"] .ss-answer-check { opacity:1; }
.ss-answer-skeleton { position:absolute; left:18px; right:18px; top:88px; opacity:1; transition:opacity .3s; }.ss-answer-skeleton i { display:block; height:5px; background:linear-gradient(90deg,#edf3fa,#dfeefa,#edf3fa); background-size:200% 100%; animation:ss-shimmer 3s linear infinite; margin-bottom:12px; border-radius:5px; }.ss-answer-skeleton i:nth-child(2) { width:90%; }.ss-answer-skeleton i:nth-child(3) { width:66%; }.ss-answer-skeleton span { font-size:12px; color:#a0b5cb; display:block; margin-top:23px; }.ss-answer-content { padding:18px; min-height:153px; opacity:0; transition:opacity .4s; }.scenario-studio[data-stage="3"] .ss-answer-content { opacity:1; }.scenario-studio[data-stage="3"] .ss-answer-skeleton { opacity:0; pointer-events:none; }.ss-typed-answer { font-size:12px; line-height:1.95; color:#526f8e; min-height:86px; }.ss-citation { display:flex; flex-wrap:wrap; gap:5px; align-items:center; width:100%; text-align:left; font-size:12px; line-height:1.6; color:#2e83de; padding:8px 0 0; }.ss-citation > span { margin-left:auto; color:#7da8d4; font-size:12px; }.ss-citation:hover { color:#005fdf; }.ss-source-quote { margin:10px 0 0; border-left:2px solid #439af7; padding:7px 9px; background:#f1f7ff; color:#4c7ba7; font-size:12px; line-height:1.85; }
.ss-answer-foot { display:flex; align-items:center; gap:5px; padding:12px 16px; color:#a1b7cb; font-size:12px; border-top:1px solid #eaf0f7; }.ss-answer-foot i { width:4px; height:4px; background:#8cbfec; border-radius:50%; }
/* Intent: a semantic signal transforms into a visible business destination. */
.ss-routing-world { display:grid; grid-template-columns:minmax(0,1fr) 85px minmax(0,1fr); align-items:center; min-height:337px; padding-top:24px; }.ss-intent { min-width:0; }.ss-intent-card { border:1px solid #cbdff6; border-radius:12px; background:linear-gradient(160deg,#fff,#f4f9ff); padding:19px; box-shadow:0 15px 30px #397abb10; }.ss-mini-label { font:12px ui-monospace,monospace; letter-spacing:1px; color:#84a6cb; }.ss-semantic-wave { height:99px; display:flex; align-items:center; justify-content:center; gap:3px; margin:12px -5px; }.ss-semantic-wave i { height:var(--height); width:4px; border-radius:4px; background:linear-gradient(#79cfff,#247cfa); opacity:.25; transform:scaleY(.4); transition:opacity .5s; }.scenario-studio[data-stage="1"] .ss-semantic-wave i { animation:ss-wave 2.8s ease-in-out infinite; animation-delay:calc(var(--bar)*-.13s); opacity:.8; }.scenario-studio[data-stage="2"] .ss-semantic-wave i,.scenario-studio[data-stage="3"] .ss-semantic-wave i { transform:scaleY(.8); opacity:.6; }
.ss-intent-card > strong { display:block; text-align:center; font-size:12px; color:#56789e; font-weight:500; }.ss-token-list { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:14px; opacity:.25; transform:translateY(5px); transition:opacity .5s,transform .5s; }.scenario-studio:not([data-stage="0"]) .ss-token-list { opacity:1; transform:translateY(0); }.ss-token-list span { color:#3b8ce5; background:#edf5ff; padding:5px 8px; font-size:12px; border:1px solid #cee4fd; border-radius:4px; }.ss-intent-footer { display:flex; justify-content:space-between; color:#9eb4cd; font-size:12px; border-top:1px solid #e0ebf7; margin-top:23px; padding-top:11px; }
.ss-route-bridge { position:relative; height:270px; margin-top:25px; }.ss-route-bridge svg { width:100%; height:100%; overflow:visible; }.ss-route-bridge path { fill:none; stroke:#c5d9ee; stroke-width:1.3; }.ss-route-bridge > span { position:absolute; left:10px; top:117px; font:12px ui-monospace,monospace; color:#82a7ce; letter-spacing:1px; }.scenario-studio[data-stage="2"] .ss-route-bridge .is-route,.scenario-studio[data-stage="3"] .ss-route-bridge .is-route { stroke:#418ff8; stroke-width:2; stroke-dasharray:5 5; animation:ss-route 2s linear infinite; filter:drop-shadow(0 0 3px #85bdfb77); }
.ss-queues { min-width:0; }.ss-queue { display:flex; align-items:center; gap:10px; padding:16px 13px; border:1px solid #d9e6f4; border-radius:9px; background:#ffffffb5; height:77px; margin-bottom:13px; transition:transform .65s,background .65s,border-color .65s,box-shadow .65s; }.ss-queue:last-child { margin-bottom:0; }.ss-queue-icon { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; background:#eef5fd; color:#75a3d3; font-size:22px; flex-shrink:0; }.ss-queue strong { display:block; font-size:12px; font-weight:500; color:#6b87a4; }.ss-queue small { display:block; font:12px/2 ui-monospace,monospace; color:#9ab1c9; letter-spacing:.5px; }.ss-queue-state { margin-left:auto; font-size:12px; color:#aabdcf; white-space:nowrap; }.scenario-studio:not([data-stage="3"]) .ss-queue.is-destination .ss-queue-state { font-size:0; }.scenario-studio:not([data-stage="3"]) .ss-queue.is-destination .ss-queue-state::after { content:'待处理'; font-size:12px; }.scenario-studio[data-stage="3"] .ss-queue.is-destination { transform:translateX(-5px); background:#fff; border-color:#77b1fa; box-shadow:0 8px 23px #337bd41b; }.scenario-studio[data-stage="3"] .ss-queue.is-destination .ss-queue-icon { background:#1577f0; color:#fff; }.scenario-studio[data-stage="3"] .ss-queue.is-destination strong,.scenario-studio[data-stage="3"] .ss-queue.is-destination .ss-queue-state { color:#1671df; }
.ss-routing-receipt { grid-column:1/-1; display:flex; align-items:center; gap:10px; margin-top:17px; min-height:52px; padding:11px 15px; background:#ffffffc9; border:1px solid #d3e5f8; border-radius:7px; opacity:0; transform:translateY(8px); transition:opacity .6s,transform .6s; }.scenario-studio[data-stage="3"] .ss-routing-receipt { opacity:1; transform:none; }.ss-routing-receipt > span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#eaf4ff; color:#2587ec; flex-shrink:0; }.ss-routing-receipt strong { color:#4078b6; font-size:12px; font-weight:500; }.ss-routing-receipt p { color:#819ab4; font-size:12px; line-height:1.7; margin-top:2px; }.ss-routing-receipt > small { margin-left:auto; white-space:nowrap; color:#9ab1c8; font-size:12px; }
/* Assistant: a permission pass gates controlled actions, including blocked requests. */
.ss-agent-world { display:grid; grid-template-columns:minmax(0,.83fr) 117px minmax(0,1.17fr); align-items:center; min-height:337px; padding-top:24px; }.ss-identity { min-width:0; }.ss-access-card { position:relative; padding:17px; border:1px solid #bad9f7; background:linear-gradient(145deg,#ffffffeb,#e4f2ffdb); border-radius:11px; box-shadow:0 12px 27px #3a7cbe1a; transform:rotate(-4deg); transition:transform .8s; }.scenario-studio:not([data-stage="0"]) .ss-access-card { transform:rotate(0); }.ss-id-top { display:flex; justify-content:space-between; align-items:center; }.ss-id-top > span { font:12px ui-monospace,monospace; letter-spacing:.8px; color:#6b99c5; }.ss-id-top > i { width:13px; height:10px; border:1px solid #b2cde7; border-radius:3px; background:repeating-linear-gradient(0deg,#d8e9f800 0 2px,#93b9db40 2px 3px); }.ss-id-avatar { position:relative; display:grid; place-items:center; width:50px; height:50px; margin:23px 0 14px; border-radius:12px; background:linear-gradient(135deg,#b9dcff,#4f9ef5); color:#fff; font:23px ui-monospace,monospace; box-shadow:inset 0 1px #fff8; }.ss-id-avatar > span { position:absolute; right:-5px; bottom:-3px; width:16px; height:16px; display:grid; place-items:center; background:#fff; color:#3b94e5; border:1px solid #c9e1f6; border-radius:50%; font-size:12px; }.ss-access-card > strong { display:block; color:#4574a2; font-size:13px; font-weight:500; }.ss-id-sub { display:block; font-size:12px; color:#8ca7c2; margin-top:5px; }.ss-id-scope { margin-top:19px; padding-top:12px; border-top:1px solid #bfdaee; }.ss-id-scope small { display:block; font:12px ui-monospace,monospace; color:#82a6c7; letter-spacing:.6px; }.ss-id-scope > span { display:block; font-size:12px; color:#5487b6; margin-top:5px; }.ss-id-lines { display:flex; gap:3px; height:13px; margin-top:15px; opacity:.35; }.ss-id-lines i { width:calc(var(--stripe)*2px); background:#6398c5; }
.ss-permission-gate { position:relative; display:flex; align-items:center; flex-direction:column; color:#80abd4; margin-top:17px; }.ss-permission-gate > svg { width:43px; height:43px; stroke-width:.85; color:#4c94d7; padding:2px; z-index:1; }.ss-permission-gate > strong { font-size:12px; font-weight:500; color:#6c96ba; margin-top:17px; }.ss-permission-gate > span { font:12px/1.5 ui-monospace,monospace; letter-spacing:.5px; text-align:center; margin-top:5px; }.ss-gate-orbit { position:absolute; width:66px; height:66px; border:1px dashed #a9cdec; top:-11px; border-radius:18px; transform:rotate(45deg); }.ss-gate-signal { position:absolute; top:22px; height:1px; background:#b3d4f2; left:0; right:0; z-index:0; }.ss-gate-signal::after { content:''; position:absolute; width:13px; height:3px; background:#46a0f4; box-shadow:0 0 9px #51a4f6; top:-1px; opacity:0; animation:ss-gate 2.4s linear infinite; }.scenario-studio[data-stage="1"] .ss-gate-signal::after,.scenario-studio[data-stage="2"] .ss-gate-signal::after { opacity:1; }.scenario-studio[data-stage="2"] .ss-permission-gate > svg,.scenario-studio[data-stage="3"] .ss-permission-gate > svg { color:#197df0; fill:#e1f0ff; }.ss-agent-world[data-mode=deny] .ss-tool-result .ss-result-symbol { color:#bd7759; background:#fff2e9; }.ss-agent-world[data-mode=confirm] .ss-tool-result .ss-result-symbol { color:#af8641; background:#fff8e7; }
.ss-tool { min-width:0; }.ss-tool-window { border:1px solid #c8dff5; border-radius:11px; background:#ffffffef; box-shadow:0 13px 27px #387cc011; overflow:hidden; }.ss-tool-bar { display:flex; align-items:center; gap:4px; padding:11px 14px; border-bottom:1px solid #e4eef8; background:#fafdff; }.ss-tool-bar i { width:4px; height:4px; border-radius:50%; background:#bfd6ee; }.ss-tool-bar span { margin-left:auto; font:12px ui-monospace,monospace; color:#9db6d0; letter-spacing:1px; }.ss-tool-window > code { display:block; margin:19px 17px 18px; color:#387fc5; font:13px ui-monospace,monospace; }.ss-tool-rows { margin:0 17px; }.ss-tool-rows > span { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid #eff3f9; font-size:12px; }.ss-tool-rows i { font-style:normal; color:#9aacbe; }.ss-tool-rows b { font-weight:400; color:#759bbb; opacity:.15; transition:opacity .45s; }.scenario-studio:not([data-stage="0"]) .ss-tool-rows > span:first-child b { opacity:1; }.scenario-studio[data-stage="2"] .ss-tool-rows b,.scenario-studio[data-stage="3"] .ss-tool-rows b { opacity:1; }
.ss-tool-result { display:flex; gap:9px; margin:14px 14px 17px; padding:11px; border:1px solid #e1edf9; border-radius:6px; background:#f8fbff; min-height:78px; opacity:.1; transform:translateY(6px); transition:opacity .6s,transform .6s; }.scenario-studio[data-stage="3"] .ss-tool-result { opacity:1; transform:none; }.ss-result-symbol { display:grid; place-items:center; flex-shrink:0; width:22px; height:22px; border-radius:50%; background:#e5f2ff; color:#4389c7; font-size:12px; }.ss-tool-result strong { display:block; font-size:12px; font-weight:500; color:#507ca6; margin:2px 0 5px; }.ss-tool-result p { font-size:12px; color:#8da5bc; line-height:1.8; }.ss-audit-strip { grid-column:1/-1; display:flex; align-items:center; gap:8px; border-top:1px solid #d7e6f4; padding:13px 0 0; margin-top:21px; color:#9cb7d0; opacity:.4; transition:opacity .5s; }.scenario-studio[data-stage="3"] .ss-audit-strip { opacity:1; }.ss-audit-strip > span:first-child { color:#589be1; font-size:12px; }.ss-audit-strip code { font:12px/1.5 ui-monospace,monospace; color:#81a2c3; overflow-wrap:anywhere; }.ss-audit-strip > span:last-child { margin-left:auto; font-size:12px; white-space:nowrap; }
/* Playback and original solution information. */
.ss-transport { padding:19px 28px 12px; display:flex; gap:11px; align-items:center; }.ss-play { width:32px; height:32px; display:grid; place-items:center; flex-shrink:0; border-radius:50%; background:#0066ed; color:#fff; font-size:12px; box-shadow:0 3px 9px #0066ed20; }.ss-play:hover { background:#0058d5; }.ss-replay { color:#8eaccb; font-size:21px; width:22px; flex-shrink:0; }.ss-replay:hover { color:#1673e1; }.ss-playhead { flex:1; min-width:0; padding:0 5px; }.ss-playhead-top { display:flex; justify-content:space-between; gap:8px; }.ss-playhead-top strong { font-size:12px; color:#5983b0; font-weight:500; }.ss-time { font:12px/1.5 ui-monospace,monospace; color:#a0b4c9; }.ss-scrubber { display:block; width:100%; margin:9px 0 8px; height:3px; border-radius:3px; appearance:none; background:linear-gradient(90deg,#328ff6 var(--ss-progress),#e5eef8 var(--ss-progress)); cursor:pointer; }.ss-scrubber::-webkit-slider-thumb { appearance:none; width:8px; height:8px; border:2px solid #fff; background:#2d8bf4; border-radius:50%; box-shadow:0 0 0 1px #81b8f7; }.ss-scrubber::-moz-range-thumb { width:6px; height:6px; border:2px solid #fff; background:#2d8bf4; border-radius:50%; }.ss-stage-labels { display:flex; justify-content:space-between; gap:6px; color:#a8b9cc; font-size:12px; }.ss-stage-labels .is-current { color:#3c88df; }.ss-playback-state { font-size:12px; color:#92a9c1; white-space:nowrap; padding-left:8px; }
.ss-narration { display:flex; align-items:baseline; gap:9px; padding:2px 28px 20px 105px; min-height:45px; }.ss-narration > span { font:12px ui-monospace,monospace; color:#4794e8; }.ss-narration p { font-size:12px; line-height:1.8; color:#8fa4bc; }
.ss-context { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:26px 29px 23px; gap:29px; border-top:1px solid #e0ebf6; background:#fbfdff; }.ss-context > div { min-width:0; }.ss-context > div + div { border-left:1px solid #e2ecf6; padding-left:26px; }.ss-context h4 { font-size:12px; color:#6584a9; font-weight:500; display:flex; align-items:center; gap:10px; }.ss-context h4 span { font:12px ui-monospace,monospace; color:#97b9e0; }.ss-context p { font-size:12px; line-height:1.9; color:#93a5ba; margin-top:9px; }.ss-footnote { border-top:1px solid #ecf1f7; padding:11px 29px; background:#fcfdff; font-size:12px; color:#a2b5c8; }
.ss-live { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.scenario-studio button:focus-visible,.scenario-studio a:focus-visible,.scenario-studio input:focus-visible { outline:2px solid #438ef2; outline-offset:4px; }
@keyframes ss-signal { 0%,100% { transform:scaleY(.5); }50% { transform:scaleY(1); } }
@keyframes ss-scan { from { transform:translateY(0); }to { transform:translateY(163px); } }
@keyframes ss-evidence { 0%,100% { background:#b8d7f6; }50% { background:#187ef9; box-shadow:0 0 6px #72bfff; } }
@keyframes ss-shimmer { to { background-position:-200% 0; } }
@keyframes ss-wave { 0%,100% { transform:scaleY(.45); }50% { transform:scaleY(1); } }
@keyframes ss-route { to { stroke-dashoffset:-40; } }
@keyframes ss-gate { from { transform:translateX(0); }to { transform:translateX(104px); } }
.scenario-studio:not([data-playing=true]) *,.scenario-studio:not([data-playing=true]) *::after { animation-play-state:paused!important; }
@media(max-width:1100px) { .ss-body { grid-template-columns:185px minmax(0,1fr); }.ss-rail { padding-left:15px; padding-right:12px; }.ss-directory [role=tab] { gap:8px; padding:17px 9px; }.ss-directory [role=tab][aria-selected=true]::before { left:-16px; }.ss-tab-copy { gap:5px; grid-template-columns:16px 1fr; }.ss-tab-icon svg { width:16px; }.ss-tab-copy strong { font-size:12px; }.ss-tab-copy small { font-size:12px; }.ss-demo-head { padding:25px 21px 19px; }.ss-demo h3 { font-size:21px; }.ss-demo-eyebrow { font-size:12px; }.ss-sample-bar { padding-left:21px; padding-right:21px; }.ss-stage { padding:22px 20px 18px; }.ss-rag-world { grid-template-columns:minmax(0,1fr) 37px minmax(0,1.1fr); }.ss-paper { padding:12px; left:13px; width:calc(100% - 24px); min-width:0; }.ss-paper-head span { font-size:12px; }.ss-answer-head { padding:12px; gap:6px; }.ss-answer-head small { font-size:12px; }.ss-answer-check { display:none; }.ss-answer-content { padding:14px; }.ss-answer-foot { padding:11px 12px; }.ss-routing-world { grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr); }.ss-intent-card { padding:15px; }.ss-semantic-wave { gap:2px; }.ss-semantic-wave i { width:3px; }.ss-queue { padding:12px 9px; gap:6px; }.ss-queue-icon { width:26px; height:26px; }.ss-queue strong { font-size:12px; }.ss-queue-state { font-size:12px; }.ss-agent-world { grid-template-columns:minmax(0,.9fr) 77px minmax(0,1.1fr); }.ss-permission-gate > span { font-size:12px; }.ss-gate-orbit { width:54px; height:54px; top:-7px; border-radius:14px; }.ss-permission-gate > svg { width:39px; height:39px; }.ss-access-card { padding:13px; }.ss-tool-window > code { margin:17px 12px; font-size:12px; }.ss-tool-rows { margin:0 12px; }.ss-tool-result { margin:12px 9px; padding:9px; gap:6px; }.ss-transport { padding-left:20px; padding-right:20px; }.ss-narration { padding-left:96px; padding-right:20px; } }
@media(max-width:900px) { .ss-body { grid-template-columns:1fr; }.ss-rail { padding:14px 20px; border-right:0; border-bottom:1px solid #e2ecf6; }.ss-rail-heading,.ss-rail-note { display:none; }.ss-directory { flex-direction:row; gap:10px; }.ss-directory [role=tab] { flex:1; padding:11px; }.ss-directory [role=tab][aria-selected=true]::before { display:none; }.ss-tab-copy { display:block; }.ss-tab-icon { display:none; }.ss-tab-copy strong { font-size:12px; }.ss-tab-copy small { display:block; margin-top:4px; }.ss-rag-world { grid-template-columns:minmax(0,1fr) 55px minmax(0,1.1fr); }.ss-agent-world { grid-template-columns:minmax(0,.85fr) 112px minmax(0,1.15fr); }.ss-routing-world { grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr); }.ss-studio-header { padding:17px 20px; }.ss-studio-header > span:last-child { font-size:12px; }.ss-context { padding:23px; gap:20px; }.ss-context > div + div { padding-left:18px; } }
@media(max-width:600px) {
 .scenario-studio-section { padding:60px 0; }.scenario-studio { border-radius:13px; }.ss-studio-header { padding:14px 16px; }.ss-studio-header > span:first-child { font-size:12px; letter-spacing:1.4px; }.ss-studio-header > span:last-child { display:none; }.ss-rail { padding:11px; }.ss-directory { gap:6px; }.ss-directory [role=tab] { padding:11px 8px; gap:5px; border-radius:6px; }.ss-tab-number { font-size:12px; }.ss-tab-copy strong { font-size:12px; line-height:15px; }.ss-tab-copy small,.ss-tab-arrow { display:none; }
 .ss-demo-head { padding:23px 17px 17px; display:block; }.ss-demo h3 { font-size:21px; letter-spacing:-.8px; line-height:1.5; }.ss-demo-head p { font-size:12px; line-height:1.85; }.ss-detail { display:inline-flex; padding:6px 0 0; font-size:12px; }.ss-detail span { font-size:16px; }.ss-demo-eyebrow { font-size:12px; letter-spacing:1px; }.ss-sample-bar { padding:0 17px 16px; display:block; }.ss-sample-bar > span { display:block; margin-bottom:8px; font-size:12px; }.ss-samples { gap:5px; }.ss-samples button { font-size:12px; padding:6px 9px; }.ss-stage { padding:16px; }.ss-question { padding:11px; gap:9px; }.ss-q-avatar { width:27px; height:27px; font-size:13px; }.ss-question p { font-size:12px; }.ss-question small { font-size:12px; }.ss-question-signal { display:none; }
 .ss-rag-world { grid-template-columns:1fr; gap:0; padding-top:20px; }.ss-library { position:relative; }.ss-library > .ss-object-label { margin-bottom:9px; }.ss-paper-stack { height:200px; width:225px; margin:0 auto; }.ss-paper { height:142px; width:197px; top:9px; left:14px; padding:12px; }.ss-paper-head { margin-bottom:6px; }.ss-paper-head svg { width:13px; height:13px; }.ss-paper-head span { font-size:12px; }.ss-paper > strong { font-size:12px; }.ss-paper-rule { margin:6px 0; }.ss-paper > i { display:none; }.ss-paper mark { font-size:12px; margin:6px -3px; padding:4px; line-height:1.7; }.ss-paper > small { font-size:12px; margin-top:4px; }.ss-source-count { bottom:-1px; font-size:12px; }.ss-scan-beam { top:0; height:20px; animation-name:ss-scan-mobile; }.ss-transfer { flex-direction:row; justify-content:center; gap:8px; transform:none; height:29px; }.ss-transfer > div { width:auto; }.ss-transfer b { transform:rotate(45deg); font-size:16px; }.ss-transfer > span { font-size:12px; }
 .ss-answer { min-height:0; transform:none; }.ss-answer-head { padding:11px 13px; }.ss-answer-head strong { font-size:12px; }.ss-answer-head small { font-size:12px; }.ss-answer-check { display:block; }.ss-ai-mark { width:27px; height:27px; }.ss-answer-content { min-height:142px; padding:14px; }.ss-typed-answer { min-height:74px; font-size:12px; }.ss-answer-skeleton { top:80px; }.ss-answer-skeleton i { height:4px; margin-bottom:10px; }.ss-answer-skeleton span { margin-top:18px; }.ss-answer-foot { padding:10px 13px; }.ss-citation { font-size:12px; }
 .ss-routing-world { grid-template-columns:1fr; padding-top:20px; }.ss-intent-card { padding:14px; }.ss-semantic-wave { height:60px; margin:8px 0; gap:4px; }.ss-semantic-wave i { width:4px; height:calc(var(--height)*.7); }.ss-intent-card > strong { font-size:12px; }.ss-token-list { margin-top:10px; }.ss-intent-footer { margin-top:13px; padding-top:9px; }.ss-route-bridge { display:none; }.ss-queues { padding-top:19px; }.ss-queue { height:59px; margin-bottom:8px; padding:10px 13px; gap:9px; }.ss-queue small { font-size:12px; }.ss-queue-state { font-size:12px; }.scenario-studio[data-stage="3"] .ss-queue.is-destination { transform:translateX(0); box-shadow:0 5px 15px #337bd41b; }.ss-routing-receipt { margin-top:14px; padding:11px; }.ss-routing-receipt > small { display:none; }
 .ss-agent-world { grid-template-columns:1fr; padding-top:20px; }.ss-identity { display:flex; flex-direction:column; align-items:center; }.ss-identity > .ss-object-label { align-self:flex-start; }.ss-access-card { width:100%; max-width:290px; padding:14px; display:grid; grid-template-columns:45px 1fr; column-gap:12px; transform:rotate(-2deg); }.ss-id-top { grid-column:1/-1; }.ss-id-avatar { width:40px; height:40px; font-size:20px; grid-row:2/4; margin:15px 0 0; }.ss-access-card > strong { grid-column:2; margin-top:17px; font-size:12px; }.ss-id-sub { grid-column:2; font-size:12px; }.ss-id-scope { grid-column:1/-1; margin-top:15px; padding-top:9px; display:flex; justify-content:space-between; align-items:center; gap:8px; }.ss-id-scope > span { margin:0; font-size:12px; }.ss-id-scope small { font-size:12px; }.ss-id-lines { display:none; }
 .ss-permission-gate { margin:0; height:83px; flex-direction:row; justify-content:center; gap:8px; }.ss-permission-gate > svg { width:29px; height:29px; }.ss-permission-gate > strong { margin:0; font-size:12px; }.ss-permission-gate > span { margin:0; font-size:12px; }.ss-gate-orbit { display:none; }.ss-gate-signal { display:none; }.ss-tool-window > code { font-size:13px; margin:17px; }.ss-tool-rows { margin:0 17px; }.ss-tool-result { margin:15px; padding:12px; }.ss-tool-result p { font-size:12px; }.ss-audit-strip { margin-top:15px; gap:5px; }.ss-audit-strip code { font-size:12px; }.ss-audit-strip > span:last-child { display:none; }
 .ss-transport { padding:18px 14px 10px; gap:7px; }.ss-play { width:29px; height:29px; font-size:12px; }.ss-replay { width:17px; font-size:20px; }.ss-playhead { padding:0 3px; }.ss-playhead-top strong { font-size:12px; }.ss-time { font-size:12px; }.ss-stage-labels { font-size:12px; gap:4px; }.ss-playback-state { display:none; }.ss-narration { padding:3px 17px 19px; min-height:47px; gap:8px; }.ss-narration p { font-size:12px; }
 .ss-context { grid-template-columns:1fr; padding:21px 18px; gap:17px; }.ss-context > div + div { border-left:0; border-top:1px solid #e6eef7; padding:16px 0 0; }.ss-context h4 { font-size:12px; }.ss-context p { font-size:12px; margin-top:7px; }.ss-footnote { padding:11px 18px; font-size:12px; line-height:1.8; }
}
@keyframes ss-scan-mobile { from { transform:translateY(0); }to { transform:translateY(115px); } }
@media(prefers-reduced-motion:reduce) { .scenario-studio *,.scenario-studio *::after { animation:none!important; transition:none!important; }.ss-scan-beam { display:none; } }
/* Keep business content legible at the full-width desktop presentation size. */
@media(min-width:601px) {
 .ss-question p { font-size:14px; }.ss-question small { font-size:12px; }
 .ss-object-label { font-size:12px; }.ss-paper-stack { height:286px; }.ss-paper { height:250px; padding:19px; }.ss-paper-head span { font-size:12px; }.ss-paper > strong { font-size:16px; }.ss-paper mark { font-size:12px; line-height:1.9; }.ss-paper > small { font-size:12px; }.ss-source-count { font-size:12px; }
 .ss-answer-head { padding:17px; }.ss-answer-head strong { font-size:14px; }.ss-answer-head small { font-size:12px; }.ss-answer-check { font-size:12px; }.ss-answer-content { padding:19px; min-height:171px; }.ss-typed-answer { font-size:14px; min-height:99px; }.ss-citation { font-size:12px; }.ss-citation > span { font-size:12px; }.ss-source-quote { font-size:12px; }.ss-answer-foot { font-size:12px; }.ss-answer-skeleton span { font-size:12px; }
 .ss-intent-card > strong { font-size:14px; }.ss-token-list span { font-size:12px; }.ss-queue strong { font-size:14px; }.ss-queue-state { font-size:12px; }.ss-routing-receipt strong { font-size:12px; }.ss-routing-receipt p { font-size:12px; }
 .ss-access-card > strong { font-size:15px; }.ss-id-sub { font-size:12px; }.ss-id-scope > span { font-size:12px; }.ss-tool-window > code { font-size:15px; }.ss-tool-rows > span { font-size:12px; }.ss-tool-result strong { font-size:12px; }.ss-tool-result p { font-size:12px; }.ss-tool-result { min-height:94px; }
 .ss-playhead-top strong { font-size:12px; }.ss-stage-labels { font-size:12px; }.ss-narration p { font-size:12px; }.ss-context h4 { font-size:12px; }.ss-context p { font-size:12px; color:#7b90a9; }.ss-demo-head p { font-size:12px; }
}