/* ===== Scenes: elements change state at a step (data-at="n", data-off="m") ===== */
.dt{border-collapse:separate;border-spacing:0;font:22px var(--mono);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(5,8,22,.75)}
.dt caption{caption-side:top;text-align:left;font:700 21px var(--font);color:var(--text);padding:0 0 7px}
.dt th{background:rgba(139,92,246,.2);color:var(--text);font-weight:700;padding:7px 12px;text-align:left}
.dt td{padding:6px 12px;border-top:1px solid var(--line);color:#cbd5f5;transition:background .35s,color .35s,opacity .35s}
.dt.cy th{background:rgba(34,211,238,.18)}.dt.pk th{background:rgba(244,114,182,.18)}.dt.gn th{background:rgba(52,211,153,.18)}
.dt .nul{color:var(--dim);font-style:italic}
.dt small{font-size:13px;color:var(--a5);margin-left:6px}
.x-hl.at,tr.x-hl.at td{background:rgba(251,191,36,.26);color:#fff}
.x-cy.at,tr.x-cy.at td{background:rgba(34,211,238,.24);color:#fff}
.x-pk.at,tr.x-pk.at td{background:rgba(244,114,182,.24);color:#fff}
.x-ok.at,tr.x-ok.at td{background:rgba(52,211,153,.26);color:#fff}
.x-bad.at,tr.x-bad.at td{background:rgba(251,113,133,.3);color:#fff}
.x-bad.at{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.x-dim.at,tr.x-dim.at td{opacity:.3}
.x-show{opacity:0;transform:translateY(-14px);transition:opacity .45s,transform .45s cubic-bezier(.2,1.2,.4,1)}
.x-show.at{opacity:1;transform:none}
.x-swap{display:none}.x-swap.at{display:inline}
.x-move{transition:transform .7s cubic-bezier(.3,.9,.3,1)}.x-move.at{transform:translate(var(--x,0),var(--y,0))}
.scene{display:flex;gap:30px;align-items:flex-start;justify-content:center}
.scene-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.narr{font-size:23px;color:var(--text);min-height:36px;margin-top:14px}
.caps{display:grid;gap:10px;align-content:start}
.caps .cap{font-size:22px;padding:11px 15px}
.mini .node{width:170px;padding:14px 8px}.mini .node .ic{font-size:36px}.mini .node b{font-size:20px}.mini .node span{font-size:15px}
.lane{display:grid;grid-template-columns:150px 1fr 1fr;gap:9px 14px;align-items:stretch;font-size:21px}
.lane .h{font-weight:700;color:var(--text);padding:6px 12px}
.lane .t{font:600 16px var(--mono);color:var(--dim);align-self:center}
.lane .c{padding:11px 14px;border-radius:11px;background:var(--panel);border:1px solid var(--line);font:20px var(--mono);color:#cbd5f5}
.money{font:800 54px var(--font);color:var(--a2)}
.venn{position:relative;width:150px;height:92px;margin:0 auto 10px}
.venn i{position:absolute;top:6px;width:80px;height:80px;border-radius:50%;border:2px solid var(--muted)}
.venn i:nth-child(1){left:12px}.venn i:nth-child(2){left:58px}
.venn.lft i:nth-child(1),.venn.ful i{background:rgba(34,211,238,.42)}
.venn.rgt i:nth-child(2),.venn.ful i:nth-child(2){background:rgba(244,114,182,.42)}
.tree line{stroke:var(--dim);stroke-width:3;transition:stroke .35s}
.tree line.x-ok.at,.tree line.x-hl.at{stroke:var(--a4);stroke-width:5}
.tree .n circle{fill:var(--bg2);stroke:var(--a1);stroke-width:3;transition:fill .35s,stroke .35s}
.tree .n text{fill:var(--text);font:700 24px var(--font);text-anchor:middle;dominant-baseline:central}
.tree .p{fill:var(--muted);font:14px var(--mono);text-anchor:middle}
.tree .n.x-ok.at circle{fill:rgba(52,211,153,.4);stroke:var(--a4)}
.tree .n.x-hl.at circle{fill:rgba(251,191,36,.45);stroke:var(--a5)}
.tree .x-show{transform:none}

/* ===== Live build status chip (with the bottom tool panel) ===== */
#build{position:fixed;left:50%;bottom:var(--build-b,74px);transform:translateX(-50%);z-index:50;display:none;align-items:center;gap:10px;padding:6px 14px 6px 7px;border-radius:99px;background:rgba(13,20,48,.94);border:1px solid var(--line);color:var(--text);font:600 14px var(--font);cursor:pointer;transition:bottom .3s;max-width:calc(100vw - 24px);white-space:nowrap}
body.idle:not(.tool) #build{bottom:12px}
#build.show{display:inline-flex}
#build .ring{--p:0;--c:var(--a4);width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.12) 0)}
#build .ring b{width:24px;height:24px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font:700 9px var(--mono);color:var(--text)}
#build .ph{overflow:hidden;text-overflow:ellipsis}
#build .el{font:600 13px var(--mono);color:var(--muted)}
#build .el.late{color:var(--a6)}
#build[data-l="waiting"],#build[data-l="quiet"]{border-color:var(--a5)}
#build[data-l="waiting"] .ring,#build[data-l="quiet"] .ring{--c:var(--a5)}
#build[data-l="stuck"],#build[data-l="failed"]{border-color:var(--a6)}
#build[data-l="stuck"] .ring,#build[data-l="failed"] .ring{--c:var(--a6)}
#build[data-l="waiting"],#build[data-l="stuck"],#build[data-l="failed"]{animation:alertpulse 1.4s infinite}
@keyframes alertpulse{50%{box-shadow:0 0 0 7px rgba(251,113,133,.25)}}
#build[data-l="off"]{opacity:.7}
#builddetail{position:fixed;left:50%;bottom:calc(var(--build-b,74px) + 48px);transform:translateX(-50%);z-index:51;width:min(380px,calc(100vw - 24px));padding:14px 16px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);font-size:14px;color:var(--muted);display:none}
#builddetail.show{display:block}
#builddetail b{color:var(--text)}
#builddetail div{margin:3px 0}
@media (max-width:760px),(pointer:coarse) and (max-height:500px){
  #build,body.idle:not(.tool) #build{left:12px;right:auto;bottom:14px;transform:none;max-width:calc(100vw - 80px)}
  body.bar-open #build{bottom:120px}
  body:has(#build.show) #count{display:none}   /* the build chip takes this corner only while a build runs */
  #builddetail{bottom:62px}
  #build .el{display:none}
}
@media print{#build,#builddetail{display:none!important}}

/* ===== Motion (assets/motion.js) ===== */
#fx{position:absolute;left:0;top:0;width:1600px;height:900px;z-index:14;pointer-events:none;overflow:hidden}
.fxg{position:absolute;left:0;top:0;padding:8px 16px;border-radius:12px;font:700 20px var(--mono);white-space:nowrap;color:#07101f;background:var(--c,var(--a2));box-shadow:0 0 26px var(--c,var(--a2))}
.fxp{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%}
.fxc{position:absolute;left:0;top:0;width:12px;height:18px;border-radius:2px}
.fxflash{position:absolute;inset:0;background:#000;display:grid;place-items:center;font-size:190px;opacity:0}
.fxsvg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:6;overflow:visible}
.fxline{fill:none;stroke:var(--c);stroke-width:3.5;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 5px var(--c))}
.fxdot{fill:#fff;filter:drop-shadow(0 0 7px var(--c))}
.chip{display:inline-flex;align-items:center;gap:12px;padding:10px 20px;border-radius:99px;background:var(--panel);border:1px solid var(--line);font:600 23px var(--font);color:var(--text)}
.chip b{font-family:var(--mono);color:var(--a2)}
.x-pop.at{animation:popin .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes popin{from{transform:scale(.4)}}
.x-wait.at{animation:waiting 1.1s ease-in-out infinite}
@keyframes waiting{50%{opacity:.5}}
.x-fall.at{animation:fall .9s cubic-bezier(.5,0,.8,.6) forwards}
@keyframes fall{to{transform:translateY(70px) rotate(7deg);opacity:0}}
.glideL{transform:translateX(-80px);transition:transform .8s cubic-bezier(.3,.9,.3,1)}.glideR{transform:translateX(50px);transition:transform .8s cubic-bezier(.3,.9,.3,1)}
.glideL.at,.glideR.at{transform:none}
.scan.at td{animation:scanrow 1.5s linear infinite;animation-delay:calc(var(--i)*.3s)}
@keyframes scanrow{0%,19%{background:rgba(251,113,133,.42);color:#fff}20%,100%{background:transparent}}
.tree line,.tree .n circle{transition-delay:var(--d,0s)}
.counter{font:800 38px var(--mono);color:var(--a6)}.counter.good{color:var(--a4)}
.drift{position:absolute;opacity:.3;animation:float 7s ease-in-out infinite;animation-delay:var(--dl,0s);font-size:15px!important;pointer-events:none}
.drift td,.drift th{padding:3px 9px!important}
body.static .x-fall.at{opacity:0}
@media print{#fx,.fxsvg{display:none!important}}

/* ===== Real project slides and closure table rows ===== */
.kicker.rp{color:var(--a4)}
.idea{font-size:32px;line-height:1.35;color:var(--text);margin:0}
.idea span{padding:0 5px;border-radius:7px;transition:background .35s}
.dt.tight{font-size:17px}
.dt.tight th,.dt.tight td{padding:3px 12px}
.x-out{transition:opacity .6s}.x-out.at{opacity:0}
.x-gone.at td{animation:rowout 1.05s ease both;animation-delay:var(--d,0s)}
.x-gone.done{display:none}
@keyframes rowout{0%,42%{background:rgba(251,113,133,.6);color:#fff}72%{opacity:0;transform:translateX(70px);background:rgba(251,113,133,.6)}100%{opacity:0;transform:translateX(70px);padding-top:0;padding-bottom:0;font-size:0;line-height:0;border-top-width:0}}
body.static .x-gone.at{display:none}
@media print{.x-gone.at{display:none}}