
.exs{--exs-bg:#060914;--exs-panel:#0a0f1e;--exs-floor:rgba(34,211,238,.035);--exs-line:rgba(148,163,184,.16);--exs-ink:rgba(240,244,250,.94);--exs-ink2:rgba(200,210,230,.66);--exs-muted:rgba(170,185,210,.66);--exs-live:#22D3EE;--exs-warn:#F59E0B;--exs-ok:#34D399;--exs-violet:#A78BFA;--exs-chip:#121a2e;--exs-chip-b:rgba(255,255,255,.09);--exs-card:radial-gradient(135% 115% at 50% -12%,#223052 0%,#141b2b 46%,#0c1017 100%);--exs-dur:14s;
  position:relative;width:100%;container-type:inline-size;font-family:Poppins,system-ui,sans-serif;color:var(--exs-ink);-webkit-user-select:none;user-select:none}
.exs.is-light{--exs-bg:#EEF1F8;--exs-panel:#F6F8FC;--exs-floor:rgba(14,116,144,.05);--exs-line:rgba(15,23,42,.12);--exs-ink:#0F172A;--exs-ink2:#475569;--exs-muted:#5B6678;--exs-live:#0E7490;--exs-warn:#B45309;--exs-ok:#047857;--exs-violet:#6D28D9;--exs-chip:#FFFFFF;--exs-chip-b:rgba(15,23,42,.08);--exs-card:#FFFFFF}
.exs-window{position:relative;border-radius:clamp(14px,2.4cqw,24px);overflow:hidden;background:radial-gradient(70% 60% at 0% 0%,rgba(124,111,240,.22),transparent 70%),radial-gradient(60% 55% at 100% 100%,rgba(34,211,238,.13),transparent 70%),var(--exs-bg);border:1px solid var(--exs-line);box-shadow:0 0 0 1px rgba(255,255,255,.03),0 40px 80px -40px rgba(0,0,0,.8)}
.exs.is-light .exs-window{background:radial-gradient(70% 60% at 0% 0%,rgba(124,111,240,.10),transparent 70%),radial-gradient(60% 55% at 100% 100%,rgba(34,211,238,.08),transparent 70%),var(--exs-bg);box-shadow:0 30px 70px -36px rgba(15,23,42,.35),0 0 0 1px rgba(15,23,42,.04)}
.exs-bar{display:flex;align-items:center;gap:1.6cqw;padding:1.5cqw 2cqw;border-bottom:1px solid var(--exs-line);font-size:clamp(8px,1.35cqw,12px)}
.exs-brand{display:inline-flex;align-items:center;gap:.8cqw;font:700 clamp(8px,1.3cqw,11.5px)/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.18em;color:var(--exs-ink)}
.exs-brand i{width:1.3cqw;height:1.3cqw;min-width:7px;min-height:7px;border-radius:2px;background:linear-gradient(135deg,var(--exs-live),var(--exs-violet));transform:rotate(45deg)}
.exs-team{padding:.6cqw 1.2cqw;border-radius:999px;border:1px solid var(--exs-chip-b);background:var(--exs-chip);color:var(--exs-ink);font-weight:500}
.exs-modes{margin-left:auto;display:inline-flex;padding:.4cqw;border-radius:999px;border:1px solid var(--exs-chip-b);background:var(--exs-chip);white-space:nowrap}
.exs-modes span{padding:.5cqw 1.2cqw;border-radius:999px;color:var(--exs-muted)}
.exs-modes span.on{color:var(--exs-ink);background:rgba(34,211,238,.12);box-shadow:inset 0 0 0 1px rgba(34,211,238,.45)}
.exs.is-light .exs-modes span.on{color:#fff;background:#1E3A8A;box-shadow:none}
.exs-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);min-height:0}
.exs-stage{position:relative;aspect-ratio:1.08;min-width:0}
.exs-floor{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.exs-handoff-track{stroke:var(--exs-violet);stroke-opacity:.22;stroke-width:1.2;stroke-dasharray:3 4}
.exs-handoff-token{stroke:var(--exs-live);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:9 120;stroke-dashoffset:9;opacity:0;filter:drop-shadow(0 0 4px var(--exs-live))}
.exs-kicker{display:inline-flex;align-items:center;gap:.7cqw;font:700 clamp(7px,1.05cqw,10px)/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--exs-muted)}
.exs-kicker--warn{color:var(--exs-warn)}
.exs-kicker--live{color:var(--exs-live)}
.exs-kicker--live i{width:.9cqw;height:.9cqw;min-width:5px;min-height:5px;border-radius:50%;background:var(--exs-live);box-shadow:0 0 8px var(--exs-live)}
.exs-plate{position:absolute;left:50%;top:51%;width:44%;transform:translate(-50%,-50%);padding:2cqw 2.2cqw;border-radius:1.8cqw;background:var(--exs-card);border:1px solid rgba(34,211,238,.28);box-shadow:0 0 0 1px rgba(34,211,238,.06),0 0 32px -10px rgba(34,211,238,.4);display:grid;gap:.9cqw}
.exs.is-light .exs-plate{border-color:rgba(14,116,144,.22);box-shadow:0 18px 40px -22px rgba(15,23,42,.35)}
.exs-plate strong{font-size:clamp(9px,1.9cqw,17px);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--exs-ink)}
.exs-metric{display:grid;grid-template-columns:1fr auto 4.6cqw;align-items:center;gap:.8cqw;font-size:clamp(7px,1.15cqw,11px);color:var(--exs-ink2)}
.exs-metric b{font:600 clamp(7px,1.1cqw,10.5px)/1 'JetBrains Mono',ui-monospace,monospace;color:var(--exs-ink)}
.exs-metric svg{width:100%;height:auto}
.exs-metric path{fill:none;stroke:var(--exs-live);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.exs-exec{position:absolute;left:var(--x);top:var(--y);width:15%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:2}
.exs-exec img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,8,30,.35));transform-origin:50% 90%}
.exs-plateau{margin-top:-.4cqw;display:grid;justify-items:center;gap:.25cqw;padding:.6cqw 1.1cqw;border-radius:1cqw;background:var(--exs-chip);border:1px solid var(--exs-chip-b);min-width:120%;text-align:center}
.exs-plateau b{font:700 clamp(7px,1.25cqw,11.5px)/1 Poppins,system-ui,sans-serif;letter-spacing:.04em;color:var(--exs-ink)}
.exs-status{position:relative;display:grid;font-size:clamp(6.5px,1cqw,9.5px);line-height:1.25;color:var(--exs-muted);white-space:nowrap}
.exs-status>span{grid-area:1/1}
.exs-exec--cfo .exs-status .s1{color:var(--exs-warn)}
.exs-exec--cfo .exs-status .s2{color:var(--exs-ok);opacity:0}
.exs-tag{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:3;display:inline-flex;align-items:center;gap:.7cqw;padding:.55cqw 1.1cqw .55cqw .6cqw;border-radius:999px;background:var(--exs-chip);border:1px solid rgba(34,211,238,.35);box-shadow:0 0 18px -6px rgba(34,211,238,.6);font:600 clamp(7px,1.05cqw,10px)/1 'JetBrains Mono',ui-monospace,monospace;color:var(--exs-ink);white-space:nowrap;opacity:0}
.exs.is-light .exs-tag{border-color:rgba(14,116,144,.25);box-shadow:0 8px 18px -10px rgba(15,23,42,.35)}
.exs-tag img{width:1.7cqw;height:1.7cqw;min-width:11px;min-height:11px;border-radius:3px;object-fit:contain}
.exs-handoff-label{position:absolute;left:50%;top:79%;transform:translate(-50%,-50%);z-index:3;padding:.4cqw 1cqw;border-radius:999px;font-size:clamp(6.5px,1cqw,9.5px);color:var(--exs-violet);background:var(--exs-chip);border:1px solid rgba(167,139,250,.35);white-space:nowrap;opacity:0}
.exs-ledger{display:flex;flex-direction:column;gap:1.4cqw;padding:2.2cqw 2.2cqw 2.4cqw;border-left:1px solid var(--exs-line);min-width:0;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.exs-brief{margin:0;font-size:clamp(7.5px,1.22cqw,11.5px);line-height:1.5;color:var(--exs-ink2)}
.exs-decision{position:relative;display:grid;border-radius:1.6cqw;background:var(--exs-card);border:1px solid rgba(245,158,11,.38);box-shadow:0 0 0 1px rgba(245,158,11,.06),0 0 30px -12px rgba(245,158,11,.55);opacity:0}
.exs.is-light .exs-decision{border-color:rgba(180,83,9,.28);box-shadow:0 22px 46px -26px rgba(15,23,42,.4)}
.exs-decision-rim{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px rgba(245,158,11,.5),0 0 22px rgba(245,158,11,.28);opacity:.45}
.exs.is-light .exs-decision-rim{display:none}
.exs-decision-ask,.exs-decision-done{grid-area:1/1;padding:1.6cqw 1.7cqw;min-width:0}
.exs-decision-head{display:flex;gap:1cqw;align-items:flex-start}
.exs-decision-head img{width:4.2cqw;height:4.2cqw;min-width:22px;min-height:22px;flex:none}
.exs-decision-head div{display:grid;gap:.4cqw;min-width:0}
.exs-decision strong{font-size:clamp(8px,1.32cqw,12.5px);font-weight:600;line-height:1.3;color:var(--exs-ink)}
.exs-decision-body{margin:.8cqw 0 0;font-size:clamp(7px,1.08cqw,10.5px);line-height:1.45;color:var(--exs-ink2)}
.exs-decision-actions{display:flex;align-items:center;gap:.8cqw;margin-top:1.2cqw;flex-wrap:wrap}
.exs-btn{display:inline-flex;align-items:center;padding:.65cqw 1.4cqw;border-radius:.9cqw;font-size:clamp(7px,1.1cqw,10.5px);font-weight:600;color:var(--exs-ink);background:var(--exs-chip);border:1px solid var(--exs-chip-b)}
.exs-btn--primary{color:var(--exs-ink);border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.12)}
.exs.is-light .exs-btn--primary{color:#fff;background:#1E3A8A;border-color:#1E3A8A}
.exs-via{margin-left:auto;display:inline-flex;align-items:center;gap:.5cqw;font-size:clamp(6.5px,.95cqw,9.5px);color:var(--exs-muted)}
.exs-via img{width:1.4cqw;height:1.4cqw;min-width:10px;min-height:10px}
.exs-decision-done{display:flex;align-items:center;gap:1.2cqw;opacity:0}
.exs-decision-done div{display:grid;gap:.4cqw}
.exs-decision-done span{font-size:clamp(7px,1.08cqw,10.5px);color:var(--exs-ink2)}
.exs-check{flex:none;width:3cqw;height:3cqw;min-width:16px;min-height:16px;border-radius:50%;background:var(--exs-ok);position:relative;box-shadow:0 0 16px -2px var(--exs-ok)}
.exs.is-light .exs-check{box-shadow:none}
.exs-check::after{content:'';position:absolute;left:34%;top:22%;width:24%;height:42%;border:solid #04121F;border-width:0 2px 2px 0;transform:rotate(45deg)}
.exs.is-light .exs-check::after{border-color:#fff}
.exs-log{list-style:none;margin:0;padding:0;display:grid;gap:.7cqw}
.exs-log li{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.9cqw;padding:.75cqw 1cqw;border-radius:1cqw;background:var(--exs-chip);border:1px solid var(--exs-chip-b);font-size:clamp(6.5px,1.02cqw,10px);color:var(--exs-ink2);opacity:0;min-width:0}
.exs-log li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exs-log b{font:700 clamp(6.5px,.98cqw,9.5px)/1 'JetBrains Mono',ui-monospace,monospace;color:var(--exs-violet);margin-right:.3cqw}
.exs-log time{font:500 clamp(6.5px,.95cqw,9.5px)/1 'JetBrains Mono',ui-monospace,monospace;color:var(--exs-muted)}
.exs-log img{width:1.6cqw;height:1.6cqw;min-width:11px;min-height:11px;object-fit:contain;border-radius:3px}
.exs-log-hand{width:1.6cqw;height:1.6cqw;min-width:11px;min-height:11px;border-radius:50%;border:1.5px solid var(--exs-violet);box-sizing:border-box}
.exs-caption{display:block;margin-top:1.4cqw;text-align:center;font-size:clamp(10px,1.4cqw,12px);color:var(--exs-muted)}

/* card variant (native mobile deck) */
.exs--card .exs-body{grid-template-columns:1fr}
.exs--card .exs-bar{padding:2.6cqw 3.4cqw;gap:2.4cqw;font-size:clamp(9px,3cqw,12px)}
.exs--card .exs-team{display:none}
.exs--card .exs-brand{font-size:clamp(9px,3cqw,12px)}
.exs--card .exs-modes span{padding:1cqw 2.2cqw}
.exs--card .exs-stage{aspect-ratio:1.18}
.exs--card .exs-exec{width:19%}
.exs--card .exs-plateau{padding:1cqw 1.6cqw;border-radius:2cqw}
.exs--card .exs-plateau b{font-size:clamp(8px,2.8cqw,12px)}
.exs--card .exs-status{display:none}
.exs--card .exs-plate{width:48%;padding:3cqw;border-radius:3cqw;gap:1.6cqw;top:49%}
.exs--card .exs-plate strong{font-size:clamp(10px,3.6cqw,15px)}
.exs--card .exs-metric{font-size:clamp(8px,2.6cqw,11px);grid-template-columns:1fr auto;gap:1.6cqw}
.exs--card .exs-metric b{font-size:clamp(8px,2.5cqw,11px)}
.exs--card .exs-metric svg{display:none}
.exs--card .exs-kicker{font-size:clamp(7.5px,2.3cqw,10px)}
.exs--card .exs-tag{font-size:clamp(8px,2.5cqw,10.5px);padding:1.2cqw 2.2cqw 1.2cqw 1.2cqw;gap:1.4cqw}
.exs--card .exs-tag img{width:3.6cqw;height:3.6cqw}
.exs--card .exs-tag--cto,.exs--card .exs-handoff-label{display:none}
.exs--card .exs-dock{padding:0 3cqw 3cqw}
.exs--card .exs-decision{border-radius:3.4cqw}
.exs--card .exs-decision-ask,.exs--card .exs-decision-done{padding:3.2cqw 3.6cqw}
.exs--card .exs-decision-head{gap:2.4cqw}
.exs--card .exs-decision-head img{width:9cqw;height:9cqw}
.exs--card .exs-decision strong{font-size:clamp(11px,3.8cqw,15px)}
.exs--card .exs-decision-body{font-size:clamp(9.5px,3cqw,12.5px);margin-top:1.6cqw}
.exs--card .exs-decision-actions{gap:2cqw;margin-top:2.4cqw}
.exs--card .exs-btn{font-size:clamp(10px,3.2cqw,13px);padding:1.6cqw 3.2cqw;border-radius:2.2cqw}
.exs--card .exs-via{font-size:clamp(9px,2.8cqw,11.5px);gap:1.2cqw}
.exs--card .exs-via img{width:3.6cqw;height:3.6cqw}
.exs--card .exs-decision-done{gap:2.6cqw}
.exs--card .exs-decision-done span{font-size:clamp(9.5px,3cqw,12.5px)}
.exs--card .exs-check{width:7cqw;height:7cqw}
.exs--card .exs-caption{font-size:11px;margin-top:2.4cqw}
.exs--card .exs-tag--cfo{left:30%}
.exs--card .exs-tag--cmo{left:70%}
.exs.exs--card.is-playing .exs-decision{animation:none;opacity:1}

/* timeline */
.exs.is-playing .exs-tag--cfo{animation:exs-tag var(--exs-dur) 0s infinite both}
.exs.is-playing .exs-tag--cmo{animation:exs-tag var(--exs-dur) calc(var(--exs-dur) * .10) infinite both}
.exs.is-playing .exs-tag--cto{animation:exs-tag var(--exs-dur) calc(var(--exs-dur) * .22) infinite both}
.exs.is-playing .exs-exec--cfo img{animation:exs-bob var(--exs-dur) 0s infinite}
.exs.is-playing .exs-exec--cmo img{animation:exs-bob var(--exs-dur) calc(var(--exs-dur) * .10) infinite}
.exs.is-playing .exs-exec--cto img{animation:exs-bob var(--exs-dur) calc(var(--exs-dur) * .22) infinite}
.exs.is-playing .exs-handoff-token{animation:exs-token var(--exs-dur) infinite}
.exs.is-playing .exs-handoff-label{animation:exs-hlabel var(--exs-dur) infinite}
.exs.is-playing .exs-decision{animation:exs-card var(--exs-dur) infinite}
.exs.is-playing .exs-decision-rim{animation:exs-rim 3.2s ease-in-out infinite}
.exs.is-playing .exs-decision-ask{animation:exs-ask var(--exs-dur) infinite}
.exs.is-playing .exs-decision-done{animation:exs-done var(--exs-dur) infinite}
.exs.is-playing .exs-btn--primary{animation:exs-press var(--exs-dur) infinite}
.exs.is-playing .exs-exec--cfo .s1{animation:exs-ask var(--exs-dur) infinite}
.exs.is-playing .exs-exec--cfo .s2{animation:exs-done var(--exs-dur) infinite}
.exs.is-playing .exs-log-l1{animation:exs-log var(--exs-dur) infinite}
.exs.is-playing .exs-log-l2{animation:exs-log2 var(--exs-dur) infinite}
.exs.is-playing .exs-log-l3{animation:exs-log3 var(--exs-dur) infinite}
.exs.is-playing .exs-log-l4{animation:exs-log4 var(--exs-dur) infinite}
@keyframes exs-tag{0%,3%{opacity:0;transform:translate(-50%,-30%) scale(.9)}6%,20%{opacity:1;transform:translate(-50%,-50%) scale(1)}24%,100%{opacity:0;transform:translate(-50%,-70%) scale(.96)}}
@keyframes exs-bob{0%,4%,22%,100%{transform:none}8%,16%{transform:translateY(-4%) rotate(-1.5deg)}12%{transform:translateY(-2%) rotate(1deg)}}
@keyframes exs-token{0%,30%{opacity:0;stroke-dashoffset:9}32%{opacity:1;stroke-dashoffset:9}42%{opacity:1;stroke-dashoffset:-100}44%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes exs-hlabel{0%,30%{opacity:0;transform:translate(-50%,-30%)}33%,42%{opacity:1;transform:translate(-50%,-50%)}46%,100%{opacity:0;transform:translate(-50%,-50%)}}
@keyframes exs-card{0%,45%{opacity:0;transform:translateY(10px) scale(.98)}49%,95%{opacity:1;transform:none}99%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes exs-rim{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes exs-ask{0%,66%{opacity:1}69%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes exs-done{0%,66%{opacity:0;transform:translateY(6px)}70%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes exs-press{0%,62%{transform:none}64%{transform:scale(.94)}66%,100%{transform:none}}
@keyframes exs-log{0%,6%{opacity:0;transform:translateY(6px)}9%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes exs-log2{0%,16%{opacity:0;transform:translateY(6px)}19%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes exs-log3{0%,32%{opacity:0;transform:translateY(6px)}35%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes exs-log4{0%,40%{opacity:0;transform:translateY(6px)}43%,95%{opacity:1;transform:none}99%,100%{opacity:0}}

/* still frame: before playback starts, under reduced motion and in the prerender */
.exs:not(.is-playing) .exs-tag--cfo,.exs:not(.is-playing) .exs-tag--cmo,.exs:not(.is-playing) .exs-decision,.exs:not(.is-playing) .exs-log li{opacity:1}
.exs:not(.is-playing) .exs-decision-rim{opacity:1}
@media (prefers-reduced-motion:reduce){.exs *{animation:none!important}.exs .exs-tag--cfo,.exs .exs-tag--cmo,.exs .exs-decision,.exs .exs-log li{opacity:1!important}}
