/* A real-work storyboard: product connections, human decisions and policy layers. */
.connected-systems{background:linear-gradient(180deg,#f2f7fd,#fff 80%)}
.system-role-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;padding:5px;border:1px solid #d8e4f0;background:#fff;border-radius:13px}
.system-role-tabs button{flex:1;white-space:nowrap;border:0;border-radius:9px;padding:13px 16px;background:transparent;color:#4b627a;font:600 12px/1.4 Inter,sans-serif;min-height:46px;cursor:pointer}
.system-role-tabs button[aria-selected=true]{background:#1268da;color:#fff;box-shadow:0 5px 14px #176bde27}
.system-workspace{border:1px solid #bed1e5;border-radius:21px;overflow:hidden;background:#fff;box-shadow:0 20px 65px #153e6912;outline-offset:5px}
.system-goal{display:flex;align-items:center;gap:14px;padding:18px 25px;background:#07243d;color:#fff}
.system-goal>span:first-child{display:grid;place-items:center;width:42px;height:42px;background:#22608766;border:1px solid #a1e5ff35;border-radius:11px;color:#a9eaff;flex-shrink:0}
.system-goal small{display:block;color:#acd2ed;font-size:9px;letter-spacing:.1em;margin-bottom:4px}.system-goal strong{font:500 20px/1.2 Outfit,sans-serif;letter-spacing:-.01em;color:#fff}
.system-example-label{margin-left:auto;padding:6px 9px;border:1px solid #83b7da50;border-radius:6px;color:#bddbf2;font-size:10px;white-space:nowrap}
.system-story-heading{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:24px 27px 17px;border-bottom:1px solid #e2eaf2}.system-role-name{display:block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:#2c6eb2;margin-bottom:6px}.system-title{font:600 29px/1.1 Outfit,sans-serif;letter-spacing:-.025em;margin:0;color:#0b2943}
.system-play{display:flex;align-items:center;gap:8px;min-height:40px;padding:9px 13px;border:1px solid #b8d3ed;border-radius:8px;color:#1b65aa;background:#f2f8ff;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}.system-play .icon{width:15px;height:15px}.system-play[aria-pressed=true]{background:#d8efff}
.system-story{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.system-visual{background:radial-gradient(ellipse at 50% 45%,#e9f4ff,#f6faff 65%);border-right:1px solid #d9e6f2;padding:6px 17px 12px;min-width:0}
.system-graph{height:365px;position:relative;isolation:isolate;min-width:0}
.system-graph-grid{position:absolute;inset:0;z-index:-2;background-image:radial-gradient(#99bce16b .8px,transparent .8px);background-size:16px 16px;mask-image:radial-gradient(ellipse,#000,transparent 77%)}
.system-graph>svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}.system-wire{stroke:#a5bfd9;stroke-width:1.2;opacity:.5;vector-effect:non-scaling-stroke;transition:stroke .3s,opacity .3s}.system-wire.is-control{stroke-dasharray:5 5;stroke:#6f86ad}.system-wire.is-active{stroke:#2b8fe0;stroke-width:2;opacity:.9}.system-packet{stroke:#267edb;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 800;opacity:0;vector-effect:non-scaling-stroke}.system-packet.is-active{opacity:1}
.system-node{position:absolute;width:158px;transform:translate(-50%,-50%);padding:12px 13px;background:#fff;border:1px solid #c3d5e6;box-shadow:0 6px 18px #2153810a;border-radius:12px;transition:border-color .3s,box-shadow .3s,background .3s}.system-node-0{left:19%;top:20.833%}.system-node-1{left:81%;top:20.833%}.system-node-2{left:50%;top:52.5%}.system-node-3{left:19%;top:81.667%}.system-node-4{left:81%;top:81.667%}.system-node>div{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}.system-node>div>span{color:#5581a7}.system-node .icon{width:20px;height:20px;display:block}.system-node small{font-size:7px;letter-spacing:.09em;color:#6c859b;font-weight:600}.system-node strong{display:block;font:600 15px/1.16 Outfit,sans-serif;color:#173750}.system-node p{font:400 10px/1.45 Inter,sans-serif;margin:5px 0 0;color:#677d91;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:27px}.system-node.is-active{background:linear-gradient(130deg,#f9fdff,#e7f3ff);border-color:#2d95e8;box-shadow:0 0 0 3px #83cafd21,0 9px 24px #2082d620}.system-node.is-active .icon{color:#1276cf}
.system-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 16px;color:#678097;font-size:8px;padding-top:4px}.system-legend>span{display:flex;gap:5px;align-items:center}.system-legend i{width:12px;height:2px;background:#479ade}.system-legend>span:nth-child(2) i{height:5px;width:5px;border:1px solid #55748e;border-radius:50%;background:transparent}.system-legend>span:nth-child(3) i{background:repeating-linear-gradient(90deg,#55748e 0 3px,transparent 3px 5px)}
.system-stage-panel{display:flex;flex-direction:column;padding:28px;min-width:0;background:#fff}.system-stage-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px}.system-step-count{color:#6c8399;font-size:9px;letter-spacing:.08em}.system-event{font-size:8px;font-weight:600;color:#2c729d;border:1px solid #c9e3ef;border-radius:4px;padding:5px 7px;background:#edf8fc;line-height:1.4}.system-stage-panel h4{font:600 30px/1.1 Outfit,sans-serif;letter-spacing:-.025em;color:#12334d;margin:0 0 14px}.system-stage-copy{font-size:13px;line-height:1.7;color:#587088;margin:0 0 15px;min-height:65px}.system-human-gate{display:flex;align-items:center;gap:7px;font-size:10px;color:#866238}.system-human-gate .icon{width:14px;height:14px}.system-human-gate b{font-weight:500}.system-human-gate.is-automatic{color:#317797}.system-role-goal{border-top:1px solid #e0e9f2;padding-top:15px;margin-top:18px}.system-role-goal>span{font-size:8px;font-weight:600;color:#7290a7;letter-spacing:.1em}.system-role-goal p{font-size:11px;line-height:1.6;color:#496880;margin:6px 0 0}.system-stage-actions{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:18px}.system-stage-actions button{border:0;background:#f0f7ff;color:#246fb6;border-radius:7px;padding:9px 12px;min-height:36px;display:flex;align-items:center;gap:14px;font-size:11px;cursor:pointer}.system-stage-actions .icon{width:16px;height:16px}.system-prev .icon{transform:rotate(180deg)}.system-stage-actions button:disabled{opacity:.35;cursor:default}
.system-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid #d9e5ef;border-bottom:1px solid #d9e5ef;background:#f8fbff}.system-steps button{border:0;border-right:1px solid #d9e5ef;padding:17px 14px;display:flex;align-items:flex-start;gap:10px;text-align:left;min-width:0;background:transparent;color:#71899c;cursor:pointer;min-height:82px}.system-steps button:last-child{border-right:0}.system-steps button>span{font:500 18px/1 Outfit,sans-serif;color:#9bb1c4;flex-shrink:0}.system-steps button>strong{font:500 10px/1.5 Inter,sans-serif;max-width:160px}.system-steps button[aria-pressed=true]{background:#e5f2ff;box-shadow:inset 0 3px #268ae0;color:#145e9a}.system-steps button[aria-pressed=true]>span{color:#1b78c9}
.system-value-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:22px 27px;gap:22px;background:#eef6fd;border-bottom:1px solid #dae6f2}.system-value-strip>div{display:grid;grid-template-columns:1fr 16px;gap:4px 8px;min-width:0}.system-value-strip>div>span{font-size:8px;letter-spacing:.11em;color:#417aa7;text-transform:uppercase;font-weight:600;grid-column:1/-1}.system-value-strip small{font-size:10px;color:#8595a4;line-height:1.5}.system-value-strip .icon{width:14px;height:14px;color:#4b9acf}.system-value-strip strong{font:600 14px/1.3 Outfit,sans-serif;color:#224963;grid-column:1/-1}
.system-change{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:23px 28px}.system-change>div>span{font-size:8px;letter-spacing:.1em;font-weight:600;color:#5685ac}.system-change p{font-size:11px;line-height:1.7;color:#5a738b;margin:8px 0 0}.system-details{border-top:1px solid #e1eaf3}.system-details>summary{display:flex;justify-content:space-between;list-style:none;padding:17px 27px;color:#53778f;font-size:11px;cursor:pointer}.system-details>summary::-webkit-details-marker{display:none}.system-details[open]>summary>span{transform:rotate(45deg)}.system-evidence{padding:0 27px 26px}.system-evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 30px;border-top:1px solid #e2ebf2;padding-top:22px}.system-evidence-grid article>strong{font:600 16px/1.3 Outfit,sans-serif;color:#24445e}.system-evidence-grid p{font-size:11px;line-height:1.7;color:#61758a;margin:7px 0}.system-evidence-grid article>div{display:flex;flex-wrap:wrap;gap:8px}.system-evidence-grid a{font-size:9px;color:#2375b9;text-decoration:underline;text-underline-offset:3px;display:flex;gap:4px;align-items:center}.system-evidence-grid a .icon{width:11px;height:11px;flex-shrink:0}.system-requirements{margin-top:22px;padding:20px;background:#f3f7fb;border-radius:9px;color:#526b80}.system-requirements>strong{font-size:12px}.system-requirements ul{padding-left:16px;font-size:11px;line-height:1.8}.system-requirements>p{font-size:10px;line-height:1.6;margin:10px 0 0}.system-closing{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:18px}.system-closing p{font-size:11px;color:#6c8296;line-height:1.7;max-width:690px;margin:0}.system-closing a{font-size:11px;white-space:nowrap}.system-noscript{padding:25px;font-size:14px}.connected-systems button:focus-visible{outline:3px solid #6ab8f5;outline-offset:3px}
html[data-motion=on][data-page-visible=true] .system-packet.is-active{animation:system-signal 6s linear infinite}@keyframes system-signal{to{stroke-dashoffset:-802}}
html[data-motion=off] .system-packet,html[data-page-visible=false] .system-packet{animation-play-state:paused!important}
@media(max-width:1100px){.system-node{width:142px;padding:10px}.system-node strong{font-size:14px}.system-stage-panel{padding:23px}.system-title{font-size:26px}.system-story{grid-template-columns:minmax(0,1.17fr) minmax(0,1fr)}.system-role-tabs button{padding-inline:10px}.system-example-label{display:none}.system-steps button{padding:14px 10px;gap:7px}.system-stage-panel h4{font-size:28px}}
@media(max-width:900px){.system-story{grid-template-columns:1fr}.system-visual{border-right:0;border-bottom:1px solid #d9e6f2}.system-graph{height:360px;max-width:670px;margin:auto}.system-node{width:165px}.system-node strong{font-size:16px}.system-stage-panel{padding:26px;min-height:310px}.system-stage-copy{min-height:0;max-width:600px}.system-role-goal{margin-top:14px}.system-role-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.system-story-heading{padding:21px}.system-title{font-size:27px}.system-steps button>strong{font-size:10px}.system-change{gap:22px}.system-closing{align-items:flex-start}}
@media(max-width:600px){.system-workspace{border-radius:15px}.system-role-tabs button{font-size:10px;min-height:43px;padding:10px 5px;white-space:normal}.system-role-tabs{gap:3px;padding:4px}.system-goal{padding:16px;gap:10px}.system-goal strong{font-size:17px;line-height:1.25}.system-goal small{font-size:8px}.system-goal>span:first-child{width:35px;height:35px}.system-story-heading{display:block;padding:20px 18px 17px}.system-title{font-size:26px}.system-play{margin-top:14px;min-height:41px}.system-visual{padding:6px 7px 14px}.system-graph{height:350px}.system-node{width:112px;padding:9px 8px;border-radius:9px}.system-node strong{font-size:12px;line-height:1.15}.system-node p{font-size:8px;min-height:23px;-webkit-line-clamp:2}.system-node small{font-size:6px;letter-spacing:.03em}.system-node .icon{width:17px;height:17px}.system-node>div{margin-bottom:6px}.system-node-0,.system-node-3{left:20%}.system-node-1,.system-node-4{left:80%}.system-stage-panel{padding:23px 20px;min-height:350px}.system-stage-panel h4{font-size:29px}.system-stage-copy{font-size:13px}.system-steps{grid-template-columns:repeat(5,minmax(0,1fr))}.system-steps button{padding:12px 3px;min-height:48px;justify-content:center}.system-steps button>strong{display:none}.system-steps button>span{font-size:18px}.system-value-strip{grid-template-columns:1fr;padding:21px;gap:15px}.system-value-strip>div{border-bottom:1px solid #d6e5f2;padding-bottom:12px;grid-template-columns:75px 1fr 18px;align-items:center}.system-value-strip>div:last-child{border:0;padding:0}.system-value-strip>div>span{grid-column:1;grid-row:1/3}.system-value-strip strong{grid-column:2/4;font-size:14px}.system-value-strip small{font-size:10px}.system-change{grid-template-columns:1fr;padding:23px 21px;gap:20px}.system-change p{font-size:12px}.system-evidence-grid{grid-template-columns:1fr}.system-evidence,.system-details>summary{padding-inline:20px}.system-details>summary{font-size:10px;gap:12px}.system-closing{display:block}.system-closing p{font-size:11px}.system-closing a{margin-top:10px}.system-legend{font-size:7px;gap:7px 10px}.system-requirements{padding:16px}.system-legend>span{gap:4px}}
@media(max-width:365px){.system-node{width:100px}.system-node strong{font-size:11px}.system-node p{font-size:8px}.system-node small{font-size:5.5px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .connected-systems *{animation:none!important;transition:none!important}}

/* V2.2 — scene-based tool tours, with a stable five-node composition. */
.system-scene-toolbar{padding:14px 26px 16px;border-bottom:1px solid #dce8f3;background:linear-gradient(120deg,#f9fcff,#eff7ff)}
.system-scene-toolbar>div:first-child{display:flex;align-items:center;gap:7px;margin-bottom:10px;flex-wrap:wrap}.system-tour-status{font-size:10px;font-weight:600;color:#3a6e96}.system-scene-toolbar small{margin-left:auto;font-size:10px;color:#6a8196}.system-tour-indicator{width:6px;height:6px;flex:none;background:#88a6bd;border-radius:50%;box-shadow:0 0 0 3px #dcebf6}.system-workspace[data-playing=true] .system-tour-indicator{background:#138fcc;box-shadow:0 0 0 3px #d0edfb}
.system-scene-tabs{display:flex;gap:7px;flex-wrap:wrap}.system-scene-tabs button{display:flex;align-items:center;gap:7px;border:1px solid #cadcea;border-radius:7px;background:#fff;color:#47647e;padding:9px 12px;min-height:38px;font:600 11px/1.3 Inter,sans-serif;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,color .2s}.system-scene-tabs button>span{font-size:8px;color:#8b9fb1}.system-scene-tabs button[aria-pressed=true]{background:#e0efff;border-color:#2b8fe0;color:#155e9d}.system-scene-tabs button[aria-pressed=true]>span{color:#397fbb}.system-scene-tabs button:hover{border-color:#6eaddb;background:#edf6ff}
.system-scene-intro{padding:17px 11px 0;min-height:66px}.system-scene-number{font-size:8px;letter-spacing:.12em;color:#5480a6;font-weight:600}.system-scene-heading{font:500 18px/1.3 Outfit,sans-serif;color:#274e6d;margin:5px 0 0;max-width:560px}.system-node{text-align:left;cursor:pointer;color:inherit;font:inherit}.system-node-head{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}.system-node-head>span{color:#5581a7}.system-node-job{font:400 10px/1.45 Inter,sans-serif;margin:5px 0 0;color:#677d91;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:27px}.system-node:hover,.system-node[aria-pressed=true]{border-color:#3188c8;box-shadow:0 0 0 3px #b5dffa50,0 8px 24px #124f7920}.system-node.is-active{transition:background .6s,border-color .6s,box-shadow .6s}
.system-wire.is-handoff{stroke:#be9253;stroke-dasharray:3 5}.system-wire.is-handoff.is-active{stroke:#b07c35}.system-wire.is-control.is-active{stroke:#7a7aa8}.system-legend>span:nth-child(2) i{height:2px;width:12px;border:0;border-radius:0;background:repeating-linear-gradient(90deg,#b88b50 0 2px,transparent 2px 4px)}
.system-connection-label{font-size:10px;line-height:1.6;color:#446b8c;text-align:center;min-height:32px;margin:11px 8px 4px}.system-scene-fit{font-size:11px;line-height:1.65;color:#5d7890;margin:0;padding:14px 27px;background:#fbfdff;border-bottom:1px solid #dce7f1;min-height:65px}.system-tool-detail{background:#fff;border:1px solid #bdd7ec;border-radius:9px;padding:13px 15px;margin:9px 5px 3px;box-shadow:0 5px 18px #204d7010}.system-tool-detail[hidden]{display:none}.system-tool-detail strong{font:600 15px/1.3 Outfit,sans-serif;color:#1c5079}.system-tool-detail p{font-size:11px;color:#486980;line-height:1.6;margin:5px 0}.system-tool-detail>span{font-size:9px;color:#698398;line-height:1.6;display:block}.system-tour-progress{height:2px;background:#e6f0f9;overflow:hidden}.system-tour-progress>span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#0864d3,#66d8eb);transform:scaleX(0);transform-origin:left}.system-workspace[data-playing=true] .system-tour-progress>span{animation:system-tour-progress 5.4s linear infinite}.system-workspace[data-playing=false] .system-packet{animation-play-state:paused!important}.system-stage-panel{min-height:480px}.system-stage-panel h4{min-height:66px}.system-stage-copy{min-height:110px}
@keyframes system-tour-progress{to{transform:scaleX(1)}}
@media(max-width:1100px){.system-node-job{font-size:9px}.system-scene-heading{font-size:17px}}
@media(max-width:900px){.system-stage-panel{min-height:350px}.system-stage-panel h4{min-height:0}.system-stage-copy{min-height:85px}.system-scene-tabs button{min-height:42px}.system-node-job{font-size:10px}.system-scene-intro{max-width:670px;margin:auto}}
@media(max-width:600px){.system-scene-toolbar{padding:14px 17px}.system-scene-toolbar small{margin-left:0;flex-basis:100%;padding-left:13px}.system-scene-tabs{gap:6px}.system-scene-tabs button{font-size:10px;padding:9px 10px;flex:1 1 100px;min-height:44px;justify-content:center}.system-scene-intro{padding:16px 11px 0;min-height:74px}.system-scene-heading{font-size:17px}.system-node-head{margin-bottom:6px}.system-node-job{font-size:8px;min-height:24px}.system-scene-fit{padding:15px 20px;font-size:10px;min-height:92px}.system-stage-panel{min-height:370px}.system-stage-copy{min-height:115px}.system-connection-label{font-size:9px;min-height:35px}.system-tool-detail{margin-inline:9px}.system-tour-status{font-size:9px}}
html[data-motion=off] .connected-systems *,html[data-page-visible=false] .connected-systems *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.connected-systems *{animation:none!important;transition:none!important}}