@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#141414;background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #c08462;outline-offset:5px}header{height:84px;padding:0 4%;display:flex;align-items:center;gap:26px}.brand{font:800 29px Manrope,sans-serif;letter-spacing:-1.4px;color:#171717;text-decoration:none}.brand span{color:#bbb;font-weight:400;margin-left:9px}.edition{font-size:13px;color:#999}#play,#replay{border:0;background:#151515;color:white;padding:12px 24px;border-radius:30px;min-width:105px;font-size:13px;margin-left:auto}main{padding:0 2%}#viewport{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}#canvas{position:absolute;width:1440px;height:810px;transform-origin:top left;background:#fff;overflow:hidden}.workbench-title{position:absolute;left:70px;top:43px}.workbench-title>span{font-size:13px;color:#aaa}.workbench-title h1{font:600 26px/1.3 Manrope,sans-serif;letter-spacing:-1px;margin:11px 0 0}.canvas-meta{position:absolute;right:75px;top:48px;font-size:13px;font-weight:500}.canvas-meta span{display:block;font-size:11px;color:#aaa;margin-top:8px}.object{position:absolute;left:0;top:0;background:#f7f7f7;border-radius:25px;box-shadow:0 14px 42px -16px #00000019,0 4px 13px -9px #00000015;will-change:transform;transition:background .3s,box-shadow .3s}.object b{font-weight:600}.presence{width:181px;height:78px;padding:17px 20px;display:flex;gap:13px;align-items:center;border-radius:23px;background:#fafafa}.presence b{display:block;font-size:15px}.presence span:not(.status-dot){display:block;color:#a0a0a0;font-size:11px;margin-top:5px}.presence-icon{height:33px;width:33px;background:#151515;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:4px}.presence-icon i{height:5px;width:5px;border-radius:50%;background:white}.status-dot{margin-left:auto;width:5px;height:5px;border-radius:50%;background:#aaa}.interrupt{width:184px;height:114px;padding:23px;background:#171717;color:white}.object-top{display:flex;justify-content:space-between;align-items:center}.object-top b{font-size:20px;letter-spacing:-.5px}.object-top>span{font-size:23px;color:#ccc}.interrupt-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:11px;color:#8d8d8d}.interrupt-bottom>span:last-child{color:#c8c8c8;background:#333;padding:4px 8px;border-radius:6px}.attention{width:176px;height:101px;padding:20px 22px;background:#f7f7f7}.micro-label{font-size:11px;color:#a3a3a3}.attention>div{display:flex;gap:20px;align-items:center;margin-top:10px;font-size:15px}.direction{color:#aaa}.target-mark{width:26px;height:26px;border-radius:50%;background:#151515;color:white;display:grid;place-items:center;font-size:18px}.observe{width:126px;height:147px;padding:23px 20px;background:#f5f5f5;border-radius:27px}.observe-eye{display:block;width:33px;height:25px;margin-bottom:21px}.observe-eye svg{width:100%;fill:none;stroke:#282828;stroke-width:1.5}.observe b{display:block;font-size:16px}.observe>span:last-child{display:block;font-size:10px;color:#aaa;margin-top:8px;white-space:nowrap}.hero{width:282px;height:292px;padding:25px 27px;border-radius:33px;box-shadow:0 22px 65px -18px #00000020,0 4px 15px -8px #0000000d}.hero-top{display:flex;align-items:center;gap:11px}.actor-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#161616;color:white;font:700 17px Manrope,sans-serif;transition:background .25s,transform .3s}.hero-top b{font-size:13px;display:block;font-weight:500}.hero-top div>span{display:block;font-size:10px;color:#999;margin-top:4px}.hero-number{margin-left:auto;font-size:10px;color:#b5b5b5}.hero h2{font:800 34px Manrope,sans-serif;letter-spacing:-1.6px;margin:27px 0 20px}.hero-action{height:43px;background:#161616;color:white;border-radius:15px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;font-size:12px}.hero-action>span:last-child{font-size:19px}.agency-track{position:relative;display:flex;align-items:center;gap:15px;margin-top:24px;font-size:10px;color:#a2a2a2;height:16px}.agency-line{flex:1;height:1px;background:#dedede}.agency-track i{position:absolute;left:0;top:4px;width:7px;height:7px;border-radius:50%;background:#151515;opacity:0}.hero-foot{display:block;text-align:center;font-size:10px;color:#aaa;margin-top:16px}.handoff{background:#f8f8f8}.approval{background:#292929;color:#fff;box-shadow:0 25px 75px -20px #0000002d}.approval .actor-icon{background:white;color:#161616}.approval .hero-top div>span{color:#909090}.approval .hero-number{color:#666}.approval .hero-action{background:white;color:#141414}.approval .agency-line{background:#535353}.approval .agency-track{color:#929292}.approval .hero-foot{color:#848484}.approval .agency-track i{background:#eee}.checkpoint{width:171px;height:150px;border-radius:26px;padding:19px 23px;background:#f1f1f1;z-index:3;opacity:0;pointer-events:none;box-shadow:0 15px 40px #00000012}.checkpoint>span{font-size:10px;color:#9e9e9e}.checkpoint b{font:700 19px/1.2 Manrope,sans-serif;letter-spacing:-.5px;display:block;margin-top:10px}.checkpoint small{font-size:9px;color:#aaa}.checkpoint-progress{height:2px;background:#ddd;margin:14px 0 5px}.checkpoint-progress i{height:100%;display:block;background:#555;width:0}.checkpoint.yielded small{color:#b17a5c}.satellite{width:132px;height:109px;border-radius:24px;padding:18px 20px;background:#f7f7f7}.satellite>span{display:block;font-size:21px;margin-bottom:13px;line-height:18px}.satellite b{display:block;font-size:13px;letter-spacing:-.3px}.satellite small{display:block;font-size:9px;margin-top:5px;color:#a4a4a4}.inverse{background:#444;color:white}.inverse small{color:#a8a8a8}.execute{width:205px;height:81px;border-radius:23px;padding:18px;display:flex;align-items:center;gap:13px;background:#f7f7f7}.execute-icon{background:#161616;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-size:23px;color:white}.execute b{font-size:15px;display:block}.execute div>span{display:block;font-size:9px;color:#aaa;margin-top:5px}.execute>i{width:5px;height:5px;border-radius:50%;background:#bbb;margin-left:auto}.transport{width:144px;height:43px;border-radius:15px;display:flex;gap:3px;padding:4px;background:#e9e9e9;box-shadow:none}.transport>span{display:grid;place-items:center;flex:1;border-radius:11px;font-size:12px;color:#909090}.transport .selected{background:#171717;color:white}.transport-caption{position:absolute;left:1165px;top:696px;font-size:9px;color:#bbb}.object.focused{box-shadow:0 30px 70px -18px #00000030,0 5px 20px -8px #00000018}.object.observed .observe-eye{opacity:.7}.object.corrected{background:#f1f1f1}.object.inverse.corrected{background:#323232}.handoff.human-owned .actor-icon{background:#c99579;color:#fff}.cursor{position:absolute;left:0;top:0;z-index:12;pointer-events:none;will-change:transform;display:flex;align-items:flex-start}.cursor>svg{width:23px;height:28px;filter:drop-shadow(0 2px 2px #0002)}.cursor path{stroke:#fff;stroke-width:1.6;fill:#bb805d}.cursor>span{margin:24px 0 0 -3px;padding:5px 9px;border-radius:7px;background:#f8ede6;color:#a06e4e;font-size:11px;box-shadow:0 3px 10px #00000008;white-space:nowrap}.agent path{fill:#151515}.agent>span{background:#f0f0f0;color:#272727}.cursor small{display:block;font-size:9px;color:#999;margin-top:3px}#connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}#connections path{fill:none;stroke:#c4c4c4;stroke-width:1;stroke-linecap:round}#connections circle{fill:#bbb}#highfive{position:absolute;z-index:13;font-size:25px;color:#555;opacity:0;pointer-events:none}.voice-wrap{position:absolute;left:50%;bottom:39px;transform:translateX(-50%);z-index:15;text-align:center}#voice-root{display:flex;justify-content:center;min-height:44px}#voice{position:relative;height:44px;border:0;border-radius:24px;background:#f4f4f4;color:#888;padding:0 22px;display:flex;align-items:center;gap:9px;font-size:12px;min-width:159px;justify-content:center;box-shadow:0 5px 22px -8px #00000010;transition:background .25s,color .25s}#voice.speaking{color:#49413c;background:#f5f1ee}#voice svg{width:14px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}#speech{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);font-size:17px;letter-spacing:-.35px;color:#70655d;white-space:nowrap;opacity:0;transition:opacity .18s;pointer-events:none}#speech.visible{opacity:1}.canvas-bottom{position:absolute;left:70px;right:75px;bottom:14px;display:flex;justify-content:space-between;font-size:10px;color:#b9b9b9}footer{display:flex;align-items:center;gap:30px;padding:20px 4% 26px;color:#999;font-size:12px}#chapter{min-width:145px}.timeline{flex:1;height:2px;background:#ededed}.timeline i{height:100%;background:#262626;display:block;width:0}#time{font-size:10px;font-variant-numeric:tabular-nums}#end{position:absolute;inset:0;z-index:20;background:#ffffffef;backdrop-filter:blur(13px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;pointer-events:none;transition:opacity 1s}#end.visible{opacity:1;pointer-events:auto}.end-eyebrow{font-size:11px;letter-spacing:1.5px;color:#aaa}#end h2{font:600 49px/1.2 Manrope,sans-serif;letter-spacing:-2.2px;margin:32px 0 23px}#end em{font-style:normal;color:#999}#end p{font-size:13px;color:#aaa;margin:0 0 33px}#replay{margin-left:0;background:#161616;padding:12px 27px}@media(max-width:700px){header{height:65px;padding:0 5%;gap:12px}.edition{display:none}.brand{font-size:25px}body{min-height:100vh;display:flex;flex-direction:column;justify-content:center}main{padding:0}footer{gap:15px;padding:20px 5%;font-size:10px}#chapter{min-width:100px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.agency-track i{height:20px;width:20px;top:-2px;display:grid;place-items:center;color:white;font:600 12px Manrope,sans-serif;font-style:normal;box-shadow:0 2px 8px #0000000d}.approval .agency-track i{color:#222}.transport-caption{top:715px}
.transport-caption{top:752px}
/* Let VoiceBeam's recording-pill preset carry the visual language. */
#voice-root [data-voice-beam]{transition:width .28s ease,border-radius .28s ease}
#voice{height:48px;min-width:174px;padding:0 23px;gap:11px;transition:background .22s,color .22s,min-width .28s;box-shadow:0 8px 26px -12px #00000018}
#voice.speaking{min-width:216px;background:#202020;color:#f5f5f5;box-shadow:0 12px 32px -12px #00000030}
#voice.speaking svg{color:#ddd}
#voice.speaking>span{position:relative;z-index:2}
#speech{bottom:70px;color:#777;font-size:16px}
/* Voice remains a stable spatial anchor throughout the sequence. */
#voice-root [data-voice-beam]{width:216px;border-radius:24px;transition:none}
#voice,#voice.speaking{width:216px;min-width:216px;height:48px;border-radius:24px;transition:background .22s,color .22s}
/* Work is the anchor; primitives are tools acting on it. */
.work-artifact{width:418px;height:316px;padding:27px 28px 22px;border-radius:32px;background:#fff;box-shadow:0 25px 90px -20px #00000026,0 2px 16px #00000004;z-index:5;transform-origin:center}.work-heading{display:flex;justify-content:space-between;align-items:center}.work-kicker{font-size:11px;color:#aaa}#work-status{font-size:11px;color:#777;background:#f4f4f4;padding:5px 10px;border-radius:12px}.work-artifact h2{font:700 25px Manrope,sans-serif;letter-spacing:-1px;margin:13px 0 23px}.flow-preview{position:relative;display:flex;align-items:center;justify-content:space-between;height:132px}.flow-step{height:126px;width:100px;border-radius:14px;background:#f7f7f7;padding:12px;position:relative;transition:background .25s,opacity .25s}.preview-number{position:absolute;top:10px;right:10px;font-size:8px;color:#bbb}.preview-avatar{width:25px;height:25px;background:#ddd;border-radius:50%;margin:5px 0 12px}.flow-step b{font-size:9px;display:block;margin:10px 0 10px;font-weight:500}.flow-step>i{height:3px;background:#dedede;display:block;margin-top:5px;width:56px;border-radius:3px}.flow-step>i:nth-of-type(2){width:37px}.flow-link{font-size:14px;color:#ccc}.preview-options{display:flex;gap:3px;padding:10px 0 9px}.preview-options i{width:17px;height:17px;border-radius:5px;background:#dedede}.preview-complete{width:27px;height:27px;background:#e5e5e5;color:#aaa;border-radius:50%;display:grid;place-items:center;margin:5px 0 12px;font-size:15px}.flow-step.completed .preview-complete{color:white;background:#282828}.work-progress{height:3px;background:#ededed;margin-top:15px;border-radius:3px;overflow:hidden}.work-progress>i{height:100%;display:block;background:#343434;width:25%;border-radius:3px}.ownership-rail{position:relative;height:43px;margin-top:12px}.ownership-caption{font-size:9px;color:#aaa;position:absolute;left:0;top:16px}.owner-seat{position:absolute;font-size:10px;color:#d3d3d3;top:15px}.agent-seat{left:82px}.marco-seat{right:10px}#work-owner-token{position:absolute;top:5px;left:60px;width:85px;height:31px;display:flex;gap:8px;align-items:center;background:#f0f0f0;border-radius:20px;padding:5px 10px;box-shadow:0 4px 10px #00000007;z-index:2;will-change:transform}#work-owner-token>span{background:#191919;color:white;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;font:600 12px Manrope,sans-serif;flex:none}#work-owner-token b{font-size:11px;font-weight:500}#work-owner-token.marco-owned{background:#f6e9df}#work-owner-token.marco-owned>span{background:#bd8765}.ownership-residue{position:absolute;left:0;top:0;width:100%;height:55px;overflow:visible;pointer-events:none}.ownership-residue path{fill:none;stroke:#d8bba7;stroke-width:1;opacity:0}#approval-gate{position:absolute;inset:0;background:#ffffffde;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:11px;opacity:0;z-index:3;backdrop-filter:blur(2px);pointer-events:none}#approval-gate>span{height:40px;width:40px;background:#252525;color:white;border-radius:50%;display:grid;place-items:center;font-size:16px}#approval-gate small{font-size:11px;color:#777}.hero{transform-origin:top left}.hero-foot,.hero .agency-track{visibility:hidden}.hero{height:251px}.hero h2{margin:25px 0 20px}.checkpoint{z-index:9}.object{transition:background .3s,box-shadow .3s,opacity .3s;transform-origin:top left}.work-artifact.focused{box-shadow:0 32px 110px -20px #0000002d,0 3px 22px #00000007}.canvas-bottom{color:#bbb}.transport-caption{display:none}
.work-artifact{height:348px}
.approval.corrected{background:#292929}.interrupt.corrected{background:#171717}
.project-identity{display:flex;flex-direction:column;gap:5px}.project-identity p{margin:0;font-size:12px;color:#999;line-height:1.4}@media(max-width:700px){header{height:80px}.project-identity p{font-size:10px}}

/* Attention is carried by proximity and the artifact, rather than status copy. */
.cursor.human.leading>span{background:#efddcf;box-shadow:0 4px 16px #bb805d22}.cursor.human.leading path{fill:#aa704d}
.flow-step.editing{box-shadow:0 8px 20px -8px #0003;background:#f0ece8!important}.flow-step.refined>i{width:64px;background:#c9c9c9}.flow-step.refined>i:last-child{width:48px}.flow-step.refined .preview-options{gap:5px}.flow-step.refined .preview-avatar{background:#bbb}.flow-step.refined b{font-weight:600}
#canvas[data-control="marco"] .checkpoint.yielded{box-shadow:0 24px 55px -15px #0003}

/* A shared, tactile punctuation mark. The hands exist only at contact. */
.cursor .five-hand{display:none;position:absolute;width:36px;height:42px;left:-7px;top:-18px;filter:drop-shadow(0 3px 3px #0002)}.cursor.high-fiving>svg:first-child{opacity:0}.cursor.high-fiving .five-hand{display:block;transform:rotate(18deg)}.cursor.agent.high-fiving .five-hand{transform:scaleX(-1) rotate(18deg)}.five-hand path{stroke-width:1.5;stroke-linejoin:round}.cursor.high-fiving>span{margin-top:30px}
#highfive{width:74px;height:74px;display:grid;place-items:center;color:#ba865f;transform-origin:center}#highfive b{font-size:30px;font-weight:400;filter:drop-shadow(0 0 7px #d8aa7b55)}.five-ring{position:absolute;inset:0;border:1.5px solid #c69c76;border-radius:50%;background:radial-gradient(circle,#e4bd9440,transparent 65%)}

#highfive b{font-size:36px}#highfive .five-ring{border-width:2;background:radial-gradient(circle,#e4bd9460,transparent 67%)}.five-confetti{position:absolute;left:34px;top:34px;width:5px;height:8px;border-radius:1px;opacity:0}#highfive .five-confetti:nth-child(3n){width:5px;height:5px;border-radius:50%}

.ui-icon{width:18px;height:18px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}#play .ui-icon,#replay .ui-icon{width:13px;height:13px;margin-right:5px}.flow-link .ui-icon{width:14px}.preview-complete .ui-icon{width:16px}.agent-orb,.approval .agent-orb,#work-owner-token .agent-orb{background:transparent!important;overflow:visible}.agent-orb img{display:block;width:100%;height:100%;transform:rotate(var(--orb-turn,0deg)) scale(var(--orb-scale,1));filter:drop-shadow(0 0 3px #62aaca25)}.presence-icon.agent-orb{width:36px;height:36px}.hero .actor-icon.agent-orb{width:32px;height:32px}#work-owner-token .agent-orb{width:24px;height:24px} .object-top .ui-icon,.satellite>span .ui-icon{width:22px;height:22px}@media(prefers-reduced-motion:reduce){.agent-orb img{transform:none}}

/* The ribbon is visible even at identity-chip scale. */
.agent-orb img{animation:orb-orbit 5s linear infinite;transform:none;filter:drop-shadow(0 0 4px #62aaca40)}
@keyframes orb-orbit{0%{transform:rotate(0deg) scale(.97);filter:drop-shadow(0 0 3px #62aaca30)}50%{transform:rotate(180deg) scale(1.08);filter:drop-shadow(0 0 5px #62aaca65)}100%{transform:rotate(360deg) scale(.97);filter:drop-shadow(0 0 3px #62aaca30)}}
#canvas[data-playback="paused"] .agent-orb img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.agent-orb img{animation:none;transform:none}}

#canvas[data-playback="playing"] .agent-orb img,#canvas[data-playback="paused"] .agent-orb img{animation-play-state:paused;animation-delay:var(--orb-time,0s)}

/* Fixed sphere, moving internal energy: no rotation of the identity badge. */
.agent-orb .orb-sphere{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 3px #62aaca30)}
.orb-ribbons{transform-origin:32px 32px;animation:orb-depth 5s ease-in-out infinite}
@keyframes orb-depth{0%,100%{transform:translate(0,0) scale(1,1);opacity:.9}25%{transform:translate(2px,-1px) scale(.77,1.05);opacity:1}50%{transform:translate(-1px,1px) scale(.55,.94);opacity:.65}75%{transform:translate(-2px,0) scale(.82,1.04);opacity:1}}
#canvas[data-playback="playing"] .orb-ribbons,#canvas[data-playback="paused"] .orb-ribbons{animation-play-state:paused;animation-delay:var(--orb-time,0s)}
@media(prefers-reduced-motion:reduce){.orb-ribbons{animation:none}}

.orb-highlight{animation:orb-light 5s ease-in-out infinite;transform-origin:center}@keyframes orb-light{0%,100%{opacity:.08;transform:translate(0,0)}50%{opacity:.2;transform:translate(5px,2px)}}#canvas[data-playback="playing"] .orb-highlight,#canvas[data-playback="paused"] .orb-highlight{animation-play-state:paused;animation-delay:var(--orb-time,0s)}@media(prefers-reduced-motion:reduce){.orb-highlight{animation:none}}

/* A generous hit area keeps the visual timeline quiet. */
.timeline{position:relative;overflow:visible}#scrubber{position:absolute;inset:-14px 0 auto;width:100%;height:30px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:pan-y}#scrubber::-webkit-slider-runnable-track{height:2px;background:transparent}#scrubber::-moz-range-track{height:2px;background:transparent}#scrubber::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;background:#262626;border:2px solid white;border-radius:50%;box-shadow:0 1px 5px #0002;opacity:0;transition:opacity .15s}#scrubber::-moz-range-thumb{width:9px;height:9px;background:#262626;border:2px solid white;border-radius:50%;opacity:0}.timeline:hover #scrubber::-webkit-slider-thumb,#scrubber:focus-visible::-webkit-slider-thumb,#scrubber:active::-webkit-slider-thumb{opacity:1}.timeline:hover #scrubber::-moz-range-thumb,#scrubber:focus-visible::-moz-range-thumb,#scrubber:active::-moz-range-thumb{opacity:1}#scrubber:focus-visible{outline:2px solid #c0846266;outline-offset:3px;border-radius:8px}

/* Marco's presence uses a calm teal identity. */
.cursor.human path,.cursor.human.leading path{fill:#368d87}.cursor.human>span{background:#e0f0ed;color:#28736e}.cursor.human.leading>span{background:#d1e9e5;box-shadow:0 4px 16px #368d8722}

.brand{display:inline-flex;align-items:center;gap:12px;width:fit-content}.brand-avatar{display:block;width:42px;height:42px;flex:none}.brand .brand-word{margin:0;color:#171717;font-weight:800}.project-identity p{padding-left:54px}@media(max-width:700px){.brand-avatar{width:36px;height:36px}.brand{gap:10px}.project-identity p{padding-left:46px}}

header{align-items:center}.project-identity{justify-content:center;gap:0}.brand{line-height:1}.brand .brand-word{line-height:1}

#work-owner-token.marco-owned{background:#dcefeb;color:#28736e}#work-owner-token.marco-owned>span{background:#368d87;width:24px;height:24px;border-radius:50%;overflow:hidden}#work-owner-initial .marco-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:45% 26%;transform:scale(1.45);transform-origin:45% 26%}.ownership-residue path{stroke:#8bbfb7}.handoff.human-owned .actor-icon{background:#368d87}

/* A bright, friendly shared celebration. */
#highfive{color:#ffbd3e}#highfive b{filter:drop-shadow(0 0 8px #ffbd3e55)}#highfive .five-ring{border-color:#79c2ad;background:radial-gradient(circle,#ffe3a840,transparent 67%)}

/* Opaque convergence: the proposal sits above the artifact. */
.checkpoint{background:#f1f1f1;z-index:10}.hero{isolation:isolate}.work-artifact{background:#fff}.flow-preview{height:145px}.flow-step{height:142px}.preview-actions{display:flex;gap:4px;margin-top:10px;height:17px;font-size:7px}.preview-actions>span:first-child{display:grid;place-items:center;background:#292929;color:white;border-radius:5px;flex:1}.extra-action{display:grid;place-items:center;color:#888;overflow:hidden;width:calc(25px * (1 - var(--simplify,0)));opacity:calc(1 - var(--simplify,0))}.flow-step.simplifying{box-shadow:0 0 0 2px #368d8750,0 8px 22px #368d8715}.flow-step.agent-editing{box-shadow:0 0 0 2px #25252580,0 9px 25px #0002;background:#eee!important}.step-agent{position:absolute;top:-13px;right:0;padding:3px 6px;border-radius:6px;background:#252525;color:white;font-size:8px;opacity:0}.work-artifact{height:361px}