/* 功能可视化：清楚区分资料、AI工作、人的决定和成果。 */
.wos-demo { max-width:1280px; width:calc(100% - 80px); margin:0 auto; color:#25332c; font-family:var(--font); container-type:inline-size; scroll-margin-top:90px; }
.wos-shell { display:grid; grid-template-columns:208px minmax(0,1fr); border:1px solid #dce2dc; border-radius:22px; overflow:hidden; background:#f7f8f5; box-shadow:0 24px 70px -48px #1d352b70; }
.wos-sidebar { background:#263e32; color:#e5ede5; padding:32px 24px; display:flex; flex-direction:column; }
.wos-wordmark { font-size:25px; font-weight:500; letter-spacing:-.06em; }
.wos-wordmark span { display:block; margin-top:7px; font-size:11px; font-weight:400; letter-spacing:.06em; color:#acbfae; }
.wos-project { margin-top:48px; padding:22px 0; border-top:1px solid #ffffff24; border-bottom:1px solid #ffffff24; }
.wos-project > span,.wos-side-label { color:#9eb5a4; font-size:11px; letter-spacing:.06em; }
.wos-project strong { display:block; font-size:15px; font-weight:500; margin-top:10px; }
.wos-project p { color:#bbcbbf; font-size:12px; line-height:1.8; margin-top:10px; }
.wos-side-label { margin-top:32px; }
.wos-context { list-style:none; padding:0; margin:12px 0 28px; }
.wos-context li { font-size:11px; color:#cfdbd1; line-height:1.8; padding:7px 0; }
.wos-people { margin-top:auto; display:flex; align-items:center; }
.wos-avatar { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:50%; font-size:12px; background:#eddfc2; color:#554831; flex-shrink:0; border:2px solid #263e32; }
.wos-ai { margin-left:-8px; background:#c5d7ca; color:#324e3c; }
.wos-people p { margin-left:10px; color:#b7c8bc; font-size:11px; line-height:1.6; }
.wos-workspace { min-width:0; }
.wos-toolbar { display:flex; justify-content:space-between; align-items:center; min-height:60px; padding:16px 30px; border-bottom:1px solid #e0e5dd; background:#fff9; font-size:11px; color:#77837b; }
.wos-toolbar i { margin:0 12px; color:#aab4ac; font-style:normal; }
.wos-state { display:flex; align-items:center; gap:8px; color:#42634c; }
.wos-state::before { content:''; width:6px; height:6px; background:#71977a; border-radius:50%; }
.wos-scenes { min-height:478px; padding:28px 32px 32px; }
.wos-scene[hidden] { display:none; }
.wos-scene:not([hidden]) { animation:wos-enter .42s cubic-bezier(.16,1,.3,1) both; }
.wos-scene-heading { margin-bottom:28px; }
.wos-scene-heading > span { color:#7f8b82; font-size:10px; letter-spacing:.08em; }
.wos-scene-heading h3 { font-size:clamp(23px,2.15vw,30px); font-weight:400; line-height:1.3; letter-spacing:-.035em; margin:9px 0 12px; }
.wos-scene-heading p { color:#77837b; font-size:12px; line-height:1.85; margin:0; max-width:600px; }
.wos-gather { display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); align-items:center; }
.wos-sources { display:grid; gap:12px; }
.wos-source { display:flex; align-items:center; gap:12px; padding:18px 14px; background:#fff; border:1px solid #e3e7df; border-radius:12px; box-shadow:0 5px 14px -10px #24362c26; }
.wos-file-icon { width:32px; height:39px; border:1px solid #d3decd; border-radius:5px 11px 5px 5px; display:grid; place-items:center; color:#66825d; background:#f1f5ed; font-size:12px; flex-shrink:0; }
.wos-source strong { font-size:12px; font-weight:500; }
.wos-source p { font-size:10px; color:#879087; margin:4px 0 0; }
.wos-source small { margin-left:auto; font-size:9px; color:#6d8a71; white-space:nowrap; }
.wos-connect { position:relative; display:flex; align-items:center; color:#9bb29d; }
.wos-connect span { height:1px; background:#bacab9; flex:1; }
.wos-connect b { font-size:17px; font-weight:400; }
.wos-summary { background:#edf3e8; border:1px solid #d2dfca; border-radius:14px; padding:24px; }
.wos-card-eyebrow { font-size:10px; color:#84907e; letter-spacing:.04em; margin-bottom:14px; }
.wos-summary h4 { font-size:18px; font-weight:500; margin:0 0 19px; }
.wos-summary dl { margin:0; }
.wos-summary dt { font-size:10px; color:#879780; margin-top:13px; }
.wos-summary dd { font-size:12px; margin:3px 0 0; color:#42593e; }
.wos-note { border-top:1px solid #d5dfcf; margin-top:20px; padding-top:14px; font-size:10px; color:#708267; }
.wos-plan-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; }
.wos-plan,.wos-toolbox { min-width:0; border:1px solid #dfe5db; border-radius:14px; background:#fff; padding:22px; }
.wos-plan ol { list-style:none; margin:0; padding:0; }
.wos-plan li { display:flex; align-items:center; gap:10px; padding:19px 0; border-top:1px solid #eef0eb; }
.wos-plan li b { font-size:11px; font-weight:400; color:#869384; }
.wos-plan li strong { display:block; font-size:13px; font-weight:500; }
.wos-plan li small { display:block; color:#8d9689; font-size:10px; margin-top:5px; }
.wos-plan li em { font-style:normal; font-size:10px; color:#9ba599; white-space:nowrap; margin-left:auto; }
.wos-plan .wos-done em { color:#557c58; }
.wos-plan .wos-running { position:relative; background:#f7faf3; }
.wos-plan .wos-running::after { content:''; position:absolute; bottom:0; height:2px; left:0; width:45%; background:#94ad82; animation:wos-scan 3s ease-in-out infinite; }
.wos-context-tag { font-size:10px; color:#79906c; padding-top:15px; }
.wos-tool { border-left:2px solid #dbe6d3; padding:0 0 0 12px; margin-bottom:16px; }
.wos-tool span { font-size:12px; font-weight:500; }
.wos-tool p { font-size:10px; color:#8c9588; margin-top:4px; }
.wos-draft { border-top:1px solid #e6e9e2; padding-top:14px; }
.wos-draft small { display:block; font-size:10px; color:#809576; }
.wos-draft strong { font-size:15px; font-weight:500; }
.wos-decision-layout { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.wos-comparison { padding:22px; border-radius:14px; border:1px solid #e0e5db; background:#fff; }
.wos-comparison > div:not(.wos-card-eyebrow) { padding:12px 0; border-top:1px solid #edf0e8; }
.wos-comparison small { display:block; color:#8c9687; font-size:10px; }
.wos-comparison strong { display:block; font-size:14px; margin-top:4px; font-weight:500; }
.wos-comparison p { color:#87917f; font-size:11px; margin-top:5px; }
.wos-comparison .wos-evidence { padding-top:10px; border-top:1px solid #edf0e8; font-size:10px; }
.wos-approval { background:#f4ead5; border:1px solid #e2ceaa; border-radius:14px; padding:25px; display:flex; flex-direction:column; align-items:flex-start; }
.wos-person-label { display:flex; gap:9px; align-items:center; color:#927443; font-size:11px; }
.wos-person-label .wos-avatar { border-color:#f4ead5; }
.wos-approval h4 { font-size:20px; line-height:1.5; font-weight:500; margin:20px 0 12px; color:#644e2c; }
.wos-approval p { font-size:12px; line-height:1.9; color:#8b744e; margin-bottom:20px; }
.wos-approval button { margin-top:auto; padding:12px 16px; background:#31543e; color:white; border:0; border-radius:8px; font:inherit; font-size:12px; cursor:pointer; width:100%; display:flex; justify-content:space-between; }
.wos-approval > small { font-size:9px; color:#9c8968; margin-top:10px; }
.wos-results { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.wos-output { background:#fff; border:1px solid #dce5d7; padding:21px; border-radius:12px; }
.wos-output > span { display:block; color:#9aa88e; font-size:11px; margin-bottom:24px; }
.wos-output strong { display:block; font-size:15px; font-weight:500; }
.wos-output p { font-size:10px; color:#8d9887; margin:8px 0 22px; }
.wos-output small { font-size:10px; color:#68815b; border-top:1px solid #e6ebdf; padding-top:12px; display:block; }
.wos-continuation { display:flex; gap:20px; align-items:center; justify-content:space-between; margin-top:20px; padding:21px 24px; border:1px solid #ccdbc5; background:#eaf2e3; border-radius:12px; }
.wos-continuation span { display:block; font-size:10px; color:#7a936d; }
.wos-continuation strong { display:block; font-size:13px; font-weight:500; margin-top:6px; }
.wos-continuation small { display:block; font-size:10px; color:#7b8e71; margin-top:4px; }
.wos-continuation b { color:#99b28a; font-size:22px; }
.wos-reset { font:inherit; font-size:11px; padding:8px 0; border:0; background:none; color:#718c66; text-decoration:underline; cursor:pointer; margin-top:12px; }
.wos-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #e0e5dc; padding:13px 30px; color:#98a190; font-size:10px; }
.wos-bottom button { padding:6px 12px; background:transparent; border:1px solid #cbd8c3; border-radius:20px; font:inherit; color:#5f7b54; cursor:pointer; }
.wos-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-top:20px; }
.wos-tabs button { border:0; border-top:2px solid #e4e7e1; background:none; padding:16px 8px; text-align:left; font:inherit; font-size:14px; color:#899182; cursor:pointer; transition:color .25s,border-color .25s; }
.wos-tabs button span { margin-right:14px; font-size:11px; color:#b0b8aa; }
.wos-tabs button[aria-selected=true] { border-color:#2f4936; color:#2e4532; }
.wos-demo button:focus-visible { outline:2px solid #547849; outline-offset:3px; }
@keyframes wos-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes wos-scan { 0%,100% { transform:translateX(0);opacity:.4; } 50% { transform:translateX(100%);opacity:1; } }

/* 长任务运行：黑白灰机制演示，自动播放与人工确认暂停。 */
.runtime-demo { margin-top:38px; border:1px solid #ffffff20; background:#0b0b0b; border-radius:18px; padding:28px 28px 22px; color:#e8e8e8; }
.rt-top { display:flex; justify-content:space-between; font-size:11px; color:#9a9a9a; }
.rt-top span:first-child { color:#e8e8e8; }
.rt-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; margin-top:16px; }
.rt-controls button { font:inherit; font-size:12px; padding:9px 16px; border-radius:999px; border:1px solid #4d4d4d; background:transparent; color:#e8e8e8; cursor:pointer; transition:border-color .25s,color .25s,background-color .25s; }
.rt-controls button:hover { border-color:#9a9a9a; }
.rt-controls button[aria-pressed="true"] { background:#f5f5f5; border-color:#f5f5f5; color:#111111; }
.rt-controls [data-rt-status] { font-size:11px; color:#b5b5b5; margin-left:auto; }
.rt-note { font-size:10px; color:#7a7a7a; }
.rt-diagram { position:relative; margin-top:10px; }
.rt-connections { position:absolute; inset:0; width:100%; height:380px; pointer-events:none; }
.rt-connections path:not(defs path) { fill:none; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; }
.rt-main-path { stroke:#6e6e6e; }
.rt-return-path { stroke:#737373; stroke-dasharray:2 5; opacity:.7; }
.rt-skip-path { stroke:#737373; stroke-dasharray:2 5; opacity:.7; }
.rt-loop-path { stroke:#6e6e6e; }
.rt-connections text { fill:#9a9a9a; font-size:10px; font-family:var(--font); }
.rt-connections .rt-flow-path { stroke:#f5f5f5; stroke-width:1.6; stroke-dasharray:2.5 97.5; opacity:0; transition:opacity .3s; animation:rt-flow var(--rt-flow-ms,19800ms) linear infinite both; animation-play-state:paused; }
.runtime-demo.rt-playing .rt-flow-path { opacity:1; animation-play-state:running; }
@keyframes rt-flow { from { stroke-dashoffset:0; } to { stroke-dashoffset:-100; } }
.rt-grid { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:100px 100px; row-gap:80px; padding:30px 0; }
.rt-node { margin:0 14px; min-width:0; border:1px solid #3d3d3d; border-radius:10px; padding:12px 10px; background:#1a1a1a; color:#d6d6d6; font:inherit; cursor:pointer; text-align:left; transition:background-color .25s,border-color .25s,color .25s; }
.rt-node:hover { border-color:#6e6e6e; }
.rt-node small { display:block; font-size:10px; color:#8f8f8f; }
.rt-node strong { display:block; font-size:14px; font-weight:400; margin:8px 0 4px; color:#e8e8e8; }
.rt-node span { display:block; font-size:10px; color:#a3a3a3; }
.rt-node.rt-active { border-color:#f5f5f5; background:#f5f5f5; }
.rt-node.rt-active small { color:#5a5a5a; }
.rt-node.rt-active strong { color:#111111; }
.rt-node.rt-active span { color:#4a4a4a; }
.rt-next { grid-column:2; grid-row:2; }
.rt-store { grid-column:3; grid-row:2; }
.rt-human { grid-column:4; grid-row:2; border-style:dashed; border-color:#8f8f8f; background:#141414; }
.rt-human strong { color:#d6d6d6; }
.rt-check { grid-column:5; grid-row:2; }
.rt-explanation { display:grid; grid-template-columns:66px 1fr auto; align-items:center; gap:18px; border-top:1px solid #ffffff17; margin-top:18px; padding-top:22px; }
.rt-explanation > span { color:#9a9a9a; font-size:11px; }
.rt-explanation p { color:#cfcfcf; font-size:12px; line-height:1.8; margin:0; }
.rt-explanation button { border:1px solid #5c5c5c; background:none; color:#e8e8e8; border-radius:30px; padding:11px 15px; font:inherit; font-size:11px; cursor:pointer; white-space:nowrap; transition:border-color .25s,color .25s,background-color .25s; }
.rt-explanation button:hover { border-color:#9a9a9a; }
.rt-state-bar { display:flex; gap:20px; margin-top:22px; font-size:10px; color:#8f8f8f; border-top:1px solid #ffffff0c; padding-top:16px; }
.rt-state-bar span { color:#cfcfcf; }
.rt-state-bar p { margin:0; }
.rt-node:focus-visible,.rt-controls button:focus-visible,.rt-explanation button:focus-visible { outline:2px solid #f5f5f5; outline-offset:3px; }
@container (max-width:950px) {
 .wos-shell { grid-template-columns:1fr; }
 .wos-sidebar { display:none; }
 .wos-scenes { min-height:480px; }
}
@media(max-width:800px) {
 .wos-demo { width:calc(100% - 40px); display:flex; flex-direction:column; }
 .wos-tabs { order:-1; position:sticky; top:64px; z-index:3; background:#fff; margin-bottom:12px; padding-top:8px; }
 .runtime-demo { padding:22px 14px; }
 .rt-controls { gap:8px 10px; }
 .rt-controls [data-rt-status] { flex-basis:100%; margin-left:0; order:3; }
 .rt-note { order:4; }
 .rt-explanation { grid-template-columns:1fr; gap:12px; }
 .rt-explanation button { justify-self:start; }
 .rt-state-bar { flex-direction:column; gap:7px; }
}
@container (max-width:560px) {
 .wos-toolbar { padding:14px 18px; font-size:10px; }
 .wos-toolbar i { margin:0 7px; }
 .wos-scenes { padding:22px 18px; min-height:700px; }
 .wos-scene-heading h3 { font-size:23px; }
 .wos-scene-heading p { font-size:11px; }
 .wos-gather,.wos-plan-layout,.wos-decision-layout { grid-template-columns:1fr; gap:16px; }
 .wos-connect { display:none; }
 .wos-source { padding:12px; }
 .wos-source p { font-size:10px; }
 .wos-summary { padding:18px; }
 .wos-summary dl { display:grid; grid-template-columns:64px 1fr; gap:9px; }
 .wos-summary dt,.wos-summary dd { margin:0; }
 .wos-summary h4 { margin-bottom:16px; }
 .wos-plan,.wos-toolbox,.wos-comparison,.wos-approval { padding:18px; }
 .wos-toolbox { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
 .wos-toolbox > .wos-card-eyebrow,.wos-draft { grid-column:1 / -1; }
 .wos-results { grid-template-columns:1fr; gap:10px; }
 .wos-output { padding:16px; }
 .wos-output > span { margin-bottom:8px; }
 .wos-output p { margin:5px 0 10px; }
 .wos-continuation { flex-direction:column; align-items:flex-start; gap:12px; padding:18px; }
 .wos-continuation > b { transform:rotate(90deg); font-size:18px; }
 .wos-bottom { padding:12px 18px; }
 .wos-tabs { gap:6px; }
 .wos-tabs button { text-align:center; font-size:12px; padding:12px 0; }
 .wos-tabs button span { display:block; margin:0 0 4px; }
}
@media(prefers-reduced-motion:reduce) {
 .wos-scene:not([hidden]),.wos-plan .wos-running::after { animation:none; }
 .rt-connections .rt-flow-path,.runtime-demo.rt-playing .rt-flow-path { animation:none; opacity:0; }
 .rt-node,.rt-controls button,.rt-explanation button { transition:none; }
}


/* 缩放整张桌面流程图，而不是把九个节点堆成长列表。 */
.rt-viewport { position:relative; width:100%; overflow:hidden; margin-top:18px; }
.rt-canvas { position:relative; margin:0 auto; }
/* 脚本未执行时无 .rt-canvas 容器，保持上方 relative 兜底，避免流程图飞到视口左上角。 */
.rt-canvas > .rt-diagram { position:absolute; left:0; top:0; height:380px; margin:0; transform-origin:top left; }
.runtime-demo [hidden] { display:none!important; }
.runtime-demo.rt-expanded { position:fixed; inset:0; z-index:10000; margin:0; width:100%; height:100dvh; border-radius:0; padding:20px; display:flex; flex-direction:column; }
.rt-expanded .rt-viewport { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.rt-expanded .rt-top,.rt-expanded .rt-controls,.rt-expanded .rt-explanation,.rt-expanded .rt-state-bar { flex-shrink:0; }
@media(max-width:800px) {
 .runtime-demo { padding:18px 12px; }
 .runtime-demo .rt-controls button { min-height:42px; }
 .runtime-demo:not(.rt-expanded) .rt-diagram { pointer-events:none; }
 .rt-expanded .rt-diagram { pointer-events:auto; }
 .rt-expanded .rt-explanation { gap:8px; margin-top:10px; padding-top:10px; }
 .rt-expanded .rt-state-bar { display:none; }
}
@media(max-height:500px) and (orientation:landscape) {
 .rt-expanded { padding:10px!important; }
 .rt-expanded .rt-top,.rt-expanded .rt-state-bar { display:none; }
 .rt-expanded .rt-controls { margin-top:0; }
 .rt-expanded .rt-explanation { grid-template-columns:50px 1fr auto; font-size:11px; margin-top:5px; padding-top:5px; }
}

.rt-view-hint { color:#999; font-size:11px; margin:10px 0 0; }
.rt-expanded .rt-viewport { display:flex; align-items:center; }
.rt-expanded .rt-canvas { flex-shrink:0; }
@media(max-width:800px) {
 .runtime-demo .rt-state-bar { display:none; }
 .runtime-demo .rt-explanation { grid-template-columns:1fr auto; gap:10px; margin-top:12px; padding-top:12px; }
 .runtime-demo .rt-explanation p { grid-column:1 / -1; font-size:12px; }
 .runtime-demo .rt-explanation > span { grid-row:2; align-self:center; }
 .runtime-demo .rt-explanation button { grid-column:2; justify-self:end; }
}