/* Playgrounds / Living hero. Screenshot-led styling. No remote fonts or assets. */
:root{color-scheme:dark;--bg:#151614;--paper:#fff;--cream:#f7f3ea;--green:#5C8A3A;--green-light:#E8F1EA;--muted:#a6a7a1;--serif:'Times New Roman',Times,serif;--sans:'Hanken Grotesk','Inter',Arial,Helvetica,sans-serif}
/* Base resets the diagram relies on, scoped so they can't leak into the site */
.hero-visual .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hero-visual [hidden]{display:none!important}
.hero-visual button,.hero-visual a{-webkit-tap-highlight-color:transparent}
.hero-visual button{font:inherit}
.hero-visual button,.hero-visual summary{cursor:pointer}
.hero-visual button:disabled{cursor:default}
.hero-visual a:focus-visible,.hero-visual button:focus-visible,.hero-visual summary:focus-visible{outline:2px solid #A9C195;outline-offset:6px;border-radius:4px}
.hero-visual *,.hero-visual *::before,.hero-visual *::after{box-sizing:border-box}


.hero-visual{position:relative;margin:0;min-width:0;width:100%;padding-bottom:45px;transform:translate(84px,14px)}
.diagram-stage{position:relative;width:100%;aspect-ratio:880/550}
.hero-svg{width:100%;height:100%;display:block;overflow:visible;contain:layout style}
.hero-svg text{font-family:var(--sans)}
.hero-svg .icon{color:#222922}
.scene{isolation:isolate}
.plate-shadow{fill:#090b09;opacity:.22;filter:url(#tile-shadow)}
.plate-edge{fill:#d1d2ce;stroke:#cccfca;stroke-width:.65}
.plate-face{fill:url(#plate-fill);stroke:#fdfdfb;stroke-width:.5}
.plate-rim{fill:none;stroke:#A9C195;stroke-width:1.15;opacity:0}
.badge-face{fill:#fff;stroke:#e8e9e5;stroke-width:1;filter:url(#small-shadow)}
.agent-badge .badge-face{fill:#E8F1EA;stroke:#CFE0D2;stroke-width:1.5}
.agent-badge .icon{color:#4F8A5B}
.plate-badge .icon{stroke-width:1.4}
.layer-name{fill:#fff;font-size:16.3px;font-weight:600;letter-spacing:-.22px}
.layer-number{fill:#a1a39d;font-size:15.5px;font-weight:500}
.layer-leader{fill:none;stroke:#bbbdb5;stroke-width:1.6;stroke-dasharray:5 5;stroke-linecap:round}
.stack-signal-track{fill:none;stroke:#5b6b57;stroke-width:1;opacity:0}
.stack-signal{fill:none;stroke:#A9C195;stroke-width:2;opacity:0;stroke-dasharray:.09 .91;stroke-dashoffset:0}
.os-bracket{fill:none;stroke:#5C8A3A;stroke-width:1.6}
.os-badge{fill:#E8F1EA;stroke:#CFE0D2;stroke-width:1}
.os-governance .icon{color:#3D5E24}
.os-title{fill:#fff;font-size:16.4px;font-weight:600}
.os-copy{fill:#dcddd6;font-size:14.4px;font-weight:400;letter-spacing:.06px}
.scene-title{fill:#f6f5ef;font-size:20px;font-weight:500;letter-spacing:-.35px}
.scene-subtitle{fill:#a4aaa0;font-size:14px;font-weight:400}
.node-edge{fill:#c9cdc4;stroke:#cdd3c7;stroke-width:.7}
.node-face{fill:#fafbf8;stroke:#fff;stroke-width:.65}
.node-label{fill:#242b23;font-size:16px;font-weight:500}
.source-card .icon{color:#51644b}
.data-track{fill:none;stroke:#384b37;stroke-width:1.35}
.data-flow{fill:none;stroke:#8FB36B;stroke-width:1.7;stroke-dasharray:1 1;stroke-dashoffset:1}
.data-particle{fill:#A9C195;opacity:0}
.brain-face{fill:#e8f0e5;stroke:#c1d2b8;stroke-width:1}
.brain-hub .icon{color:#3D5E24;stroke-width:1.65}
.brain-title{fill:#2d4027;font-size:18px;font-weight:600}
.brain-sub{fill:#607454;font-size:13px}
.data-note{fill:#a9b3a0;font-size:13px;font-weight:400;letter-spacing:.1px}
.request-face{fill:#20261f;stroke:#4c6244;stroke-width:1}
.request-card .icon{color:#b1c6a5}
.request-text{fill:#ecefe7;font-size:17px;font-weight:400}
.request-tag{fill:#a0b293;font-size:10px;letter-spacing:1.3px}
.agent-face{fill:#f7faf4;stroke:#d0dbc8;stroke-width:1}
.agent-workspace .icon{color:#598152}
.work-title{fill:#253421;font-size:17px;font-weight:600}
.work-status{fill:#6d7d62;font-size:12px}
.work-task{opacity:.38}
.work-task text{fill:#3e4f34;font-size:12.5px;font-weight:500;letter-spacing:-.15px}
.task-dot{fill:none;stroke:#9daf92;stroke-width:1}
.task-tick{fill:none;stroke:#fff;stroke-width:1.4;opacity:0;stroke-linecap:round;stroke-linejoin:round}
.workflow-track{fill:none;stroke:#49653c;stroke-width:1.3}
.workflow-running{fill:none;stroke:#a6c795;stroke-width:2;stroke-dasharray:1 1;stroke-dashoffset:1}
.approval-kicker{font-size:12px;fill:#b1c5a3;letter-spacing:.25px;paint-order:stroke;stroke:#151614;stroke-width:6px;stroke-linejoin:round}
.approval-face{fill:#1c261a;stroke:#658657;stroke-width:1.1}
.approval-title{fill:#cee0c2;font-size:16px;font-weight:500}
.approval-illustration .icon{color:#c6dabc}
.approval-note{fill:#b6c2aa;font-size:12.5px}
.output-track{fill:none;stroke:#4e6046;stroke-width:1;stroke-dasharray:3 4}
.approved-line{fill:none;stroke:#a4c593;stroke-width:2;opacity:0}
.output-face{fill:#f2f3ec;stroke:#d9dece;stroke-width:1}
.output-edge{fill:#bac4ae;stroke:#b0bf9f;stroke-width:.7}
.output-title{fill:#293a23;font-size:15px;font-weight:500}
.output-sub{fill:#5b704d;font-size:11px}
.output-card .icon{color:#587049}
.workflow-footnote{fill:#a9b3a0;font-size:13px}
.output-card.is-approved .output-face{fill:#f3f7ed;stroke:#eaf1e2}
.output-card.is-approved .output-edge{fill:#b2bea4}
.output-card.is-approved .output-title{fill:#2c4223}
.output-card.is-approved .output-sub{fill:#527045}
.output-card.is-approved .icon{color:#4e7540}
.approval-control-wrap{position:absolute;left:39.32%;top:57.45%;transform:translate(-50%,-50%);width:27.1%;text-align:center}
.approval-button{border:1px solid #92ae7f;border-radius:30px;background:#e7f0df;color:#2c4721;min-height:40px;width:100%;padding:7px 13px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(11px,1vw,15px);font-weight:600;white-space:nowrap;box-shadow:0 4px 14px #0002;transition:background .2s,transform .2s}
.approval-button:hover{background:#f5f9ee;transform:translateY(-1px)}
.approval-button:disabled{background:#283d21;color:#dae9d0;border-color:#6c9158}
.approval-disclaimer{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);color:#a4b09b;font-size:10px;white-space:nowrap;pointer-events:none}
.motion-controls{position:absolute;left:8.4%;right:2%;bottom:0;display:flex;align-items:center;gap:25px;opacity:.78;transition:opacity .25s}
.hero-visual:hover .motion-controls,.motion-controls:focus-within{opacity:1}
.scene-selectors{display:flex;gap:20px;flex:1;max-width:528px}
.scene-selector{background:transparent;color:#a1a79a;border:0;padding:12px 0 8px;flex:1;text-align:left;min-height:46px;white-space:nowrap;font-size:11px;letter-spacing:.03em}
.scene-selector>span:last-child{display:flex;gap:7px;align-items:center}
.scene-selector b{font-size:9px;font-weight:400;color:#737d6b}
.scene-selector[aria-pressed=true]{color:#e1ead9}
.scene-selector[aria-pressed=true] b{color:#97b484}
.scene-progress{display:block;height:1px;background:#3d4437;margin-bottom:10px;overflow:hidden}
.scene-progress i{display:block;width:100%;height:100%;background:#adc49a;transform:scaleX(0);transform-origin:0 50%}
.playback-button{flex:0 0 38px;height:38px;width:38px;border:1px solid #4a5441;background:#1b2117;color:#b3c4a6;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}
.playback-button:hover{background:#2d3925}
.mobile-governance{display:none}
@media(min-width:1700px){.hero-visual{transform:translate(84px,15px)}}
@media(max-width:1200px){.scene-selectors{gap:14px}.scene-selector{font-size:10px}.motion-controls{gap:17px}.hero-visual{padding-bottom:44px}}
@media(max-width:950px){.hero-visual{width:100%;transform:translateX(48px)}.motion-controls{left:8.4%;right:2%}.scene-selector{font-size:11px}}
@media(max-width:640px){.hero-visual{margin:0 -6px;width:calc(100% + 12px);padding-bottom:0;transform:none}.diagram-stage{aspect-ratio:650/520}.hero-svg{overflow:hidden}.os-governance{display:none}.layer-name{font-size:24px}.layer-number{font-size:19px}.layer-leader{stroke-width:1.6}.scene-title{font-size:26px;letter-spacing:-.6px}.scene-subtitle{font-size:18px}.node-label{font-size:20px}.brain-title{font-size:22px}.brain-sub{font-size:17px}.source-card .icon{stroke-width:1.7}.data-note,.workflow-footnote{font-size:18px}.request-text{font-size:22px;letter-spacing:-.4px}.request-tag{display:none}.work-title{font-size:21px}.work-status{font-size:17px}.work-task text{font-size:21px;letter-spacing:-.3px}.output-title{font-size:21px}.output-sub{font-size:15px}.approval-title{font-size:21px}.approval-note{font-size:17px}.motion-controls{position:relative;left:auto;right:auto;bottom:auto;gap:15px;padding:2px 13px 0;opacity:1}.scene-selectors{gap:15px;max-width:none}.scene-selector{font-size:10px;letter-spacing:0}.scene-selector>span:last-child{gap:5px}.scene-selector b{font-size:8px}.playback-button{width:40px;height:40px;flex-basis:40px}.mobile-governance{display:flex;flex-direction:column;gap:8px;margin:21px 12px 0;padding:17px 0 0;border-top:1px solid #354531;font-size:13px;line-height:1.5;color:#b6bdb0}.mobile-governance strong{font-size:14px;font-weight:500;color:#dce6d4}.mobile-governance span{max-width:320px}.approval-control-wrap{left:53.23%;top:60.77%;width:36.62%}.approval-button{min-height:33px;font-size:11px;padding:6px 9px;gap:7px}.approval-disclaimer{font-size:8px;top:calc(100% + 5px)}}
@media(max-width:360px){.scene-selectors{gap:10px}.scene-selector{font-size:9px}.scene-selector b{display:none}.motion-controls{padding:2px 7px 0;gap:10px}.scene-title{font-size:25px}.approval-disclaimer{font-size:7px}}
@media(prefers-reduced-motion:reduce){.playback-button{opacity:.55}}
@media(max-width:640px){.approval-kicker{font-size:18px;stroke-width:5px}.approval-button{min-height:28px;padding:4px 9px}}
/* Contour variant: only the diagram renderer and its view controls change. */
.contour-canvas { position:absolute; inset:0; width:100%; height:100%; display:none; }
.has-contours .contour-canvas { display:block; }
.has-contours .hero-svg { visibility:hidden; }
.has-contours .approval-control-wrap { display:none!important; }
.has-contours .motion-controls { opacity:.85; }
@media(max-width:640px){.has-contours .motion-controls{opacity:1;}.has-contours .diagram-stage{aspect-ratio:620/530;}}
/* Hover edition: the page shell is untouched. All overrides are diagram-local. */
.has-contours .diagram-stage{isolation:isolate;}
.layer-hotspots{position:absolute;inset:0;pointer-events:none;z-index:2;}
.layer-hit{position:absolute;padding:0;margin:0;border:0;background:transparent;pointer-events:auto;cursor:pointer;border-radius:7px;touch-action:pan-y;}
.layer-hit:focus-visible{outline:1px solid #b9c6a0;outline-offset:3px;background:rgba(175,184,152,.045);}
.layer-hit:hover{background:transparent;}
.has-contours .scene-selectors{max-width:290px;gap:24px;}
.has-contours .scene-selector{color:#a5a397;}
.has-contours .scene-selector[aria-pressed=true]{color:#eeeadf;}
.has-contours .scene-selector b{color:#8b8c7d;}
.has-contours .scene-selector[aria-pressed=true] b{color:#b8c59f;}
.has-contours .scene-progress{background:#45443b;}
.has-contours .scene-progress i{background:#aaa990;}
.has-contours .playback-button{background:#202219;border-color:#626550;color:#d5d4bd;}
.has-contours .playback-button:hover{background:#2c3123;}
.hover-hint{color:#a4a698;font-size:8px;letter-spacing:.10em;margin:0 0 0 auto;white-space:nowrap;}
.has-contours .mobile-governance{border-color:#545846;color:#bcbdae;}
.has-contours .mobile-governance strong{color:#eeeade;}
@media(max-width:1200px){.hover-hint{font-size:7px;letter-spacing:.05em;}.has-contours .scene-selectors{max-width:220px;}}
@media(max-width:640px){.has-contours .diagram-stage{aspect-ratio:620/550;}.has-contours .scene-selectors{max-width:none;gap:20px;}.has-contours .motion-controls{flex-wrap:wrap;column-gap:17px;row-gap:0;}.hover-hint{order:3;flex:0 0 100%;text-align:center;margin:10px 0 0;font-size:9px;letter-spacing:.08em;}.layer-hit{min-height:25px;}}
/* Connected OS: the landing page is unchanged; these styles are illustration-only. */
.has-contours .scene-selectors{max-width:240px;gap:20px;}
.sequence-button{display:flex;gap:7px;align-items:center;justify-content:center;flex:0 0 auto;padding:10px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:#8e9183;font-size:10px;cursor:pointer;}
.sequence-button[aria-pressed="true"]{color:#d2d7bf;}
.sequence-button:hover{background:#23271e;color:#ececdd;}
.sequence-button:disabled{opacity:.45;cursor:default;}
.has-contours .motion-controls{gap:14px;}
.has-contours .hover-hint{font-size:7.8px;letter-spacing:.055em;}
@media(max-width:1200px) and (min-width:641px){.has-contours .scene-selectors{max-width:180px;gap:13px;}.has-contours .motion-controls{gap:10px;}.sequence-button{padding:10px 2px;}.sequence-button span{display:none;}.has-contours .hover-hint{font-size:6.8px;}}
@media(min-width:641px) and (max-width:1350px){.has-contours .diagram-stage{aspect-ratio:880/710;}}
@media(max-width:640px){.has-contours .diagram-stage{aspect-ratio:620/710;}.has-contours .scene-selectors{max-width:none;gap:18px;}.has-contours .motion-controls{column-gap:12px;row-gap:0;}.has-contours .hover-hint{font-size:9px;letter-spacing:.06em;}.sequence-button{font-size:10px;padding:9px 2px;}}
/* Playback fix: explicit, available controls without changing the hero artwork. */
.has-contours .playback-button{width:auto;min-width:78px;flex-basis:auto;gap:7px;padding:0 11px;opacity:1}
.playback-text{font-size:11px;line-height:1;white-space:nowrap}
.motion-fallback{font-size:12px;line-height:1.5;color:#b6bdb0;margin:16px 8%}
.has-contours .motion-fallback{display:none}
/* Automatic presentation: keep the existing renderer hooks, hide all control chrome. */
.hero-visual .motion-controls{display:none!important}
@media(max-width:640px){.has-contours .playback-button{min-width:67px;padding:0 7px;gap:5px}.playback-text{font-size:10px}}