/* Each scene depicts an implemented workflow, interface or evidenced comparison. */
.hero-visual{display:flex;align-items:center;justify-content:center}
.capability-demo{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:0}
.project-scene{width:100%;height:100%;max-height:440px;overflow:visible;display:block;font-family:var(--body)}
.scene-box{fill:#fff;stroke:#d4d5d6;stroke-width:1}
.scene-box-primary{stroke:#333;stroke-width:1.2;fill:#fafafa}
.scene-wire{fill:none;stroke:#a7a9ad;stroke-width:1;stroke-linejoin:round}
.scene-flow{fill:none;stroke:#525a65;stroke-width:1.5;stroke-dasharray:3 72;opacity:.75;stroke-linecap:round}
.scene-revision{fill:none;stroke:#aaa;stroke-width:1;stroke-dasharray:4 4}
.scene-title{font-size:17px;font-weight:600;fill:#222}
.scene-label{font-size:15px;fill:#444}
.scene-media-bg{fill:#f5f5f5;stroke:#e1e1e1;stroke-width:1}
.scene-empty-frame{fill:#fff;stroke:#e1e1e1;stroke-width:1;stroke-dasharray:3 4}
.scene-slot-corners{fill:none;stroke:#a8abb0;stroke-width:1}
.scene-small{font-size:11px;fill:#888}
.scene-platform-title{font-size:32px;font-weight:700;fill:#111}
.scene-chart-value{font:500 28px var(--mono);fill:#111}
.scene-book{fill:#fff;stroke:#333;stroke-width:1.2}
.scene-book-shadow{fill:#f2f2f2;stroke:#ddd;stroke-width:1}
.scene-book-title{font-size:17px;font-weight:650;fill:#111}
.scene-award{fill:#f6f6f6;stroke:#ddd}
@media(prefers-reduced-motion:no-preference){
 .scene-wire{stroke-dasharray:1;animation:scene-wire-draw .74s .11s cubic-bezier(.25,.6,.35,1) both}
 .scene-flow{animation:scene-flow-appear .2s .77s both,scene-travel 7s .77s linear infinite}
 .scene-node,.scene-stage{animation:scene-node-arrive .36s calc(var(--arrival,0ms)*.55) cubic-bezier(.2,.65,.3,1) both}
 .scene-image{animation:scene-image-reveal .47s calc(var(--arrival,0ms)*.55 + 55ms) ease-out both}
 .scene-revision{animation:scene-flow-appear .28s .72s both}
 .scene-bar{transform-box:fill-box;transform-origin:left center;animation:scene-bar-grow .77s .11s cubic-bezier(.22,.61,.36,1) both}
 .scene-bar-ai{animation-delay:.22s}
 .scene-audio-bar{transform-box:fill-box;transform-origin:center;animation:scene-wave 1.6s var(--wave,0s) ease-in-out infinite alternate}
 .hero-art[data-motion="paused"] .scene-flow{animation-play-state:running,paused}
 .hero-art[data-motion="paused"] .scene-audio-bar{animation-play-state:paused}
 @keyframes scene-wire-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
 @keyframes scene-flow-appear{from{opacity:0}to{opacity:.75}}
 @keyframes scene-travel{to{stroke-dashoffset:-150}}
 @keyframes scene-node-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
 @keyframes scene-image-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
 @keyframes scene-bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
 @keyframes scene-wave{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
}
@media(prefers-reduced-motion:reduce){.scene-flow{display:none}}
@media(max-width:760px){.home-intro .hero-visual{display:none}}

.marketing-map-title{font-size:27px;font-weight:650;fill:#20252a;letter-spacing:-.035em}
.marketing-stage-title{font-size:20px;font-weight:600;fill:#23272b}
.marketing-stage-detail{font-size:15px;fill:#545b62}
.marketing-arrow{fill:none;stroke:#6e7986;stroke-width:1.5;stroke-linejoin:round}
@media(prefers-reduced-motion:no-preference){
 .marketing-edge .scene-wire{animation-delay:calc(var(--edge-delay)*.55)}
 .marketing-arrow{animation:scene-flow-appear .2s calc(var(--edge-delay)*.55 + .36s) both}
}

.lj-map-heading{font-size:23px;font-weight:650;fill:#202326}
.lj-map-title,.lj-map-tool{font-size:18px;font-weight:600;fill:#202326}
.lj-map-detail{font-size:14px;fill:#50575e}
.lj-map-direction{fill:none;stroke:#80878d;stroke-width:1.4;stroke-linejoin:round}

.opp-node-title{font-size:17px;font-weight:600;fill:#23272b}
.opp-node-sub{font-size:14px;fill:#525c62}
.opp-row-title{font-size:16px;font-weight:550;fill:#424b50}
.opp-tip{fill:none;stroke:#80878d;stroke-width:1.4}

.campaign-map {max-height:500px}
.campaign-stage-title {font-size:19px;font-weight:620;fill:#22272b}
.campaign-core .scene-box {fill:#22272b;stroke:#22272b}
.campaign-core .campaign-stage-title {fill:#fff;font-weight:650}
.campaign-format {font-size:15px;font-weight:550;fill:#333b40}

.lj-tool-label{font-size:14px;font-weight:400;fill:#515a63}
.lj-tool-featured{font-weight:700;fill:#2056b3}
.bot-user-disc,.bot-sandbox{fill:#f8f9fa;stroke:#ccd1d6}
.bot-pictogram,.bot-chevron{fill:none;stroke:#68727c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bot-agent{fill:#faf7ff;stroke:#b3a1c7}
.bot-main-title{font-size:19px;font-weight:650;fill:#282531}
.bot-meta,.bot-agent-detail{font-size:14px;fill:#535864}
.bot-tool{font-size:16px;font-weight:550;fill:#32383d}
.hero-visual[data-phase="kuafu"] .project-scene{max-height:480px}
.kf-logic-name,.kf-time-name {font:600 15px var(--body);fill:#282e32}
.kf-time-date {font:500 13px var(--mono);fill:#626b71}
.kf-time-point {fill:#2358b7}
.kf-time-role{font:400 12px var(--body);fill:#65717c}

.kf-level{font:600 13px var(--body)}.kf-level.group{fill:#895121}.kf-level.national{fill:#24599b}.kf-level.industry{fill:#147153}

.copy-time-label{font:550 16px var(--body);fill:#535962}
.copy-duration{font:650 20px var(--body);fill:#3e434b}
.copy-time-label.ai,.copy-duration.ai{fill:#7540ae}
.copy-manual-bar{fill:#d9dcdf}
.copy-ai-bar{fill:#8951cb;filter:drop-shadow(0 0 3px #ad84d7)}
.copy-rule{fill:none;stroke:#e2e3e6}
.copy-profile-label{font:550 14px var(--body);fill:#50445d}
.copy-input-note,.copy-profile-names{font:400 12px var(--body);fill:#58616b}
.copy-model rect{fill:#fff;stroke:#8654bb;stroke-width:1.6}
.copy-model path{fill:none;stroke:#763eb3;stroke-width:2.2;stroke-linecap:round}
@media(prefers-reduced-motion:no-preference){
 .copy-model rect{animation:copy-glow 3s ease-in-out infinite}
 .copy-type{stroke-dasharray:40;animation:copy-compose 3s ease-in-out infinite}
 .writer-thought{animation:copy-think 3.4s ease-in-out infinite}
 @keyframes copy-glow{50%{filter:drop-shadow(0 0 3px #ab76eb)}}
 @keyframes copy-compose{0%,12%{stroke-dashoffset:40;opacity:.2}65%,100%{stroke-dashoffset:0;opacity:1}}
 @keyframes copy-think{0%,75%,100%{transform:translateY(0);opacity:.4}45%{transform:translateY(-2px);opacity:1}}
 .hero-art[data-motion="paused"] :is(.copy-model rect,.copy-type,.writer-thought){animation-play-state:paused}
}

/* Publication stages and agent roles share the roster used by the full case. */
.hero-visual[data-phase="openclaw"]{height:auto;flex:1 0 auto}
.hero-visual[data-phase="openclaw"] .capability-demo{height:auto}
.publishing-map{width:100%;container-type:inline-size;color:#262631}
.publishing-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #dfe0e5}
.publishing-heading h3{margin:0;font:650 20px/1.4 var(--body)}
.publishing-heading>span{color:#716a7b;font:12px var(--body)}
.publishing-stages,.publishing-roles{list-style:none;padding:0;margin:0}
.publishing-stage{position:relative;display:grid;grid-template-columns:145px minmax(0,1fr);align-items:start;gap:12px;padding:11px 0}
.publishing-step{display:flex;align-items:center;gap:8px;min-height:24px}
.publishing-step>span{display:grid;place-items:center;position:relative;z-index:1;width:22px;height:22px;flex:none;border:1px solid #bfb4cd;border-radius:50%;background:white;color:#71538e;font:10px/1 var(--mono)}
.publishing-step b{font:600 13px/1.4 var(--body)}
.publishing-stage:not(:last-child)::before{content:"";position:absolute;left:10.5px;top:23px;bottom:-23px;width:1px;background:#d3ccd9}
.publishing-roles{display:flex;flex-wrap:wrap;gap:5px}
.publishing-role{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border:1px solid #e2dfe6;border-radius:3px;font:12px/1.35 var(--body);color:#393641;background:#fff}
.publishing-role::before{content:"";width:5px;height:5px;border-radius:1px;background:#9681ac;flex:none}
.publishing-delivery{align-items:center;padding-bottom:3px}
.publishing-delivery .publishing-step>span{color:#fff;background:#71538e;border-color:#71538e}
.published-manuscript{display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;color:inherit;text-decoration:none}
.published-manuscript img{object-fit:contain}.published-manuscript strong{font:600 14px/1.5 var(--body)}.published-manuscript small{font:12px/1.5 var(--body);color:#6d547c}
.published-manuscript:hover small,.published-manuscript:focus-visible small{text-decoration:underline}
@container(max-width:480px){
 .publishing-stage{grid-template-columns:114px minmax(0,1fr);gap:8px}
 .publishing-step{gap:5px}.publishing-step b{font-size:12px}
 .publishing-roles{gap:4px}.publishing-role{padding:2px 5px}
 .published-manuscript{flex-wrap:wrap}
}
@media(prefers-reduced-motion:no-preference){
 .publishing-stage{animation:scene-node-arrive .24s calc(var(--stage-order)*44ms) both}
}
.hero-visual:is([data-phase="book-ip"],[data-phase="mystery"]){height:auto;flex:1 0 auto}
.hero-visual:is([data-phase="book-ip"],[data-phase="mystery"]) .capability-demo{height:auto}

/* Product-specific complete faint frames; real assets keep their original colors. */
.project-scene.semantic-scene{max-height:510px}
.semantic-scene text{font-family:var(--body)}
.semantic-scene a{cursor:pointer}
.semantic-scene a:focus-visible{outline:1px solid #555;outline-offset:3px}