/* Scroll-driven story sections. Each .story is a tall section with a pinned stage;
   story.js sets --p (0..1) on the section and toggles .is-on / .is-current on [data-at] elements. */
.ic{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.story{position:relative;--p:0;min-height:300vh;border-top:1px solid #ffffff10;background:#0b0d10}
.story:nth-of-type(odd){background:#090a0b}
.story-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);gap:56px;align-items:center;width:min(1200px,calc(100% - 80px));margin:0 auto;padding-top:76px}
.story-copy{position:relative;padding-left:26px}
.story-rail{position:absolute;left:0;top:6px;bottom:6px;width:1px;background:#2b3038}
.story-rail::after{content:'';position:absolute;inset:0;background:var(--lime);transform-origin:top;transform:scaleY(var(--p))}
.story-kicker{display:flex;gap:12px;align-items:center;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#9fb86a;margin:0 0 18px}
.story-kicker b{font-weight:600;color:#d1f5a0}
.story h2{font-size:clamp(28px,3.1vw,42px);margin:0 0 16px}
.story-lead{font-size:15px;line-height:1.75;color:#b4bcc8;margin:0 0 24px;max-width:46ch;text-wrap:pretty}
.story-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.story-steps li{position:relative;padding:8px 0 8px 22px;opacity:.38;transition:opacity 300ms}
.story-steps li::before{content:'';position:absolute;left:0;top:16px;width:8px;height:8px;border-radius:50%;border:1px solid #6e7786;background:#0b0d10;transition:background 200ms,border-color 200ms,box-shadow 200ms}
.story-steps li strong{display:block;font-size:14px;font-weight:600;color:#e7eaef}
.story-steps li span{display:block;font-size:12.5px;line-height:1.65;color:#9aa3b1;margin-top:2px;text-wrap:pretty}
.story-steps li.is-on{opacity:.62}.story-steps li.is-on::before{background:#4b5a35;border-color:#7f9a52}
.story-steps li.is-current{opacity:1}.story-steps li.is-current::before{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 4px #b7f34a22}
.story-scene{position:relative;container-type:inline-size;height:min(580px,calc(100svh - 150px));border:1px solid #2c323b;border-radius:18px;background:radial-gradient(ellipse at 50% 40%,#1a1f2740,transparent 65%),#0f1114;overflow:hidden;isolation:isolate;font-size:13px}
.scene-caption{position:absolute;left:18px;right:18px;bottom:14px;display:grid;font-size:12.5px;color:#c6cdd8;z-index:5;pointer-events:none}
.scene-caption>*{grid-area:1/1;margin:0;opacity:0;transform:translateY(6px);transition:opacity 260ms,transform 260ms var(--ease);display:flex;align-items:center;gap:8px}
.scene-caption>*::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
.scene-caption>.is-current{opacity:1;transform:none}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #39404a;border-radius:10px;background:#161a1f;color:#c9d0da;font-size:12px;font-weight:500;white-space:nowrap;line-height:1.3}
.chip .ic{width:15px;height:15px;color:#9fb0c6}
.chip.lit,.lit.chip{border-color:#86a35a;background:#1b2317;color:#dcf5bd}.chip.lit .ic{color:#c9f28a}
.badge{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:#1b2317;border:1px solid #86a35a;color:#dcf5bd;font-size:11.5px;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity 320ms,transform 320ms var(--ease)}
.badge .ic{width:14px;height:14px;color:#c9f28a}
.badge.is-on{opacity:1;transform:none}

/* Final: convergence to the CTA */
.story-static{min-height:0;padding:140px 0 150px;background:radial-gradient(ellipse at 50% 60%,#1b2317,transparent 60%),#090a0b;text-align:center}
.final-wrap{width:min(900px,calc(100% - 80px));margin:0 auto}
.final-line{font-size:clamp(30px,4.4vw,56px);line-height:1.15;letter-spacing:-.035em;font-weight:500;margin:0;opacity:0;transform:translateY(18px);transition:opacity 600ms,transform 700ms var(--ease);text-wrap:balance}
.final-accent{color:#cbd1da;margin-top:12px}
.final-accent em{font-style:normal;color:var(--lime)}
.final-line.is-on{opacity:1;transform:none}
.final-ctas{display:flex;justify-content:center;gap:12px;margin-top:38px;flex-wrap:wrap;opacity:0;transform:translateY(12px);transition:opacity 600ms,transform 700ms var(--ease)}
.final-ctas.is-on{opacity:1;transform:none}
.final-note{margin:30px 0 0;font-size:12.5px;color:#8b95a4}

/* 02 Discover: interactive "what do you need?" */
.discover{background:#0d0f12}
.discover-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.need{min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid #373d46;background:transparent;color:#bbc3ce;font-size:13px;transition:background 160ms,color 160ms,border-color 160ms}
.need:hover{border-color:#777d87;color:#fff}
.need[aria-selected=true]{background:#b7f34a12;border-color:#8cad52;color:#d1f5a0}
.discover-flow{border:1px solid #2c323b;border-radius:18px;background:#0f1114;padding:28px 28px 24px;min-height:220px}
.discover-desc{font-size:15px;line-height:1.7;color:#c6cdd8;margin:0 0 24px;max-width:70ch;text-wrap:pretty}
.dflow{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:10px 0;align-items:center}
.dflow li{display:flex;align-items:center;gap:0;animation:nodeIn 520ms var(--ease) both;animation-delay:calc(var(--i) * 110ms)}
.dflow li>span{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border:1px solid #39404a;border-radius:11px;background:#161a1f;color:#dfe4ec;font-size:13px;font-weight:500;white-space:nowrap}
.dflow li>span b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#1b2317;border:1px solid #6f8a49;color:#c9f28a;font-size:10px;font-weight:600}
.dflow li:not(:last-child)::after{content:'';width:34px;height:1px;background:linear-gradient(90deg,#8bb34a,#39404a);margin:0 2px;animation:lineIn 400ms var(--ease) both;animation-delay:calc(var(--i) * 110ms + 200ms);transform-origin:left}
.dflow li:last-child>span{border-color:#6f8a49;background:#1b2317;color:#dcf5bd}
@keyframes nodeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.discover-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.discover-foot p{margin:0;font-size:12.5px;color:#8b95a4}

/* Shorter desktop viewports: only the current step shows its description, so the pinned copy never clips. */
@media(max-height:980px) and (min-width:851px){
  .story-copy{max-height:calc(100svh - 92px);overflow:hidden}
  .story-lead{font-size:14px;line-height:1.65;margin-bottom:16px}
  .story-steps li{padding:6px 0 6px 22px}.story-steps li::before{top:14px}
  .story-steps li span{max-height:0;overflow:hidden;margin-top:0;transition:max-height 400ms var(--ease),margin-top 400ms}
  .story-steps li.is-current span{max-height:120px;margin-top:2px}
}
@media(max-width:1100px){.story-pin{gap:36px;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr)}.story-steps li span{font-size:12px}.comp{width:98px;font-size:11px}.tcard{width:210px}}
@media(max-width:850px){
  .story{min-height:260vh}
  .story-pin{grid-template-columns:1fr;gap:18px;align-content:start;padding-top:84px;width:calc(100% - 48px)}
  .story-copy{padding-left:18px}.story h2{font-size:25px;margin-bottom:10px}.story-lead{font-size:13.5px;line-height:1.6;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .story-steps{gap:0}.story-steps li{display:none;padding:4px 0 4px 18px}.story-steps li.is-current{display:block}.story-steps li::before{top:11px}
  .story-scene{height:min(440px,calc(100svh - 300px));min-height:300px;font-size:12px}
  .final-wrap{width:calc(100% - 48px)}.story-static{padding:100px 0 110px}
  .discover-flow{padding:20px 18px 18px}.dflow li>span{font-size:12px;padding:9px 12px}.dflow li:not(:last-child)::after{width:20px}
}
@media(max-width:552px){.story-pin{width:calc(100% - 40px)}.story-scene{height:min(400px,calc(100svh - 290px))}.scene-devices .device{font-size:10px}.device-roles{font-size:9.5px}}
@media(prefers-reduced-motion:reduce){.prob.is-on{opacity:1}.prob.is-on span{transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--radius)) rotate(calc(var(--a) * -1))}.w-pkt,.spoke-pkt{display:none}}

/* ==== Shared scene primitives (used by every scene fragment via window.Story) ==== */
.story-scene{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350}
.scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hit{animation:storyHit 500ms var(--ease)}.hit.hit-warm{animation-name:storyHitWarm}.hit.hit-human{animation-name:storyHitHuman}
@keyframes storyHit{from{box-shadow:0 0 0 0 #b7f34a80}to{box-shadow:0 0 0 10px #b7f34a00}}
@keyframes storyHitWarm{from{box-shadow:0 0 0 0 #e07a5f80}to{box-shadow:0 0 0 10px #e07a5f00}}
@keyframes storyHitHuman{from{box-shadow:0 0 0 0 #f4f5f780}to{box-shadow:0 0 0 10px #f4f5f700}}
.typing::after{content:'';display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.15em;background:currentColor;animation:storyCaret 1s steps(1) infinite}
@keyframes storyCaret{50%{opacity:0}}
.mono{font:500 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:#5a6474}
.draw{stroke-dasharray:100;stroke-dashoffset:100;stroke:var(--c-draft);transition:stroke-dashoffset 700ms var(--ease),stroke 200ms}
.draw.is-on,.is-on>.draw{stroke-dashoffset:0;stroke:#4e6132;animation:storySettle 1s forwards}
@keyframes storySettle{0%,60%{stroke:#b7f34a}100%{stroke:#4e6132}}
@property --seg{syntax:'<number>';inherits:false;initial-value:0}
.ring-seg{background:conic-gradient(var(--c-machine) calc(var(--seg) * 1turn),#2d343e 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));transition:--seg 500ms var(--ease)}
/* Sheet chrome: every scene carries a drafting ruler whose lime fill is the scroll position. */
.story-scene::before{content:attr(data-sheet);position:absolute;left:18px;right:18px;top:8px;height:16px;z-index:6;pointer-events:none;font:500 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.2px;color:#5a6474;background:repeating-linear-gradient(90deg,#3a4350 0 1px,transparent 1px 10%) left bottom/100% 3px no-repeat,linear-gradient(#262b33,#262b33) left bottom/100% 1px no-repeat}
.story-scene::after{content:'';position:absolute;left:18px;right:18px;top:23px;height:1px;z-index:6;pointer-events:none;background:var(--lime);opacity:.85;transform-origin:left;transform:scaleX(var(--p))}
@media(max-width:850px){.story-scene::before{left:14px;right:14px;top:6px;font-size:9px}.story-scene::after{left:14px;right:14px;top:19px}}

/* ==== Scene: problems ==== */
/* 01 Problems (pr-): ten businesses on a ring, ten human requests ride lime currents into one
   intake, then at .82 every current reverses and People / Technology / Automation / Support lock around the hub.
   Chips and labels sit at translate(cx*rx, sy*ry); --cx/--sy are per-element cos/sin constants set inline. */
.scene-problems{container-type:size;--rx:min(calc(44cqw - 20px),250px);--ry:min(calc(44cqw - 20px),250px,calc(50cqh - 44px));--ro:124px;--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350}
.scene-problems>.scene-canvas{width:100%;height:100%}
.scene-problems .ring{position:absolute;inset:0;z-index:1}
.pr-probs{position:absolute;inset:0;pointer-events:none}
.scene-problems .ind,.scene-problems .prob{position:absolute;left:50%;top:50%;--tx:calc(-50% + var(--cx) * var(--rx) * var(--k,1));--ty:calc(-50% + var(--sy) * var(--ry) * var(--k,1))}
.scene-problems .ind{transform:translate(var(--tx),var(--ty));opacity:0;transition:opacity 500ms var(--ease) calc(var(--i) * 60ms),border-color 200ms var(--ease) calc(var(--i) * 60ms),background-color 200ms var(--ease) calc(var(--i) * 60ms),color 200ms var(--ease) calc(var(--i) * 60ms)}
.scene-problems .ind .ic{transition:color 200ms var(--ease) calc(var(--i) * 60ms)}
.scene-problems .ind.is-on{opacity:1}
.scene-problems.stage-served .ind{border-color:#86a35a;background:#1b2317;color:#dcf5bd}
.scene-problems.stage-served .ind .ic{color:#c9f28a}
/* the request: a human artefact (white) riding the spoke into the hub; it starts just inside its business (--k) */
.scene-problems .prob{--k:.82;margin:0;opacity:0;pointer-events:none}
.scene-problems .prob span{display:block;padding:7px 11px;border-radius:9px;background:var(--c-human);color:#111214;font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:0 10px 30px #0008;transform:translate(var(--tx),var(--ty))}
.scene-problems .prob.is-on{animation:prTravel 1.6s var(--ease) forwards}
.scene-problems .prob.is-on span{animation:prRide 1.6s var(--ease) forwards}
@keyframes prTravel{0%{opacity:0}12%{opacity:1}78%{opacity:1}100%{opacity:0}}
@keyframes prRide{0%,30%{transform:translate(var(--tx),var(--ty)) scale(1)}100%{transform:translate(-50%,-50%) scale(.3)}}
/* hub + intake ring (conic --seg = arrivals/10, set by problems.js) */
.scene-problems .hub{position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%);display:grid;place-content:center;justify-items:center;gap:6px;border-radius:50%;border:1px solid #3c4552;background:radial-gradient(circle at 50% 35%,#242b35,#121519);color:#e7eaef;text-align:center;z-index:2;box-shadow:0 0 0 calc(var(--p) * 18px) #b7f34a0d,0 0 calc(var(--p) * 70px) #b7f34a1f}
.scene-problems .hub svg{width:40px;height:auto}
.scene-problems .hub strong{font-size:12px;letter-spacing:1.5px;text-transform:uppercase}
.scene-problems .hub small{font-size:11px;color:#9aa3b1;font-variant-numeric:tabular-nums;transition:color 200ms var(--ease)}
.scene-problems.stage-intake .hub small{color:#dcf5bd}
.scene-problems .hub-ring{position:absolute;left:50%;top:50%;width:190px;height:190px;border-radius:50%;border:1px dashed #3a4350;transform:translate(-50%,-50%);opacity:.4;z-index:2;transition:opacity 500ms var(--ease),--seg 500ms var(--ease)}
.scene-problems.stage-intake .hub-ring{opacity:1}
.pr-intake{position:absolute;left:50%;top:50%;width:202px;height:202px;border-radius:50%;border:1px solid #b7f34a55;transform:translate(-50%,-50%) scale(.94);opacity:0;z-index:2;transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.scene-problems.stage-intake .pr-intake{opacity:1;transform:translate(-50%,-50%)}
/* the plan locks around the hub: four satellites land, four arcs draw between them */
.pr-orbit{position:absolute;inset:0;z-index:3;pointer-events:none}
.pr-arcs{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%);overflow:visible}
.pr-arc{fill:none;stroke-width:1.3;stroke-linecap:round;opacity:0;transition:opacity 200ms var(--ease)}
.pr-arc.is-on{opacity:1}
.pr-sat{position:absolute;left:50%;top:50%;padding:5px 9px;gap:6px;font-size:11.5px;font-weight:600;--tx:calc(-50% + var(--cx) * var(--ro));--ty:calc(-50% + var(--sy) * var(--ro));transform:translate(var(--tx),var(--ty)) scale(.8);opacity:0;transition:opacity 420ms var(--ease),transform 420ms cubic-bezier(.34,1.56,.64,1)}
.pr-sat .ic{width:14px;height:14px}
.pr-sat b{font-weight:600}
.pr-sat.is-on{opacity:1;transform:translate(var(--tx),var(--ty))}
.scene-problems .hub-done{left:18px;top:30px;z-index:4}

@media(max-width:850px){
  .scene-problems{--rx:min(31cqw,108px);--ry:min(134px,calc(50cqh - 46px));--ro:73px}
  .scene-problems .ind{font-size:10.5px;padding:4px 7px;gap:5px}
  .scene-problems .prob{--k:1}
  .scene-problems .prob span{font-size:10.5px;white-space:normal;max-width:104px;text-align:center;padding:5px 8px}
  .scene-problems .hub{width:96px;height:96px}.scene-problems .hub svg{width:26px}.scene-problems .hub strong{font-size:10.5px}.scene-problems .hub small{font-size:10px}
  .scene-problems .hub-ring{width:126px;height:126px}.pr-intake{width:138px;height:138px}
  .scene-problems .hub-done{font-size:10.5px;padding:4px 8px;top:26px}
  .pr-arcs{width:184px;height:184px}
  .pr-sat{padding:5px;gap:0}.pr-sat b{display:none}
}

@media(prefers-reduced-motion:reduce){
  /* the global rule kills animations: show only the latest request, parked at its business */
  .scene-problems .prob.is-on{opacity:0}
  .scene-problems .prob.is-current{opacity:1}
  .scene-problems .prob.is-on span{transform:translate(var(--tx),var(--ty))}
}

/* ==== Scene: understand ==== */
/* 03 Understand: one stream of information crosses six working documents and is shaped by each.
   Prefix un-. Layers: 0 band canvas · 1 .track (cards, ruler) · 3 threads + gauge · 4 docking chips. */
.scene-understand{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350;--un-w:260px;--un-gap:46px}
.scene-understand .mono{font:500 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:#5a6474}
.scene-understand .scene-canvas{position:absolute;inset:0;pointer-events:none}
.un-anchor{display:none}

/* Track: cards row + time ruler travel together with --p */
.scene-understand .track{position:absolute;left:40px;top:50%;z-index:1;display:grid;gap:12px;transform:translate(calc((100cqw - 100% - 80px) * var(--p)),-50%)}
.un-row{display:flex;gap:var(--un-gap)}
.scene-understand .tcard{position:relative;display:flex;flex-direction:column;flex:none;width:var(--un-w);min-height:320px;padding:16px;border:1px solid #333a44;border-radius:14px;background:#13161b;opacity:.4;transform:scale(.95);transition:opacity 400ms,transform 500ms var(--ease),border-color 400ms}
.scene-understand .tcard.is-on{opacity:1;transform:none;border-color:#6f8a49}
.scene-understand .tcard-head{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#e4e8ee;margin-bottom:12px}
.scene-understand .tcard-head .ic{width:18px;height:18px;color:#c9f28a}
.scene-understand .tcard-head em{margin-left:auto;font-style:normal;font-size:10.5px;color:#8b95a4;font-weight:500;white-space:nowrap}
.un-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.un-clip{position:relative;overflow:hidden}
.un-foot{margin:12px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Ruler under the cards: ticks light with their card, the line fills with --p */
.un-ruler{position:relative;display:flex;gap:var(--un-gap);height:22px}
.un-ruler::before,.un-ruler::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:#2a3038}
.un-ruler::after{background:var(--c-machine);opacity:.7;transform-origin:left;transform:scaleX(var(--p))}
.un-ruler i{position:relative;flex:none;width:var(--un-w);padding-top:9px;text-align:center;font-style:normal;transition:color 200ms}
.un-ruler i::before{content:'';position:absolute;left:50%;top:0;width:1px;height:6px;background:#3a4350;transition:background 200ms}
.un-ruler i.is-on{color:#dcf5bd}.un-ruler i.is-on::before{background:var(--c-machine)}

/* 01 Customer: words are typed, then the phrases that matter are highlighted */
.un-bubble{display:grid;padding:12px 14px;border-radius:12px 12px 12px 3px;background:#1f242b;color:#d7dce4;font-size:12.5px;line-height:1.6;min-height:5.2em}
.un-bubble>span{grid-area:1/1}
.un-said{opacity:0}.un-done .un-typed{opacity:0}.un-done .un-said{opacity:1}
.un-wait .un-typed::after{content:'';display:inline-block;width:1px;height:1em;vertical-align:-2px;background:var(--c-machine);animation:un-caret 1s steps(1) infinite}@keyframes un-caret{50%{opacity:0}}
.un-hl{color:inherit;border-radius:2px;background:linear-gradient(#b7f34a55,#b7f34a55) left/0% 100% no-repeat;transition:background-size 500ms var(--ease) calc(var(--i,0) * 120ms),color 200ms calc(var(--i,0) * 120ms)}
.stage-req .un-hl{background-size:100% 100%;color:#dcf5bd}

/* 02 Requirement: bars extend from the left, threads arrive from the customer's words */
.scene-understand .doc{display:grid;gap:10px}
.scene-understand .doc span{display:flex;align-items:center;gap:8px;height:8px}
.scene-understand .doc i{display:block;flex:none;height:8px;border-radius:4px;background:#2b313a;width:var(--w);transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ease) calc(var(--i) * 70ms)}
.scene-understand .doc i.hl{background:#5d7a3a}
.scene-understand .doc em{font-style:normal;white-space:nowrap;opacity:0;transition:opacity 200ms calc(var(--i) * 70ms + 350ms),color 200ms}
.scene-understand .tcard.is-on .doc i{transform:none}.scene-understand .tcard.is-on .doc em{opacity:1;color:#dcf5bd}
.un-threads{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
.un-thread{fill:none;stroke:var(--c-machine);stroke-width:1;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:.85}

/* 03 Business analysis: checks tick in sequence, time lost is counted */
.scene-understand .checks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:12px;color:#aab3bf}
.scene-understand .checks li{display:flex;align-items:center;gap:9px;min-height:20px;padding-right:2px;border-radius:6px;transition:color 200ms}
.scene-understand .checks li::before{content:'';width:12px;height:12px;border-radius:4px;border:1px solid #6b7c54;background:#1b2317;flex:none;transition:background 200ms,border-color 200ms}
.scene-understand .checks li.is-on{color:#e4e8ee}.scene-understand .checks li.is-on::before{background:var(--c-machine);border-color:var(--c-machine)}
.un-lost{margin-left:auto;padding:2px 6px;border-radius:5px;border:1px solid #e07a5f55;color:var(--c-friction);font-variant-numeric:tabular-nums;opacity:0;transform:scale(.8);transition:opacity 200ms,transform 420ms cubic-bezier(.34,1.56,.64,1)}
.scene-understand .checks li.is-on .un-lost{opacity:1;transform:none}

/* 04 Technical analysis: a scan line reads the systems, each gets a status pill */
.scene-understand .mini-map{display:flex;flex-wrap:wrap;gap:7px}
.scene-understand .mini-map .chip{font-size:11px;padding:5px 8px;max-width:100%;transition:border-color 200ms,background 200ms,color 200ms}
.un-pill{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:4px;border:1px solid #3a4350;font-style:normal;color:var(--c-idle);opacity:0;transform:scale(.8);transition:opacity 200ms,transform 420ms cubic-bezier(.34,1.56,.64,1)}
.chip.is-on .un-pill{opacity:1;transform:none}
.un-pill.un-warn{color:var(--c-friction);border-color:#e07a5f55}.un-pill.un-ok{color:var(--c-machine);border-color:#86a35a}
.un-reuse.is-on{border-color:#86a35a;background:#1b2317;color:#dcf5bd}
.un-scan{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(calc(var(--sy,0) * 100%));transition:opacity 200ms}
.un-scan::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--c-machine);filter:blur(2px)}
.un-scan::after{content:'';position:absolute;left:0;right:0;bottom:100%;height:28px;background:linear-gradient(transparent,#b7f34a14)}
.stage-scan .un-scan{opacity:1}.stage-scanned .un-scan{opacity:0}

/* 05 Solution architecture: grey draft outlines, lime draw-on, then the boxes fill; reusable systems dock in */
.un-arch{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:9% 2.6%;height:104px;font-size:10.5px;text-align:center}
.un-arch span{display:flex;align-items:center;justify-content:center;padding:0 3px;background:#181d24;color:#d4dae3;opacity:0;transition:opacity 500ms var(--ease) 700ms,background 200ms 650ms,color 200ms 650ms}
.un-arch span.wide{grid-column:1/-1;color:#dcf5bd;background:#1b2317}
.scene-understand .tcard.is-on .un-arch span{opacity:1}
.un-bp{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.un-bp path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.un-bp .un-draft{stroke:var(--c-draft)}
.un-bp .draw{stroke:var(--c-machine);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 700ms var(--ease) var(--d),stroke 400ms calc(var(--d) + 1000ms)}
.un-bp .un-box{--d:calc(var(--i) * 60ms)}.un-bp .un-conn{--d:calc(400ms + var(--i) * 60ms)}
.scene-understand .tcard.is-on .un-bp .draw{stroke-dashoffset:0;stroke:#4e6132}
.stage-dock .un-int{background:#1b2317;color:#dcf5bd}
.un-fly{position:absolute;left:0;top:0;z-index:4;margin:0;font-size:11px;padding:5px 8px;opacity:0;pointer-events:none;will-change:transform;transform:translate(var(--x1,0px),var(--y1,0px));transition:transform 700ms var(--ease) calc(var(--i) * 90ms),opacity 200ms calc(var(--i) * 90ms)}
.un-fly em{font-style:normal;font-size:9.5px;margin-left:4px;color:var(--c-machine)}
.stage-dock .un-fly{opacity:.9;transform:translate(var(--x2,0px),var(--y2,0px)) scale(.3)}

/* 06 Implementation plan: phase bars extend, a time cursor sweeps, milestones pop as it reaches them */
.scene-understand .plan{position:relative;display:grid;gap:10px;font-size:11px;color:#aab3bf}
.scene-understand .plan div{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:center;height:18px}
.scene-understand .plan div>i{display:block;height:9px;border-radius:5px;background:#425a2a;width:var(--w);margin-left:var(--o);transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ease) calc(var(--i) * 90ms),background 200ms}
.scene-understand .tcard.is-on .plan div>i{transform:none}
.stage-m1 .plan div:nth-child(1) i,.stage-m2 .plan div:nth-child(2) i,.stage-m3 .plan div:nth-child(3) i{background:var(--c-machine)}
.un-lane{position:absolute;left:78px;right:0;top:0;bottom:0;pointer-events:none}
.un-ms{position:absolute;left:var(--mx);top:calc(9px + var(--row) * 28px);width:6px;height:6px;background:var(--c-machine);transform:translate(-50%,-50%) rotate(45deg) scale(0);transition:transform 420ms cubic-bezier(.34,1.56,.64,1)}
.un-ms.is-on{transform:translate(-50%,-50%) rotate(45deg) scale(1)}
.un-cursor{position:absolute;inset:0;opacity:0;transform:translateX(calc(var(--cx,0) * 100%));transition:opacity 200ms}
.un-cursor::before{content:'';position:absolute;left:0;top:-5px;bottom:-5px;width:1px;background:var(--c-machine)}
.scene-understand .tcard.is-on .un-cursor{opacity:1}

/* Clarity gauge, top-right, clear of the sheet ruler */
.un-gauge{position:absolute;right:18px;top:34px;z-index:3;width:44px;height:44px}
.un-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--c-machine) calc(var(--seg,0) * 1turn),#2d343e 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
.un-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:600;color:#dcf5bd;font-variant-numeric:tabular-nums}
.un-gauge .mono{position:absolute;top:100%;left:50%;margin-top:5px;transform:translateX(-50%);white-space:nowrap}

@media(max-width:850px){
  .scene-understand{--un-w:200px;--un-gap:36px}
  .scene-understand .track{left:24px;gap:8px;transform:translate(calc((100cqw - 100% - 48px) * var(--p)),calc(-50% + 8px))}
  .scene-understand .tcard{min-height:230px;padding:13px}
  .scene-understand .tcard-head{font-size:12px;margin-bottom:8px}.scene-understand .tcard-head .ic{width:16px;height:16px}
  .un-bubble{font-size:11.5px;padding:10px 11px;min-height:0}
  .scene-understand .doc{gap:8px}.scene-understand .doc span,.scene-understand .doc i{height:7px}
  .scene-understand .checks{gap:7px;font-size:11px}.scene-understand .checks li{min-height:18px}
  .scene-understand .mini-map{gap:5px}.scene-understand .mini-map .chip{font-size:10px;padding:4px 7px;white-space:normal;flex-wrap:wrap}.un-pill{font-size:9px;padding:0 4px;margin-left:4px}
  .un-scan::before{height:1.5px}
  .un-arch{height:88px;font-size:9.5px}
  .scene-understand .plan{gap:8px;font-size:10px}.scene-understand .plan div{grid-template-columns:56px 1fr;height:16px}.scene-understand .plan div>i{height:8px}
  .un-lane{left:64px}.un-ms{top:calc(8px + var(--row) * 24px)}
  .un-foot{margin-top:8px;font-size:9px}
  .un-gauge{right:14px;top:28px;width:36px;height:36px}.un-pct{font-size:9.5px}.un-gauge .mono{font-size:9px;margin-top:4px}
  .un-ruler{height:18px}.un-ruler i{padding-top:7px;font-size:9px}
  .un-fly{font-size:10px;padding:4px 7px}
}
@media(max-width:552px){.un-ruler i,.un-ruler i.is-on{color:transparent}}
@media(prefers-reduced-motion:reduce){.un-scan{opacity:0}.stage-scan .un-scan{opacity:0}}

/* ==== Scene: build ==== */
/* 04 Build: a drafting table. The plan (ghost slots + dashed bus) is there from p=0; a lime plotter cursor traces
   each component into existence, grey data stays trapped inside it, and at .85/.88 the API bus is drawn and every
   cloud escapes onto one circulating stream while the tilted table stands up into a flat system diagram. */
.scene-build{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350;--cw:112px;--flat:clamp(0,calc((var(--p) - .78) / .07),1);perspective:1200px;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:40px 40px}
.bd-cam{position:absolute;inset:0;transform:rotateX(calc(10deg * (1 - var(--flat)))) translateY(calc(-14px * (1 - var(--flat))));transform-origin:50% 60%;will-change:transform}
.bd-cam .scene-canvas{z-index:4;width:100%;height:100%}

/* API bus: dashed plan first, then drawn on in lime and settled to the live spine colour */
.scene-build .bus{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.scene-build .bus path{fill:none;stroke:var(--c-draft);stroke-width:.25;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1100ms var(--ease),stroke 200ms}
.scene-build .bus g path{transition:stroke-dashoffset 700ms var(--ease) calc(var(--i) * 70ms),stroke 200ms}
.scene-build .bus path.is-on,.scene-build .bus g.is-on path{stroke-dashoffset:0;stroke:#4e6132;animation:bdSettle 1300ms var(--ease) both}
.scene-build .bus g.is-on path{animation-delay:calc(var(--i) * 70ms)}
.scene-build .bd-plan path{stroke:var(--c-draft);stroke-width:.2;stroke-dasharray:1 1.2;stroke-dashoffset:0;animation:none;transition:none}
@keyframes bdSettle{0%,55%{stroke:var(--c-machine)}100%{stroke:#4e6132}}

/* Components: ghost slot (::before) -> plotter trace -> real body (::after) + icon/label -> border lands with overshoot */
.comp{position:absolute;left:var(--x);top:var(--y);width:var(--cw);padding:12px 8px;border:1px solid transparent;border-radius:12px;background:none;opacity:1;color:#aeb8c6;display:grid;justify-items:center;gap:7px;font-size:11.5px;font-weight:500;text-align:center;z-index:3;transform:translate(-50%,-50%) scale(.96);transition:transform 300ms var(--ease),border-color 200ms,color 200ms}
.comp::before,.comp::after{content:'';position:absolute;z-index:-1;border-radius:12px;transition:opacity 300ms}
.comp::before{inset:-1px;border:1px dashed var(--c-draft)}
.comp::after{inset:0;border-radius:11px;background:#15191f;opacity:0}
.comp .ic{width:24px;height:24px}
.comp .ic,.comp span{opacity:0;transition:opacity 300ms,color 200ms}
.bd-trace{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;transition:opacity 150ms}
.bd-trace rect{x:.5px;y:.5px;width:calc(100% - 1px);height:calc(100% - 1px);rx:11.5px;fill:none;stroke:var(--c-machine);stroke-width:1.2;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 600ms var(--ease)}
.comp.is-on{border-color:#6f8a49;color:#dcf5bd;transform:translate(-50%,-50%);transition:transform 420ms cubic-bezier(.34,1.56,.64,1) 600ms,border-color 200ms 600ms,color 200ms 600ms}
.comp.is-on::before{opacity:0}
.comp.is-on::after{opacity:1;transition:opacity 200ms}
.comp.is-on .ic,.comp.is-on span{opacity:1;transition:opacity 300ms 350ms,color 200ms 600ms}
.comp.is-on .ic{color:#c9f28a}
.comp.is-on .bd-trace{opacity:0;transition:opacity 300ms 700ms}
.comp.is-on .bd-trace rect{stroke-dashoffset:0}

/* Spec layer: group labels above/below the rows, build log bottom-left (newest line is the bottom row) */
.bd-group{position:absolute;left:calc(var(--x) - var(--cw) / 2);top:var(--y);z-index:5;display:flex;align-items:center;gap:8px;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:#dcf5bd;white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity 300ms,transform 500ms var(--ease)}
.bd-group::before{content:'';width:14px;height:1px;background:#86a35a;transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ease) 100ms}
.bd-group.is-on{opacity:1;transform:none}.bd-group.is-on::before{transform:none}
.bd-log{position:absolute;left:18px;bottom:14px;z-index:6;--lh:14px;--vis:3;height:calc(var(--vis) * var(--lh));overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 55%);mask:linear-gradient(transparent,#000 55%);font:500 10px/14px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:var(--c-idle)}
.bd-log-rows{--rows:0;transform:translateY(calc((var(--vis) - var(--rows)) * var(--lh)));transition:transform 500ms var(--ease)}
.bd-log-rows i{display:block;font-style:normal;white-space:pre;line-height:var(--lh);opacity:.6;transition:opacity 200ms,color 200ms}
.bd-log-rows i b{font-weight:600;color:#6f8a49}
.bd-log-rows i.is-current{opacity:1;color:#dcf5bd}.bd-log-rows i.is-current b{color:var(--c-machine)}
.build-done{left:auto;right:18px;bottom:14px;transform:translateY(8px)}.build-done.is-on{transform:none}

@media(max-width:1100px){.scene-build{--cw:98px}.comp{font-size:11px}}
@media(max-width:850px){
  .scene-build{--flat:1;--cw:86px}
  .scene-build .bus path{stroke-width:.4}.scene-build .bd-plan path{stroke-width:.3}
  .comp{padding:9px 6px;font-size:10px;gap:5px}.comp .ic{width:20px;height:20px}
  .bd-group{display:none}
  .bd-log{left:12px;bottom:10px;--lh:13px;--vis:2;font-size:9.5px}
  .build-done{right:12px;bottom:10px;font-size:10.5px;padding:5px 9px}.build-done span{display:none}
}
/* Reduced motion: every state above is class/p-based, so the global rule leaves a correct static frame;
   the trace cursor has nothing to draw, so hand over to the real border at once. */
@media(prefers-reduced-motion:reduce){.comp.is-on .bd-trace{opacity:0}.scene-build .bus path.is-on,.scene-build .bus g.is-on path{stroke:#4e6132}}

/* ==== Scene: integrate ==== */
/* 05 Integrate: eleven existing systems shake hands with the new system, feed live counters,
   two conflicting records collapse into one, then every one-way stream becomes two-way. Prefix in-. */
.scene-integrate{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350;--in-top:28px;--in-bot:10px;--in-rowh:28px}
.scene-integrate>i[data-at]{display:none}
.in-board{position:absolute;left:0;right:0;top:var(--in-top);bottom:var(--in-bot)}
.in-mono{font:500 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:var(--c-idle)}
.scene-integrate .hit{animation:in-hit 500ms var(--ease)}
@keyframes in-hit{from{box-shadow:0 0 0 0 #b7f34a80}to{box-shadow:0 0 0 10px transparent}}

/* Wires: grey drafting base; the live line draws on in lime, settles dim, brightens again once traffic runs both ways.
   Stroke widths are viewBox units (100x100 stretched to the box), so non-scaling-stroke is deliberately not used. */
.scene-integrate .wires{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.scene-integrate .wires path{fill:none}
.scene-integrate .w-base{stroke:#2d343e;stroke-width:.25}
.scene-integrate .w-fill{stroke:var(--c-machine);stroke-width:.25;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1100ms var(--ease),stroke 200ms}
.scene-integrate .wire.is-on .w-fill{stroke-dashoffset:0;stroke:#4e6132;transition:stroke-dashoffset 1100ms var(--ease),stroke 600ms linear 1100ms}
.scene-integrate.stage-both .wire.is-on .w-fill{stroke:#7f9f4a;transition:stroke-dashoffset 1100ms var(--ease),stroke 500ms var(--ease)}

/* External systems: LED orange = not connected, lime once the handshake reply has landed (JS toggles .in-done). */
.scene-integrate .ext{position:absolute;box-sizing:border-box;left:3%;top:var(--y);width:23.5%;padding:6px 9px;gap:7px;font-size:11.5px;transform:translateY(-50%);justify-content:flex-start;opacity:.45;z-index:2;overflow:hidden;transition:opacity 400ms,border-color 200ms,background 200ms,color 200ms}
.in-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:inherit}
.scene-integrate .ext::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--c-friction);flex:none;transition:background 200ms}
.scene-integrate .ext.is-on{opacity:1;border-color:#86a35a;background:#1b2317;color:#dcf5bd}
.scene-integrate .ext.is-on .ic{color:#c9f28a}
.scene-integrate .ext.in-done::before,.scene-integrate:not(.in-js) .ext.is-on::before{background:var(--c-machine)}
.scene-integrate.stage-both .ext.in-done::before{animation:in-blink 300ms linear}
@keyframes in-blink{0%,50%{background:var(--c-human)}51%,100%{background:var(--c-machine)}}

/* The new system: dormant grey card until the first connector is live. */
.scene-integrate .newsys{position:absolute;box-sizing:border-box;left:62%;top:50%;width:32%;transform:translateY(-50%);padding:16px;border:1px solid #3a414c;border-radius:14px;background:#121519;z-index:2;transition:border-color 200ms}
.scene-integrate .newsys::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,#1b2317,#121519);opacity:0;z-index:-1;transition:opacity 500ms var(--ease)}
.scene-integrate.stage-live .newsys{border-color:#6f8a49}
.scene-integrate.stage-live .newsys::before{opacity:1}
.scene-integrate .newsys-head{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#e7eaef;margin-bottom:12px;border-radius:8px}
.scene-integrate .newsys-head .ic{color:var(--c-idle);transition:color 200ms}
.scene-integrate.stage-live .newsys-head .ic{color:#c9f28a}
.in-link{margin-left:auto;white-space:nowrap}
.in-link b{color:#dcf5bd;font-weight:600;font-variant-numeric:tabular-nums}
.scene-integrate .newsys ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:11.5px;color:#aab3bf}
.scene-integrate .newsys li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 8px;border-radius:7px;background:#ffffff08;transition:background 200ms}
.scene-integrate .newsys li b{color:var(--c-idle);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color 200ms}
.scene-integrate .newsys li.in-live{background:#b7f34a0d}
.scene-integrate .newsys li.in-live b{color:#dcf5bd}
.in-sfx{font-style:normal;font-weight:500;font-size:10.5px;color:#9fb86a;margin-left:4px;opacity:0;transition:opacity 200ms}
.in-live .in-sfx{opacity:1}

/* One source of truth: two drafted record slots fill with conflicting customer records, then collapse into one. */
.in-conflict{margin-top:10px;padding-top:8px;border-top:1px dashed var(--c-draft);display:grid;gap:4px;min-width:0}
.in-conflict>*{min-width:0}
.in-lbl{display:block;margin-bottom:2px}
.in-recs{display:grid;gap:4px}
.in-rec{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center;gap:0 8px;height:var(--in-rowh);padding:0 8px;border:1px dashed var(--c-draft);border-radius:6px;font:500 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:#c6cdd8;transition:border-color 200ms,color 200ms,transform 500ms var(--ease),opacity 500ms var(--ease)}
.in-rec>span{opacity:0;transform:translateX(-10px);transition:opacity 500ms var(--ease),transform 500ms var(--ease),color 200ms}
.in-rec2>span{transition-delay:80ms}
.scene-integrate.stage-truth .in-rec{border-style:solid;border-color:#4a515c}
.scene-integrate.stage-truth .in-rec>span{opacity:1;transform:none}
.scene-integrate.stage-truth .in-rec2 .in-tel{color:var(--c-friction)}
.in-verdict{display:grid;grid-template-columns:minmax(0,max-content);justify-content:start;height:18px;transition:transform 500ms var(--ease)}
.in-verdict>span{grid-area:1/1;display:flex;align-items:center;gap:6px;height:18px;max-width:100%;padding:0 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity 200ms}
.in-verdict i{font-style:normal}
.in-verdict>span::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.in-v-conflict{color:var(--c-friction);border-color:#e07a5f55}
.in-v-ok{color:#dcf5bd;border-color:#86a35a;background:#1b2317}
.scene-integrate.stage-truth .in-v-conflict{opacity:1}
.scene-integrate.stage-dedupe .in-v-conflict{opacity:0}
.scene-integrate.stage-dedupe .in-v-ok{opacity:1}
.scene-integrate.stage-dedupe .in-rec2{transform:translateY(calc(-100% - 4px));opacity:0}
.scene-integrate.stage-dedupe .in-rec:first-child{border-color:var(--c-machine);color:#dcf5bd}
.scene-integrate.stage-dedupe .in-verdict{transform:translateY(calc(-1 * (var(--in-rowh) + 4px)))}

/* Both directions. */
.scene-integrate .sync-badge{left:62%;bottom:9%;z-index:4}
.scene-integrate .sync-badge .ic{transition:transform 600ms var(--ease)}
.scene-integrate .sync-badge.is-on .ic{transform:rotate(180deg)}

@media(max-width:850px){
  .scene-integrate{--in-top:22px;--in-bot:6px;--in-rowh:30px}
  .scene-integrate .w-base,.scene-integrate .w-fill{stroke-width:.4}
  .scene-integrate .ext{font-size:10px;padding:5px 7px 5px 13px;width:27%;gap:5px}
  .scene-integrate .ext .ic{width:14px;height:14px}
  .scene-integrate .ext::before{position:absolute;left:4px;top:50%;transform:translateY(-50%)}
  .scene-integrate .newsys{width:38%;left:59%;padding:10px;border-radius:12px}
  .scene-integrate .newsys-head{font-size:12px;gap:7px;margin-bottom:8px}
  .in-link,.in-sfx,.in-lbl,.in-verdict i{display:none}
  .scene-integrate .newsys ul{font-size:10.5px;gap:4px}
  .scene-integrate .newsys li{padding:5px 7px}
  .in-conflict{margin-top:8px;padding-top:6px}
  .in-rec{padding:0 6px;gap:0 6px}
  .in-verdict>span{padding:0 7px}
  .scene-integrate .sync-badge{left:auto;right:3%;bottom:2%;font-size:10.5px;padding:5px 9px}
}
@media(prefers-reduced-motion:reduce){
  /* The global rule already removes transitions and animations; state is class/p-driven so the end state is complete. */
  .scene-integrate .ext.in-done::before{background:var(--c-machine)}
  .scene-integrate .sync-badge.is-on .ic{transform:rotate(180deg)}
}

/* ==== Scene: automate ==== */
/* 06 Automate (prefix au-): five hand-off lanes straighten into automated flows.
   Layers: header (Before | clocks | After) / .auto-rows + lane canvas / footer sparkline + counters. */
.scene-automate{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:32px 24px 16px}
.au-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.4px;color:#5a6474}
.auto-head{display:grid;grid-template-columns:150px 1fr 140px;align-items:center;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#8b95a4;margin-bottom:8px}
.au-col-before{justify-self:end;padding-right:2px}
.au-col-after{color:#9fb86a;padding-left:2px}
.au-clocks{display:flex;align-items:center;gap:18px;justify-self:end;padding-right:16px}
.au-clock{display:inline-flex;align-items:center;gap:7px;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:#5a6474;text-transform:uppercase}
.au-clock b{font-weight:600;font-size:11px;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;transition:color 200ms var(--ease)}
.au-clock-manual b{color:var(--c-friction)}.au-clock-auto b{color:var(--c-machine)}
.au-check{width:11px;height:11px;fill:none;stroke:var(--c-machine);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 200ms var(--ease)}
.au-check path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 700ms var(--ease)}
.stage-done .au-clock-manual b{color:#9aa3b1}.stage-done .au-check{opacity:1}.stage-done .au-check path{stroke-dashoffset:0}
.au-anchor{display:none}
/* lanes: chips sit above the canvas (z 1 over z 0) */
.auto-rows{position:relative;display:grid;grid-template-rows:repeat(5,minmax(0,1fr));min-height:0}
.auto-row{position:relative;z-index:1;display:grid;grid-template-columns:150px 1fr 140px;align-items:center;min-height:0}
.auto-row .chip{font-size:11px;padding:6px 9px;gap:7px;white-space:normal;max-width:100%;line-height:1.25}
.auto-row .chip .ic{width:14px;height:14px}
.auto-row .before{position:relative;justify-self:end;transition:opacity 500ms var(--ease)}
.auto-row .before::after{content:'';position:absolute;left:9px;right:9px;top:50%;height:1.5px;background:var(--c-friction);transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ease)}
.auto-row .after{justify-self:start;opacity:0;transform:translateX(-16px);transition:opacity 200ms var(--ease),transform 420ms cubic-bezier(.34,1.56,.64,1)}
.auto-row.is-on .before{opacity:.45}.auto-row.is-on .before::after{transform:scaleX(1)}.auto-row.is-on .after{opacity:1;transform:none}
.au-lane{position:relative;height:100%;min-height:0}
.au-approve{position:absolute;left:calc(55% + 10px);top:calc(50% - 30px);white-space:nowrap;opacity:0;transition:opacity 200ms var(--ease),color 200ms var(--ease)}
.au-approve.is-on{opacity:1;color:#dcf5bd}
.au-flow,.au-spark-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* footer: sparkline + counters */
.au-meter{display:grid;grid-template-columns:minmax(0,1fr) 150px 112px;gap:18px;align-items:end;margin-top:8px;padding-top:12px;border-top:1px solid #262b33}
.au-spark{position:relative;height:70px;min-width:0}
.au-spark-lbl{position:absolute;left:0;top:0;z-index:1;text-transform:uppercase;line-height:1}
.au-spark-lbl b{margin-left:6px;font-size:11px;font-weight:600;letter-spacing:0;color:#dcf5bd;font-variant-numeric:tabular-nums}
.au-counts{display:contents}
.au-count{display:flex;flex-direction:column-reverse;gap:5px}
.au-count b{font-size:26px;font-weight:600;line-height:1;letter-spacing:-.02em;color:#e7eaef;font-variant-numeric:tabular-nums;transition:color 200ms var(--ease)}
.au-count-saved b{color:var(--c-machine)}.au-count-wait b{color:var(--c-friction)}.stage-clear .au-count-wait b{color:#9aa3b1}
.au-k{font-size:10.5px;color:#8b95a4}
.au-k-short,.au-unit{display:none}
@media(max-width:850px){
  .scene-automate{padding:30px 14px 10px}
  .auto-head{grid-template-columns:92px 1fr 92px;grid-template-rows:auto auto;row-gap:4px;font-size:9px;letter-spacing:1px;margin-bottom:4px}
  .au-clocks{grid-column:1/-1;grid-row:1;justify-self:stretch;justify-content:space-between;padding:0;gap:10px}
  .au-col-before{grid-row:2;grid-column:1}.au-col-after{grid-row:2;grid-column:3}
  .au-clock{font-size:9.5px;gap:5px}.au-clock b{font-size:9.5px}.au-check{width:9px;height:9px}
  .auto-row{grid-template-columns:92px 1fr 92px}
  .auto-row .chip{font-size:10px;padding:4px 6px;gap:5px;border-radius:8px}.auto-row .chip .ic{width:12px;height:12px}
  .au-approve{display:none}
  .au-meter{grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-top:4px;padding-top:8px}
  .au-spark{height:44px}
  .au-spark-lbl{font-size:9px}.au-spark-lbl b{font-size:9.5px;margin-left:4px}
  .au-counts{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .au-count{flex-direction:row;align-items:baseline;gap:5px}
  .au-count b{font-size:12px}.au-k{font-size:9.5px}
  .au-k-long{display:none}.au-k-short{display:inline}.au-unit{display:inline;font-size:9.5px;font-weight:600;margin-left:1px}
}
/* Reduced motion: every state is class/p-based, so only the transitions go (the global rule does this too). */
@media(prefers-reduced-motion:reduce){.auto-row .before,.auto-row .before::after,.auto-row .after,.au-check,.au-check path,.au-approve{transition:none}}

/* ==== Scene: devices ==== */
/* 07 Devices (dv-): one frame morphs through phone -> browser -> monitor -> tablet -> phone with Request #2291
   laid out inside each; a hand-off beam runs along the people rail. Stage classes accumulate on .scene-devices,
   so stage rules are written mobile -> web -> desktop -> tablet -> done and the latest wins. */
.scene-devices{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350;--fw:150px;--fh:290px;--fr:26px;--bx:17px;--up:0}
.scene-devices .token-states{display:none}
.dv-mono{font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:var(--c-idle)}
.dv-head,.dv-stats{margin:0;position:absolute;left:18px;z-index:2;white-space:nowrap}
.dv-head{top:32px}.dv-stats{right:18px;bottom:14px;text-align:center}
.dv-head b,.dv-stats b{color:#dcf5bd;font-weight:600;font-variant-numeric:tabular-nums}
.dv-dev{position:absolute;right:18px;top:32px;z-index:2;display:grid;letter-spacing:1.2px;color:#9fb86a}
.dv-dev i{grid-area:1/1;justify-self:end;font-style:normal;opacity:0;transform:translateY(4px);transition:opacity 200ms,transform 500ms var(--ease)}
.dv-dev i.is-current{opacity:1;transform:none}
.scene-devices .typing::after{content:'';display:inline-block;width:1px;height:.9em;margin-left:1px;vertical-align:-.1em;background:currentColor;animation:dvCaret 1s steps(1) infinite}
@keyframes dvCaret{50%{opacity:0}}

/* The frame: one node, absolutely centred, morphing width/height/radius (granted exception) and flipping edge-on. */
.dv-stage{position:absolute;left:50%;top:46%;width:0;height:0;perspective:1000px;z-index:1}
.dv-frame{position:absolute;left:0;top:0;box-sizing:border-box;width:min(var(--fw),86cqw);height:var(--fh);transform:translate(-50%,-50%);border:1.5px solid #3a414c;border-radius:var(--fr);background:#15191f;overflow:hidden;container:dv-frame/inline-size;transition:width 600ms var(--ease),height 600ms var(--ease),border-radius 600ms var(--ease),border-color 200ms}
.dv-frame.hit{border-color:var(--c-machine)}
.dv-frame.dv-flip{animation:dvFlip 600ms var(--ease);will-change:transform}
@keyframes dvFlip{0%{transform:translate(-50%,-50%) rotateY(0)}50%{transform:translate(-50%,-50%) rotateY(90deg)}100%{transform:translate(-50%,-50%) rotateY(0)}}
.dv-frame::before{content:'';position:absolute;left:50%;top:8px;width:46px;height:11px;margin-left:-23px;border-radius:6px;background:#0b0d10;transition:opacity 150ms}
.dv-stage::after{content:'';position:absolute;left:0;top:calc(var(--fh) / 2);width:96px;height:20px;margin-left:-48px;background:linear-gradient(#3a414c,#3a414c) 50% 0/2px 15px no-repeat,linear-gradient(#3a414c,#3a414c) 50% 100%/100% 2px no-repeat;opacity:0;transition:opacity 150ms}
.dv-tabbar{position:absolute;left:0;right:0;top:0;height:24px;display:flex;align-items:center;gap:5px;padding:0 10px;background:#0f1114;border-bottom:1px solid #22272e;opacity:0;transition:opacity 150ms}
.dv-tabbar i{width:7px;height:7px;border-radius:50%;background:#2d343e;flex:none}
.dv-url{flex:1;min-width:0;margin-left:6px;height:15px;line-height:15px;padding:0 7px;border-radius:4px;background:#161a1f;color:#9aa3b1;white-space:nowrap;overflow:hidden}
.dv-home{position:absolute;left:50%;bottom:6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;border:1px solid #3a414c;opacity:0;transition:opacity 150ms}
.dv-screen{position:absolute;inset:0;opacity:0;transition:opacity 160ms var(--ease) 220ms}

/* Screen 1 + 5: phone. */
.dv-form{position:absolute;inset:0;padding:30px 12px 12px;display:grid;gap:8px;align-content:start;transition:opacity 500ms var(--ease)}
.dv-form h4{margin:0 0 2px;font-size:11px;font-weight:600;color:#e7eaef}
.dv-photo{width:36px;height:36px;border-radius:8px;border:1px solid #86a35a;background:#b7f34a1f;display:grid;place-items:center;color:#c9f28a;opacity:0;transform:scale(.8);transition:opacity 200ms,transform 500ms var(--ease)}
.dv-photo.is-on{opacity:1;transform:none}
.dv-photo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dv-line{margin:0;font-size:10.5px;line-height:1.45;color:#c9d0da;min-height:1.45em;text-wrap:pretty}
.dv-upload{height:3px;border-radius:2px;background:#262b33;overflow:hidden}
.dv-upload i{display:block;height:100%;background:var(--c-machine);transform-origin:left;transform:scaleX(var(--up))}
.dv-stamp{position:absolute;right:12px;bottom:14px;padding:4px 8px;border:1.5px solid var(--c-human);border-radius:6px;color:var(--c-human);font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:0;transform:rotate(-6deg) scale(1.3);transition:opacity 200ms,transform 420ms cubic-bezier(.34,1.56,.64,1)}
.dv-stamp.is-on{opacity:1;transform:none}
.dv-banner{position:absolute;left:8px;right:8px;top:8px;display:flex;align-items:center;gap:7px;padding:8px 9px;border-radius:10px;border:1px solid #86a35a;background:#1b2317;color:#dcf5bd;font-size:10px;font-weight:600;line-height:1.3;opacity:0;transform:translateY(-130%);transition:transform 500ms var(--ease),opacity 200ms}
.dv-banner .ic{width:14px;height:14px;color:#c9f28a}
.dv-banner.is-on{opacity:1;transform:none}
.dv-ping{position:absolute;left:0;top:calc(var(--fh) / -2 + 24px);width:80px;height:80px;margin:-40px;border-radius:50%;border:1px solid var(--c-machine);opacity:0;transform:scale(.25)}
.dv-ping.is-on{animation:dvPing 400ms var(--ease) both}
@keyframes dvPing{0%{opacity:.5;transform:scale(.25)}100%{opacity:0;transform:scale(1)}}

/* Screen 2: browser inbox. */
.dv-s-web{padding-top:24px;display:grid;grid-template-columns:1fr 150px}
.dv-inbox{display:grid;align-content:start;min-width:0}
.dv-row{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-bottom:1px solid #22272e;font-size:10.5px;color:#8b95a4;white-space:nowrap}
.dv-row b{color:#c9d0da;font-weight:600;flex:none}
.dv-row-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dv-row-hot{border-left:2px solid var(--c-machine);color:#e7eaef;opacity:0;transform:translateX(-10px);transition:opacity 200ms,transform 500ms var(--ease)}
.dv-row-hot.is-on{opacity:1;transform:none}
.dv-pill{flex:none;margin-left:auto;display:grid;padding:2px 6px;border-radius:999px;border:1px solid #39404a;font-size:9px;line-height:1.3;color:#9aa3b1;transition:border-color 200ms,background 200ms,color 200ms}
.dv-pill i{grid-area:1/1;font-style:normal;opacity:0;transition:opacity 200ms}.dv-pill i.is-current{opacity:1}
.dv-pill:has(i:nth-child(2).is-current){border-color:#86a35a;background:#1b2317;color:#dcf5bd}
.dv-side{border-left:1px solid #22272e;padding:10px;display:grid;align-content:start;gap:8px;min-width:0}
.dv-side h4{margin:0;font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:#6f7988}
.dv-hist{margin:0;font-size:10px;line-height:1.5;color:#c9d0da;min-height:30px;text-wrap:pretty}
.dv-tap{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:26px;padding:0 10px;border:1px solid #39404a;border-radius:7px;background:#161a1f;color:#c9d0da;font-size:10.5px;font-weight:600;white-space:nowrap;transition:background 200ms,color 200ms,border-color 200ms}
.dv-tap::after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--c-machine);opacity:0}
.dv-tap.is-on::after{animation:dvRing 600ms var(--ease) both}
@keyframes dvRing{0%{opacity:.5;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}
.dv-assign.is-on{border-color:#86a35a;background:#1b2317;color:#dcf5bd}

/* Screen 3: workstation split view. */
.dv-s-desktop{padding:12px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px}
.dv-ticket{border:1px solid #2c323b;border-radius:8px;padding:10px;background:#0f1114;display:grid;gap:6px;align-content:start;font-size:10.5px;line-height:1.4;color:#c9d0da}
.dv-ticket b{font-size:11px;color:#e7eaef}.dv-ticket small{font-size:9.5px;color:#6f7988}
.dv-tag{justify-self:start;font-style:normal;padding:2px 7px;border-radius:999px;border:1px solid #86a35a;background:#1b2317;color:#dcf5bd;font-size:9px}
.dv-rcol{display:grid;grid-template-rows:auto 1fr;gap:8px;min-width:0}
.dv-log{display:grid;gap:6px;align-content:start;padding:9px 10px;border:1px solid #2c323b;border-radius:6px;background:#0f1114;white-space:nowrap;overflow:hidden}
.dv-log span{opacity:0;transform:translateX(-6px);transition:opacity 200ms,transform 500ms var(--ease),color 200ms}
.dv-log span.is-on{opacity:1;transform:none;color:#dcf5bd}
.dv-log .dv-warn.is-on{color:var(--c-friction)}
.dv-code{display:grid;gap:6px;align-content:start;padding:10px;border:1px solid #2c323b;border-radius:6px;background:#0f1114}
.dv-code i{display:block;height:4px;border-radius:2px;background:#2d343e;transition:background 200ms}
.dv-code i:nth-child(1){width:62%}.dv-code i:nth-child(2){width:40%}.dv-code i:nth-child(3){width:78%}.dv-code i:nth-child(4){width:52%}.dv-code i:nth-child(5){width:30%}
.dv-code i.is-on{background:var(--c-machine)}

/* Screen 4: tablet approval. */
.dv-s-tablet{display:grid;place-items:center;padding:16px 16px 22px}
.dv-card{width:100%;max-width:236px;box-sizing:border-box;border:1px solid #2c323b;border-radius:10px;padding:14px;background:#0f1114;display:grid;gap:12px}
.dv-card p{margin:0;font-size:11px;line-height:1.5;color:#c9d0da}.dv-card p b{color:#e7eaef}
.dv-approve{height:34px;font-size:12px}
.dv-approve .ic{width:14px;height:14px;opacity:0;transform:scale(.4);transition:opacity 200ms,transform 420ms cubic-bezier(.34,1.56,.64,1)}
.dv-approve.is-on{background:var(--c-machine);border-color:var(--c-machine);color:#0b0d10}
.dv-approve.is-on .ic{opacity:1;transform:none}

/* Stage cascade: sizes, chrome and which screen is lit. Order matters (classes accumulate). */
.scene-devices.stage-mobile .dv-s-mobile{opacity:1}
.scene-devices.stage-web{--fw:420px;--fh:270px;--fr:10px}
.scene-devices.stage-web .dv-frame::before{opacity:0}
.scene-devices.stage-web .dv-s-mobile{opacity:0}
.scene-devices.stage-web .dv-s-web{opacity:1}
.scene-devices.stage-web .dv-tabbar{opacity:1;transition-delay:380ms}
.scene-devices.stage-desktop{--fw:460px;--fh:290px;--fr:8px}
.scene-devices.stage-desktop .dv-s-web{opacity:0}
.scene-devices.stage-desktop .dv-tabbar{opacity:0;transition-delay:0ms}
.scene-devices.stage-desktop .dv-s-desktop{opacity:1}
.scene-devices.stage-desktop .dv-stage::after{opacity:1;transition-delay:420ms}
.scene-devices.stage-tablet{--fw:300px;--fh:230px;--fr:18px}
.scene-devices.stage-tablet .dv-s-desktop{opacity:0}
.scene-devices.stage-tablet .dv-stage::after{opacity:0;transition-delay:0ms}
.scene-devices.stage-tablet .dv-s-tablet{opacity:1}
.scene-devices.stage-tablet .dv-home{opacity:1;transition-delay:380ms}
.scene-devices.stage-done{--fw:150px;--fh:290px;--fr:26px}
.scene-devices.stage-done .dv-s-tablet{opacity:0}
.scene-devices.stage-done .dv-home{opacity:0;transition-delay:0ms}
.scene-devices.stage-done .dv-frame::before{opacity:1}
.scene-devices.stage-done .dv-s-mobile{opacity:1}
.scene-devices.stage-done .dv-form{opacity:.4}

/* People rail: lime fill is scroll-synced, the beam is p-driven by JS, avatars lift when the beam lands. */
.dv-rail{position:absolute;left:30px;right:30px;bottom:18%;height:0;z-index:2}
.dv-track{position:absolute;left:0;right:0;top:0;height:1px;background:#2d343e}
.dv-track::after{content:'';position:absolute;inset:0;background:var(--c-machine);transform-origin:left;transform:scaleX(var(--p))}
.dv-beam{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--c-machine);transform:translateX(var(--bx));z-index:1}
.dv-beam i{position:absolute;inset:0;border-radius:inherit;background:var(--c-machine);opacity:0;transition:transform 200ms var(--ease),opacity 200ms}
.dv-beam.is-moving i:nth-child(1){opacity:.6;transform:translateX(-6px)}
.dv-beam.is-moving i:nth-child(2){opacity:.4;transform:translateX(-12px)}
.dv-beam.is-moving i:nth-child(3){opacity:.25;transform:translateX(-18px)}
.dv-beam.is-moving i:nth-child(4){opacity:.12;transform:translateX(-24px)}
.dv-avs{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between}
.dv-av{position:relative;width:34px;height:34px;margin-top:-17px;border-radius:50%;border:1px solid #3a414c;background:#0f1114;display:grid;place-items:center;color:#8b95a4;z-index:2;transition:transform 500ms var(--ease),border-color 200ms,color 200ms,box-shadow 200ms}
.dv-av .ic{width:16px;height:16px}
.dv-av span{position:absolute;top:100%;left:50%;margin-top:7px;transform:translateX(-50%);font-size:10.5px;line-height:1;white-space:nowrap;color:#6f7988;transition:color 200ms}
.dv-av.is-past{border-color:#86a35a;color:#9fb86a}
.dv-av.is-here{transform:translateY(-6px);border-color:var(--c-machine);color:#dcf5bd;box-shadow:0 0 0 3px #b7f34a26}
.dv-av.is-here span{color:#dcf5bd}

/* Narrow frames (every mobile size and the narrowest desktop viewports): single-column screens, fewer rows/lines. */
@container dv-frame (max-width:380px){
  .dv-tabbar{height:20px;padding:0 8px}.dv-tabbar i{width:5px;height:5px}.dv-url{font-size:9px;height:13px;line-height:13px}
  .dv-s-web{padding-top:20px;grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .dv-row{height:24px;font-size:9.5px;padding:0 8px}.dv-row:nth-child(n+3){display:none}
  .dv-side{border-left:0;padding:7px 8px;gap:6px}.dv-side h4{display:none}.dv-hist{font-size:9px;min-height:0}.dv-tap{height:22px;font-size:9.5px;padding:0 8px;justify-self:start}
  .dv-s-desktop{grid-template-columns:1fr;padding:9px;gap:7px}.dv-ticket{display:none}
  .dv-log{padding:7px 8px;gap:5px;font-size:9px;letter-spacing:.2px}.dv-log span:nth-child(-n+2){display:none}.dv-code{padding:8px;gap:5px}
  .dv-s-tablet{padding:10px 10px 16px}.dv-card{padding:10px;gap:8px}.dv-card p{font-size:10px}.dv-approve{height:28px;font-size:11px}
  .dv-form{padding:22px 9px 9px;gap:6px}.dv-form h4{font-size:9.5px}.dv-photo{width:28px;height:28px}.dv-line{font-size:9.5px}.dv-stamp{font-size:8px;padding:3px 6px;right:8px;bottom:9px}
  .dv-banner{left:5px;right:5px;top:5px;padding:6px 7px;font-size:9px}.dv-banner .ic{width:12px;height:12px}
}
@media(max-width:850px){
  .scene-devices{--fw:108px;--fh:196px;--fr:20px}
  .scene-devices.stage-web{--fw:240px;--fh:160px;--fr:8px}
  .scene-devices.stage-desktop{--fw:250px;--fh:170px;--fr:6px}
  .scene-devices.stage-tablet{--fw:190px;--fh:150px;--fr:12px}
  .scene-devices.stage-done{--fw:108px;--fh:196px;--fr:20px}
  .dv-stage{top:47%}.dv-frame{width:min(var(--fw),70cqw)}
  .dv-head,.dv-dev,.dv-stats{font-size:9.5px}.dv-head,.dv-dev{top:30px}.dv-head,.dv-stats{left:14px}.dv-dev,.dv-stats{right:14px}.dv-stats{bottom:10px}
  .dv-frame::before{width:34px;height:9px;margin-left:-17px;top:6px}
  .dv-stage::after{width:60px;height:14px;margin-left:-30px;background-size:2px 10px,100% 2px}
  .dv-ping{top:calc(var(--fh) / -2 + 18px)}
  .dv-rail{left:22px;right:22px}.dv-av{width:28px;height:28px;margin-top:-14px}.dv-av .ic{width:13px;height:13px}
  .dv-av span{display:none;font-size:9.5px;margin-top:6px}.dv-av.is-here span{display:block}
}
@media(prefers-reduced-motion:reduce){
  .dv-frame.dv-flip{animation:none}.dv-beam i,.dv-tap::after,.dv-ping{display:none}
}

/* ==== Scene: support ==== */
/* 08 Support (su-): one ticket, the whole lifecycle, told in the business metric.
   Stages (anchors in the scene): open .04 / logs .36 / fix .55 / deploy .73 / watch .9 */
.scene-support{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350;padding:30px 20px 14px;display:grid;grid-template-rows:auto 1fr;gap:12px;font-size:12px}
.scene-support .su-anchor{display:none}
.su-mono,.su-risk,.su-log,.su-qa-n,.su-mk,.su-axis,.su-cust,.su-armed,.su-team b,.su-idle,.su-watch span{font:500 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px}

/* Ticket: orange while the issue is live (breathing inset glow), calm again once deployed */
.scene-support .ticket{position:relative;padding:12px 14px;border:1px solid #3a414c;border-radius:12px;background:#15191f;overflow:hidden;transition:border-color 200ms var(--ease)}
.scene-support .ticket::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 28px #e07a5f40;opacity:0;pointer-events:none}
.scene-support.stage-open .ticket{border-color:#8a4a3c}
.scene-support.stage-open .ticket::after{animation:su-breathe 2s ease-in-out infinite}
.scene-support.stage-deploy .ticket{border-color:#3a414c}
.scene-support.stage-deploy .ticket::after{animation:none}
@keyframes su-breathe{0%,100%{opacity:.2}50%{opacity:1}}
.su-scan{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent 55%,#b7f34a14 calc(100% - 2px),var(--lime) calc(100% - 2px))}
.su-scan.is-on{animation:su-scan 600ms var(--ease) forwards}
@keyframes su-scan{0%{transform:translateX(-100%);opacity:1}72%{transform:none;opacity:1}100%{transform:none;opacity:0}}
.scene-support .ticket-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#8b95a4}
.scene-support .ticket-id{font-weight:600;color:#c9d0da;font-variant-numeric:tabular-nums}
.scene-support .ticket-status{display:grid}
.scene-support .ticket-status i{grid-area:1/1;font-style:normal;padding:3px 9px;border-radius:999px;border:1px solid #5a6474;color:#c9d0da;font-size:10.5px;font-weight:600;opacity:0;transition:opacity 200ms}
.scene-support .ticket-status i.is-current{opacity:1}.scene-support .ticket-status i.hot{border-color:#e07a5f;color:#f1b7a7}.scene-support .ticket-status i.ok{border-color:#86a35a;color:#dcf5bd;background:#1b2317}
.scene-support .ticket p{margin:8px 0 7px;font-size:14px;color:#eef0f4;font-weight:500}
.scene-support .ticket-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:10.5px;color:#8b95a4}
.su-tags{display:inline-flex;gap:4px}
.su-tag{font-style:normal;padding:2px 6px;border-radius:6px;border:1px solid #86a35a;background:#1b2317;color:#dcf5bd;font-size:9.5px;font-weight:600;line-height:1.3;opacity:0;transform:scale(.8);transition:opacity 200ms var(--ease),transform 420ms cubic-bezier(.34,1.56,.64,1)}
.su-tag.is-on{opacity:1;transform:none}
.su-tag-2{transition-delay:80ms}
.su-tag-p1{border-color:#e07a5f;background:#2a1a15;color:#f1b7a7}
.su-team{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 5px;border-radius:999px;border:1px solid #39404a;background:#161a1f;opacity:0;transform:translateY(-6px);transition:opacity 500ms var(--ease),transform 500ms var(--ease),border-color 200ms}
.su-team i{width:9px;height:9px;border-radius:50%;background:#5a6474;border:1px solid #161a1f;margin-right:-6px;transition:background 200ms}
.su-team i:nth-of-type(3){margin-right:0}
.su-team b{color:#9aa3b1;font-weight:500;transition:color 200ms}
.su-team.is-on{opacity:1;transform:none;border-color:#86a35a}
.su-team.is-on i{background:#86a35a}.su-team.is-on b{color:#dcf5bd}

/* Body: chart + risk + diagnostics panel on the left, timeline on the right */
.su-body{display:grid;grid-template-columns:58fr 42fr;gap:14px;min-height:0}
.su-left{display:grid;grid-template-rows:minmax(150px,46%) auto minmax(0,1fr);gap:8px;min-height:0}
.su-chart{position:relative;border:1px solid #262b33;border-radius:12px;background:#0c0e11}
.su-axis{position:absolute;left:10px;top:7px;color:var(--c-idle)}
.su-mk{position:absolute;top:21px;color:#f1b7a7;white-space:nowrap;opacity:0;transition:opacity 200ms}
.su-mk.is-on{opacity:1}
.su-mk-inc{left:calc(10px + (100% - 20px) * .04 + 7px)}
.su-mk-dep{left:calc(10px + (100% - 20px) * .73 - 7px);transform:translateX(-100%);color:#dcf5bd}
.su-cust{position:absolute;right:10px;top:7px;display:inline-flex;align-items:center;gap:5px;color:#9aa3b1;opacity:0;transition:opacity 200ms}
.su-cust i{width:7px;height:7px;border-radius:50%;background:var(--c-human)}
.su-cust.is-on{opacity:1}
.su-armed{position:absolute;right:10px;top:calc(36px + (100% - 46px) * .167 - 9px);display:inline-flex;align-items:center;gap:5px;padding:2px 7px 2px 5px;border-radius:999px;border:1px solid #86a35a;background:#1b2317;color:#dcf5bd;white-space:nowrap;opacity:0;transform:scale(.8);transition:opacity 200ms var(--ease),transform 420ms cubic-bezier(.34,1.56,.64,1)}
.su-armed .ic{width:11px;height:11px;color:#c9f28a}
.su-armed.is-on{opacity:1;transform:none}
.su-risk{margin:0;display:flex;align-items:baseline;gap:6px;padding:0 4px 0 12px;color:#f1b7a7;transition:color 200ms}
.su-risk em{font-style:normal;color:#9aa3b1;display:none}
.su-risk em.is-on{display:inline}
.su-risk b{margin-left:auto;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-friction);transition:color 200ms}
.su-risk:has(em.is-on),.su-risk:has(em.is-on) b{color:#9aa3b1}

/* Panel: logs -> QA -> monitoring, one state per stage */
.su-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:0;border:1px solid #262b33;border-radius:12px;background:#0c0e11;overflow:hidden}
.su-idle{position:absolute;left:12px;top:10px;color:var(--c-draft);transition:opacity 200ms}
.scene-support.stage-logs .su-idle{opacity:0}
.su-panel>.su-log,.su-panel>.su-qa,.su-panel>.su-watch{grid-area:1/1;min-height:0;min-width:0;opacity:0;transform:translateY(8px);transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.scene-support.stage-logs .su-log{opacity:1;transform:none}
.scene-support.stage-fix .su-log{opacity:0;transform:translateY(-8px)}
.scene-support.stage-fix .su-qa{opacity:1;transform:none}
.scene-support.stage-watch .su-qa{opacity:0;transform:translateY(-8px)}
.scene-support.stage-watch .su-watch{opacity:1;transform:none}
.su-log{display:grid;grid-template-rows:auto minmax(0,1fr);padding:8px 12px 6px}
.su-log-head{display:flex;justify-content:space-between;color:var(--c-idle);padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid #1d222a}
.su-log-win{position:relative;overflow:hidden}
.su-log-in{position:absolute;left:0;right:0;top:0;list-style:none;margin:0;padding:0;transition:transform 500ms var(--ease);will-change:transform}
.su-log-in li{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#9aa3b1;opacity:0;transition:opacity 200ms,color 200ms}
.su-log-in li.is-on{opacity:.55}.su-log-in li.is-current{opacity:1;color:#c9d0da}
.su-log-in li.su-cause.is-on{opacity:1;color:#dcf5bd}
.su-log-in li .ic{display:inline-block;vertical-align:-2px;width:12px;height:12px;margin-right:6px;color:#c9f28a}
.su-qa{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:10px 12px 8px}
.su-pipe{display:flex;align-items:center;gap:6px}
.su-pchip{padding:3px 9px;border-radius:7px;border:1px solid var(--c-draft);color:var(--c-idle);font-size:10.5px;font-weight:600;line-height:1.3;white-space:nowrap;transition:border-color 200ms,color 200ms,background 200ms}
.su-pchip.is-on{border-color:#86a35a;background:#1b2317;color:#dcf5bd}
.su-con{flex:1 1 0;width:0;min-width:12px;height:2px;overflow:visible}
.su-con path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.su-con-base{stroke:var(--c-draft)}
.su-draw{stroke:var(--c-machine);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 700ms var(--ease)}
.su-draw.is-on{stroke-dashoffset:0}
.su-cells{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;min-height:0}
.su-cells i{position:relative;min-height:8px;border-radius:3px;background:#1a1f26;border:1px solid #262b33}
.su-cells i::after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:var(--c-machine);opacity:clamp(0,calc((var(--p) - .58) * 800 - var(--k)),1)}
.su-qa-n{margin:0;display:flex;gap:10px;color:var(--c-idle)}
.su-qa-n b{font-weight:600;color:#dcf5bd;font-variant-numeric:tabular-nums}
.su-qa-n>span{margin-left:auto}
.su-watch{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:center;gap:10px 14px;padding:12px 14px 10px}
.su-mon{grid-column:1/-1;list-style:none;margin:0;padding:8px 0 0;border-top:1px solid #1d222a;display:grid;gap:5px;align-content:start;font:500 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:#9aa3b1}
.su-mon li{display:flex;align-items:center;gap:8px}
.su-mon i{width:6px;height:6px;border-radius:50%;background:var(--c-machine)}
.su-mon em{margin-left:auto;font-style:normal;color:#dcf5bd}
.su-eye{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid #86a35a;background:#1b2317;color:#c9f28a}
.su-eye .ic{width:22px;height:22px}
.su-eye::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--c-machine);opacity:0}
.scene-support.stage-watch .su-eye::after{animation:su-ping 3s var(--ease) infinite}
@keyframes su-ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}
.su-watch b{display:block;font-size:12.5px;font-weight:600;color:#e4e8ee}
.su-watch span{display:block;color:#9aa3b1;margin-top:3px}

/* Timeline: unchanged logic, compressed to the right column */
.scene-support .tl{position:relative;list-style:none;margin:0;padding:2px 0 2px 20px;display:grid;align-content:space-between;min-height:0}
.scene-support .tl::before,.scene-support .tl::after{content:'';position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:#2d343e}
.scene-support .tl::after{background:var(--lime);transform-origin:top;transform:scaleY(var(--p))}
.scene-support .tl li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:baseline;font-size:11.5px;line-height:1.25;color:#8b95a4;opacity:.35;transition:opacity 300ms}
.scene-support .tl li::before{content:'';position:absolute;left:-20px;top:3px;width:9px;height:9px;border-radius:50%;background:#0f1114;border:1px solid #5a6474;transition:background 200ms,border-color 200ms}
.scene-support .tl li b{color:#e4e8ee;font-weight:600;transition:color 200ms}
.scene-support .tl li span{grid-column:1;font-size:10px;color:#8b95a4;margin-top:1px}
.scene-support .tl li time{grid-column:2;grid-row:1;font-variant-numeric:tabular-nums;font-size:10.5px;color:#6f7988}
.scene-support .tl li.is-on{opacity:1}.scene-support .tl li.is-on::before{background:var(--lime);border-color:var(--lime)}
.scene-support .tl li.is-current b{color:var(--lime)}

@media(max-width:850px){
  .scene-support{padding:30px 14px 10px;gap:8px}
  .scene-support .ticket{padding:8px 11px}.scene-support .ticket p{font-size:12.5px;margin:4px 0 4px}.scene-support .ticket-meta{gap:4px 10px}.su-hide-s{display:none}
  .su-team{padding:2px 7px 2px 5px}.su-team i{width:8px;height:8px;margin-right:-5px}
  .su-body{gap:10px}.su-left{grid-template-rows:110px auto minmax(72px,1fr);gap:6px}
  .su-mono,.su-risk,.su-log,.su-qa-n,.su-mk,.su-axis,.su-cust,.su-armed,.su-team b,.su-idle,.su-watch span{font-size:9px}
  .su-risk{font-size:9.5px}.su-risk b{font-size:11px}
  .su-axis,.su-cust{top:5px}.su-mk{top:16px}.su-armed{top:calc(28px + (100% - 38px) * .167 - 8px);padding:1px 6px 1px 4px}
  .su-log{padding:6px 9px 4px}.su-log-head{padding-bottom:3px;margin-bottom:2px}.su-log-in li{height:12px;line-height:12px;font-size:9.5px}.su-log-in li .ic{width:9px;height:9px;margin-right:4px;vertical-align:-1px}
  .su-qa{padding:7px 9px 5px;gap:5px}.su-pchip{padding:2px 6px;font-size:9.5px}
  .su-cells{grid-template-columns:repeat(24,1fr);gap:2px}.su-cells i{min-height:4px;border-radius:1px;border-width:0}
  .su-watch{padding:8px 10px;gap:6px 10px}.su-eye{width:32px;height:32px}.su-eye .ic{width:16px;height:16px}.su-watch b{font-size:11px}.su-mon{font-size:9px;gap:3px;padding-top:5px}
  .scene-support .tl li{font-size:10.5px}.scene-support .tl li span{display:none}
}
@media(max-width:552px){
  .su-body{grid-template-columns:minmax(0,1fr) 22px}
  .scene-support .tl{padding-left:12px}.scene-support .tl li{min-height:9px}.scene-support .tl li::before{left:-12px;top:0}
  .scene-support .tl li b,.scene-support .tl li span,.scene-support .tl li time{display:none}
  .su-mon{display:none}
}
@media(prefers-reduced-motion:reduce){
  /* Everything is class/p-driven; only the ambience is removed. */
  .su-scan,.su-eye::after{display:none}
  .scene-support .ticket::after{opacity:0}
}

/* ==== Scene: ai ==== */
/* 09 AI + people — three lanes, one audit thread. Prefix: ai-
   Story: a question types in; the AI scans only the data it may read (a locked payroll block
   stays dark); its proposals are dashed cards that stop at a HUMAN REVIEW gate; the engineer
   strikes one phrase and retypes it, only then the gate splits, the cards turn solid and the fix
   passes to deploy; a failure bar drains to zero. The lime thread behind is the audit trail. */
.scene-ai{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350;--pop:cubic-bezier(.34,1.56,.64,1);--mono:ui-monospace,SFMono-Regular,Menlo,monospace;padding:30px 20px 14px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px}
.scene-ai>i[data-at]{display:none}
.scene-ai .lanes{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#8b95a4;text-align:center;padding-bottom:7px;border-bottom:1px solid #262b33}
.scene-ai .lanes span:first-child{color:#9fb86a}
/* The conversation lives in a clipped view; when it is taller than the box it scrolls up with p, like a live chat. */
.ai-view{position:relative;min-height:0;overflow:hidden}
.ai-view.is-shifted{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 100%)}
.scene-ai .msgs{position:relative;min-height:100%;display:grid;align-content:space-between}
.scene-ai .msgs::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#1f242b}
/* Audit thread: a grey draft of the route, then the lime line whose head reaches each bubble exactly when it lights. */
.ai-thread{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.ai-thread-draft{fill:none;stroke:var(--c-draft);stroke-width:1;stroke-dasharray:2 5}
.ai-thread-line{fill:none;stroke:var(--c-machine);stroke-opacity:.5;stroke-width:1;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.ai-thread-head{fill:var(--c-machine);opacity:0;transition:opacity 200ms var(--ease)}
/* Bubbles arrive from their own lane and pulse once on landing (.hit via Story.hit or .ai-hit fallback). */
.scene-ai .msg{position:relative;--hit:#b7f34a80;width:44%;padding:6px 10px;border-radius:10px;font-size:11.5px;line-height:1.38;color:#d7dce4;opacity:0;transition:opacity 500ms var(--ease),transform 500ms var(--ease),border-color 200ms var(--ease)}
.scene-ai .m-ai{justify-self:start;background:#1b2317;border:1px solid #4e6132;border-radius:10px 10px 10px 3px;transform:translateX(-14px)}
.scene-ai .m-sys{justify-self:center;width:38%;padding:5px 10px;text-align:center;background:#161a1f;border:1px solid #39404a;font-family:var(--mono);font-size:10.5px;letter-spacing:.2px;color:#aab3bf;transform:translateY(-8px)}
.scene-ai .m-human{--hit:#f4f5f780;justify-self:end;background:#f4f5f7;color:#111214;border-radius:10px 10px 3px 10px;transform:translateX(14px)}
.scene-ai .msg.is-on{opacity:1;transform:none}
.scene-ai .msg.hit,.scene-ai .msg.ai-hit{animation:ai-land 500ms var(--ease)}
@keyframes ai-land{from{box-shadow:0 0 0 0 var(--hit)}to{box-shadow:0 0 0 10px #0000}}
.scene-ai .msg b{display:block;font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#8b95a4;margin-bottom:2px}
.scene-ai .m-human b{color:#5a6474}
.scene-ai .msg b.ai-num{display:inline;font-size:inherit;letter-spacing:0;text-transform:none;color:#dcf5bd;margin:0;font-variant-numeric:tabular-nums}
.ai-type{display:block;min-height:1.38em}
.ai-type.typing::after,.ai-ins.typing::after{content:'';display:inline-block;width:1px;height:1em;margin-left:1px;vertical-align:-.15em;background:currentColor;animation:ai-caret 1s steps(1) infinite}
@keyframes ai-caret{50%{opacity:0}}
/* The field: everything the AI is allowed to read, drawn on at .1, scanned .1->.2, folded into a 4-chip summary at .3. */
.ai-field{position:relative;justify-self:start;width:44%;padding:6px 9px 7px;border-radius:10px;background:#0f1114;opacity:0;transition:opacity 500ms var(--ease)}
.ai-field.is-on{opacity:1}
.ai-field-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ai-field-frame rect{fill:none;stroke-width:1}
.ai-field-frame .ai-draft{stroke:var(--c-draft);stroke-dasharray:3 4}
.ai-field-frame .ai-draw{stroke:var(--c-machine);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 700ms var(--ease),stroke 400ms var(--ease) 1000ms}
.ai-field.is-on .ai-draw{stroke-dashoffset:0;stroke:#4e6132}
.ai-field-in{display:grid;gap:4px;transition:transform 500ms var(--ease),opacity 500ms var(--ease)}
.stage-proposal .ai-field-in{transform:scale(.7);opacity:.35}
.ai-field-labels{display:flex;justify-content:space-between;gap:8px;font:500 10px/1 var(--mono);letter-spacing:.4px;color:var(--c-idle);white-space:nowrap}
.ai-field-labels .ai-nolock{color:var(--c-friction);opacity:.75}
.ai-tiles{position:relative;display:grid;grid-template-columns:repeat(var(--cols,12),1fr);grid-auto-rows:4px;gap:2px;overflow:hidden}
.ai-tiles i{position:relative;border-radius:1px;background:#1b2027}
.ai-tiles i::after{content:'';position:absolute;inset:0;border-radius:1px;background:var(--c-machine);opacity:clamp(0,calc(var(--sx,0) * var(--cols,12) - var(--col,0)),.8)}
.ai-tiles i.locked{background:#15181d}
.ai-tiles i.locked::after{content:none}
.ai-lockbox{position:relative;z-index:1;margin:-1px;border:1px dashed #e07a5fb3;border-radius:3px;display:grid;place-items:center;color:var(--c-friction)}
.ai-lockbox svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ai-scanbar{position:absolute;inset:0;z-index:2;transform:translateX(calc(var(--sx,0) * 100%));opacity:0;transition:opacity 200ms var(--ease)}
.ai-scanbar::before{content:'';position:absolute;left:-1px;top:-3px;bottom:-3px;width:3px;border-radius:2px;background:var(--c-machine);filter:blur(2px)}
.ai-field.is-on .ai-scanbar{opacity:1}
.ai-scanbar.over-locked{opacity:.3}
.stage-proposal .ai-scanbar{opacity:0}
.ai-sources{position:absolute;inset:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:5px;pointer-events:none}
.ai-sources span{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;border:1px solid #39404a;background:#161a1f;color:var(--c-idle);font:500 10px/1.2 var(--mono);letter-spacing:.4px;opacity:0;transform:scale(.8);transition:opacity 200ms var(--ease),transform 420ms var(--pop)}
.ai-sources span:nth-child(2){transition-delay:70ms}.ai-sources span:nth-child(3){transition-delay:140ms}.ai-sources span:nth-child(4){transition-delay:210ms}
.ai-sources.is-on span{opacity:1;transform:none}
.ai-sources .lit{border-color:#86a35a;background:#1b2317;color:#dcf5bd}
.ai-sources svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Proposals: dashed until a person has reviewed them. The slot line holds the tag, then the human's edit / verdict. */
.scene-ai .ai-proposal{border-style:dashed;border-color:#86a35a}
.scene-ai .ai-proposal::after{content:'';position:absolute;inset:-1px;border:1px solid var(--c-machine);border-radius:inherit;opacity:0;transition:opacity 300ms var(--ease);pointer-events:none}
.ai-slot{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:6px;margin-top:4px;min-height:12px;font:500 10px/1.2 var(--mono);letter-spacing:.4px;color:var(--c-idle)}
.ai-slot>span,.ai-slot>ins{grid-area:1/1;transition:opacity 200ms var(--ease)}
.ai-slot .ai-alt,.ai-slot .ai-ins{opacity:0}
.ai-ins{text-decoration:none;color:var(--c-human);font:500 11px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:0;white-space:nowrap;overflow:hidden}
.ai-ins::before{content:'→ ';color:#8a9876}
.ai-ok{grid-area:1/2;width:11px;height:11px;fill:none;stroke:var(--c-machine);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity 200ms var(--ease),transform 420ms var(--pop)}
.ai-edit{position:relative;display:inline-block;white-space:nowrap;text-decoration:none;transition:color 200ms var(--ease)}
.ai-edit::after{content:'';position:absolute;left:0;right:0;top:52%;height:1px;background:var(--c-human);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease)}
/* Gate: closes across the People lane at .3 (bars grow inward to the lock), splits outward at .74. */
.ai-gate{position:absolute;right:0;top:0;width:44%;height:14px;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:7px;transform:translateY(var(--gy,0px));opacity:0;transition:opacity 200ms var(--ease)}
.ai-gate.is-on{opacity:1}
.ai-gate>i{height:2px;border-radius:1px;background:var(--c-machine);transform:scaleX(0);transition:transform 500ms var(--ease)}
.ai-gate>i:first-child{transform-origin:left}.ai-gate>i:last-child{transform-origin:right}
.ai-gate.is-on>i{transform:scaleX(1)}
.ai-gate-lbl{display:inline-flex;align-items:center;gap:5px;font:600 9.5px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;color:#c9d0da;transition:color 200ms var(--ease)}
.ai-gate-ic{position:relative;width:11px;height:11px}
.ai-gate-ic svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity 200ms var(--ease),transform 420ms var(--pop)}
.ai-gate-check{opacity:0;transform:scale(.6);color:var(--c-machine)}
/* Pending item: white while a decision is open; waits at the proposal, then presses against the gate, then passes through lime. */
.ai-pending{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;z-index:3;transform:translate(var(--px,0px),var(--py1,0px));opacity:0;transition:transform 600ms var(--ease),opacity 300ms var(--ease)}
.ai-pending>i{position:absolute;inset:0;border-radius:50%;background:var(--c-human);transition:background 200ms var(--ease)}
.ai-pending::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--c-human);opacity:0;animation:ai-pulse 1.6s var(--ease) infinite}
@keyframes ai-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.2);opacity:0}}
@keyframes ai-bump{to{transform:translateY(2px)}}
.stage-proposal .ai-pending{opacity:1}
.stage-pending .ai-pending{transform:translate(var(--px2,0px),var(--py2,0px))}
.stage-pending .ai-pending>i{animation:ai-bump .6s var(--ease) infinite alternate}
/* .7 approved: the engineer's edit — strike, retype. */
.stage-approved .ai-tag-edit{opacity:0}
.stage-approved .ai-ins{opacity:1}
.stage-approved .ai-edit{color:#8a9876}
.stage-approved .ai-edit::after{transform:scaleX(1)}
/* .74 passed: the resolution — gate opens, dashed becomes solid, the item goes through. */
.stage-passed .ai-proposal::after{opacity:1}
.stage-passed .ai-tag{opacity:0}
.stage-passed .ai-alt{opacity:1}
.stage-passed .ai-ok{opacity:1;transform:none}
.stage-passed .ai-proposal[data-at=".6"] .ai-ok{transition-delay:80ms}
.stage-passed .ai-gate>i{transform:scaleX(0)}
.stage-passed .ai-gate-lock{opacity:0}
.stage-passed .ai-gate-check{opacity:1;transform:none}
.stage-passed .ai-gate-lbl{color:#dcf5bd}
.stage-passed .ai-pending{transform:translate(var(--px3,0px),var(--py3,0px))}
.stage-passed .ai-pending>i{background:var(--c-machine);animation:none}
.stage-passed .ai-pending::before{border-color:var(--c-machine)}
.stage-verified .ai-pending{opacity:0}
/* .9 verification: failures / 30 min drain 142 -> 0 (--vf and the count are set from p). */
.ai-slot.ai-verify{grid-template-columns:auto 60px auto;justify-content:start}
.ai-slot.ai-verify>*{grid-area:auto}
.ai-vbar{height:4px;border-radius:2px;background:#262b33;overflow:hidden}
.ai-vbar i{display:block;height:100%;border-radius:2px;background:var(--c-friction);transform:scaleX(var(--vf,1));transform-origin:left}
.scene-ai .msg b.ai-vcount{color:var(--c-friction);transition:color 200ms var(--ease)}
.scene-ai .msg b.ai-vcount.is-zero{color:#dcf5bd}

@media(min-width:851px) and (max-height:720px){
  .scene-ai .msg{font-size:11px;padding:5px 9px}.ai-tiles{grid-auto-rows:3px}.ai-slot{margin-top:3px}
}
@media(max-width:850px){
  .scene-ai{padding:26px 12px 10px;gap:6px}
  .scene-ai .lanes{font-size:9.5px;letter-spacing:1.1px;padding-bottom:5px}
  .scene-ai .msg{width:56%;font-size:10.5px;padding:5px 8px}
  .scene-ai .m-sys{width:50%;font-size:9.5px;padding:4px 8px}
  .scene-ai .msg b{font-size:9px}
  .ai-field{width:56%;padding:5px 7px 6px}
  .ai-field-labels{display:none}
  .ai-tiles{grid-auto-rows:3px}
  .ai-lockbox svg{width:7px;height:7px}
  .ai-sources{gap:4px}.ai-sources span{font-size:9px;padding:2px 5px}.ai-sources svg{display:none}
  .ai-slot{font-size:9px;min-height:11px}.ai-ins{font-size:10px}.ai-ok{width:10px;height:10px}
  .ai-slot.ai-verify{grid-template-columns:auto 40px auto;column-gap:5px}
  .ai-gate{width:40%;height:12px}
  .ai-gate-lbl>span:last-child{display:none}
  .ai-thread-line,.ai-thread-draft{stroke-width:.8}
  .ai-pending{width:6px;height:6px;margin:-3px 0 0 -3px}
}
@media(prefers-reduced-motion:reduce){
  .ai-pending::before{display:none}
  .ai-scanbar::before{filter:none}
}

/* ==== Scene: security ==== */
/* 10 Security: eight concentric gates are drafted then drawn around the data; packets fly in from
   every direction and each ring stops a different kind. Prefix se-. Rings are numbered from the
   outside in (01 Authentication outermost, 08 Alerts innermost). */
.scene-security{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350;padding:30px 0 0}
.se-mono{font:500 10px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.4px;color:var(--c-idle)}

/* stage: left 62%, rings inscribed, canvas (z2) between rings (z1) and core (z3) */
.se-stage{position:absolute;left:0;top:30px;bottom:0;width:62%;container-type:size}
.se-stage>.scene-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.se-rings{position:absolute;left:50%;top:50%;width:min(100%,420px);width:min(100cqw - 24px,100cqh - 72px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:1;overflow:visible}
.se-draft{fill:none;stroke:var(--c-draft);stroke-width:1;stroke-dasharray:1.2 1.8;opacity:.9;transition:opacity 500ms var(--ease)}
.se-ring{fill:none;stroke:var(--c-machine);stroke-width:1.2;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 700ms var(--ease),stroke 200ms,stroke-width 200ms}
.se-ring.is-on{stroke-dashoffset:0;stroke:#4e6132;transition:stroke-dashoffset 1100ms var(--ease),stroke 600ms linear 900ms,stroke-width 200ms}
.se-ring.is-on+.se-draft{opacity:0}
.se-ring.is-current{stroke:var(--c-machine);stroke-width:1.5;transition:stroke-dashoffset 1100ms var(--ease),stroke 200ms,stroke-width 200ms}
.stage-whole .se-ring.is-on{stroke:var(--c-machine);stroke-width:1.2;transition:stroke 500ms var(--ease),stroke-width 200ms}

.se-core{position:absolute;left:50%;top:50%;width:80px;height:80px;transform:translate(-50%,-50%);z-index:3;display:grid;place-content:center;justify-items:center;gap:4px;padding:6px;box-sizing:border-box;border-radius:50%;border:1px solid #e07a5f66;background:radial-gradient(circle at 50% 40%,#1b2317,#121519);color:#dcf5bd;font-size:9px;font-weight:600;line-height:1.15;text-align:center;transition:border-color 500ms var(--ease),box-shadow 500ms var(--ease)}
.se-core .ic{width:20px;height:20px;color:#9fb86a;transition:color 200ms}
.se-core span{max-width:62px}
.stage-gated .se-core{border-color:#4e6132}
.stage-whole .se-core{border-color:var(--c-machine);box-shadow:0 0 0 4px #b7f34a1a,0 0 36px #b7f34a2a}.stage-whole .se-core .ic{color:#c9f28a}

.se-ghost{position:absolute;left:calc(50% + var(--se-gx,68px));top:calc(50% + var(--se-gy,96px));transform:translateX(-50%);z-index:3;padding:2px 5px;border-radius:4px;background:#0f1114d9;white-space:nowrap;opacity:0;transition:opacity 500ms,color 200ms}
.se-ghost.is-on{opacity:1;color:#9fb86a}

.se-counters{position:absolute;top:6px;right:10px;z-index:5;display:grid;gap:3px;text-align:right;padding:5px 8px;border-radius:6px;background:#0f1114cc}
.se-ctr b{font-weight:600;color:#c9d0da;font-variant-numeric:tabular-nums}
.se-ctr-reached b{color:var(--c-friction)}.se-ctr-blocked b{color:var(--c-machine)}
.stage-gated .se-ctr-reached{opacity:.6}
.stage-alerts .se-ctr-alerts b{color:#dcf5bd}

.se-ledger{position:absolute;left:14px;right:14px;bottom:10px;height:26px;overflow:hidden;z-index:5;opacity:0;transition:opacity 500ms;--se-vis:2}
.se-ledger.is-on{opacity:1}
.se-ledger-lines{margin:0;padding:0;list-style:none;--se-n:0;transform:translateY(calc(min(0,var(--se-vis) - var(--se-n)) * 13px));transition:transform 500ms var(--ease)}
.se-ledger li{height:13px;line-height:13px;font-size:10px;color:#6f7a8b;white-space:pre;overflow:hidden;transition:color 200ms}
.se-ledger li.se-deny{color:#b5694f}
.se-ledger li:last-child{color:#dcf5bd}.se-ledger li.se-deny:last-child{color:var(--c-friction)}

/* legend: right 38%, one row per ring; .is-current mirrors onto the ring and its leader line */
.se-legend{position:absolute;left:62%;right:16px;top:72px;bottom:16px;margin:0;padding:0 0 0 10px;list-style:none;display:flex;flex-direction:column;justify-content:center;gap:7px;z-index:3}
.se-legend li{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #262b33;border-radius:10px;background:#12151a;color:var(--c-idle);font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;transform:translateX(8px);transition:color 200ms,border-color 200ms,background 200ms,transform 420ms cubic-bezier(.34,1.56,.64,1)}
.se-legend li.is-on{color:#c9d0da;border-color:#39404a;transform:none}
.se-legend li.is-current{border-color:#86a35a;background:#1b2317;color:#dcf5bd}
.se-legend .ic{width:14px;height:14px;color:var(--c-idle);transition:color 200ms}
.se-legend li.is-on .ic{color:#9fb86a}.se-legend li.is-current .ic{color:#c9f28a}
.se-n{font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.4px;color:var(--c-idle);min-width:16px;transition:color 200ms}
.se-legend li.is-current .se-n{color:#dcf5bd}
.stage-whole .se-legend li.is-on{border-color:#4e6132}

.se-leaders{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.se-leader path{fill:none;stroke:var(--c-machine);stroke-width:1;stroke-dasharray:100;stroke-dashoffset:100;opacity:0;transition:stroke-dashoffset 500ms var(--ease),opacity 200ms}
.se-leader circle{fill:var(--c-machine);transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform 200ms var(--ease)}
.se-leader.is-current path{stroke-dashoffset:0;opacity:.9}
.se-leader.is-current circle{transform:none}

.se-alert{top:36px;right:18px;z-index:5}

@media(max-width:850px){
  .scene-security{padding-top:22px}
  .se-stage{top:22px;width:100%;bottom:86px}
  .se-rings{width:min(100cqw - 16px,100cqh - 46px)}
  .se-core{width:56px;height:56px}.se-core .ic{width:18px;height:18px}.se-core span{display:none}
  .se-counters{left:10px;right:auto;top:4px;display:flex;gap:0;text-align:left;padding:3px 6px;font-size:9px}
  .se-ctr em,.se-ctr-alerts{display:none}
  .se-ctr-reached::before{content:'Reached '}.se-ctr-blocked::before{content:' · Blocked ';white-space:pre}
  .se-ledger{left:10px;right:10px;bottom:4px;height:13px;--se-vis:1}.se-ledger li{font-size:9px}
  .se-ghost{font-size:9px}
  .se-legend{left:10px;right:10px;top:auto;bottom:10px;padding:0;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:end;gap:4px}
  .se-legend li{padding:4px 7px;font-size:9.5px;border-radius:7px;gap:5px;transform:none}
  .se-n,.se-legend .ic{display:none}
  .se-leaders{display:none}
  .se-alert{top:24px;right:10px;font-size:10px;padding:4px 8px}
}
@media(prefers-reduced-motion:reduce){
  .se-legend li{transform:none}
  .se-ring.is-on{stroke:#4e6132}.se-ring.is-current{stroke:var(--c-machine)}.stage-whole .se-ring.is-on{stroke:var(--c-machine)}
}

/* ==== Scene: scale ==== */
/* 11 Scale: people-dots regroup (one team -> departments -> offices -> regions) while their request
   traffic never stops; the platform node splits under load instead of being replaced.
   The canvas (Story.canvas, parent = scene) sits under the DOM rows so chip connectors can reach the apps. */
.scene-scale{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350;padding:30px 24px 16px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px}
.scene-scale>:not(canvas){position:relative;z-index:1}
.scene-scale>canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.scale-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.scale-num b{display:block;font-size:46px;line-height:1;font-weight:500;letter-spacing:-.03em;color:var(--c-human);font-variant-numeric:tabular-nums}
.scale-num span{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#8b95a4}
.scale-tags{display:grid;text-align:right;font-size:12px;color:#dcf5bd}
.scale-tags span{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity 200ms,transform 500ms var(--ease)}
.scale-tags span.is-current{opacity:1;transform:none}
.sc-field{min-height:0}
.sc-mono{font:500 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:var(--c-idle);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-plat{position:absolute;right:0;top:0;display:grid;text-align:right}
.sc-plat span{grid-area:1/1;opacity:0;transform:translateY(4px);transition:opacity 200ms,transform 500ms var(--ease),color 200ms}
.sc-plat span.is-current{opacity:1;transform:none;color:#dcf5bd}
.sc-legend{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:6px}
.sc-legend i{width:6px;height:6px;border-radius:50%;background:var(--c-human);opacity:.78;flex:none}
.sc-rps{position:absolute;right:0;bottom:0}
.sc-rps b{font-weight:600;color:#dcf5bd}
.apps{display:flex;flex-wrap:wrap;gap:6px;padding-top:14px;border-top:1px solid #262b33}
.apps span{padding:5px 9px;border-radius:7px;border:1px solid #39404a;background:#161a1f;font-size:11px;color:#8b95a4;opacity:.3;transform:scale(.9);transition:opacity 200ms,transform 420ms cubic-bezier(.34,1.56,.64,1),border-color 200ms,color 200ms,background-color 200ms}
.apps span.is-on{opacity:1;transform:none;border-color:#86a35a;background:#1b2317;color:#dcf5bd}
@media(max-width:850px){
  .scene-scale{padding:30px 16px 12px;gap:10px}
  .scale-num b{font-size:34px}.scale-tags{font-size:11px}
  .sc-mono{font-size:9.5px}
  .apps{padding-top:10px;gap:5px}.apps span{padding:4px 7px;font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .scale-tags span,.sc-plat span,.apps span{transition:none}
}

/* ==== Scene: improve ==== */
/* 12 Improve (im-): the loop never ends. Grey telemetry feeds Monitor, analysis bars collapse into release
   packets that strike the orders chart and roll the version digits; at Scale a peak-season spike is absorbed
   with no dip while the ring grows for the next lap. One canvas (Story.canvas, z 0) draws ring traffic + chart.
   Scene-internal stages: h1 .25 / c1 .36 / h2 .5 / c2 .66 / h3 .74 / c3 .81 / scale .85 / h4 .92 */
.scene-improve{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:16px;padding:30px 18px 14px;align-items:stretch}
.scene-improve>:not(canvas){position:relative;z-index:1}
.scene-improve>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.scene-improve .im-anchor{display:none}
.im-mono{font:500 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:var(--c-idle);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Ring column: the loop SVG sits under the canvas (z 0) so lime packets ride on top of the drawn arc */
.scene-improve .im-ring{position:relative;z-index:0;min-height:0;display:grid;align-items:center;container-type:size}
.im-ringbox{position:relative;width:100%;width:min(100%,100cqh);aspect-ratio:1;margin:auto}
.scene-improve .loop{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:center;transition:transform 700ms var(--ease)}
.scene-improve .loop-base{fill:none;stroke:#2d343e;stroke-width:2}
.scene-improve .loop-fill{fill:none;stroke:var(--c-machine);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p) * 100);transform:rotate(-90deg);transform-box:fill-box;transform-origin:center;transition:stroke-width 700ms var(--ease)}
.scene-improve .lnode circle{fill:#15191f;stroke:#3a414c;stroke-width:1.5;transition:fill 200ms,stroke 200ms}
.scene-improve .lnode text{fill:#8b95a4;font-size:12px;text-anchor:middle;font-weight:500;transition:fill 200ms}
.scene-improve .lnode.is-on circle{fill:#1b2317;stroke:#86a35a}.scene-improve .lnode.is-on text{fill:#dcf5bd}
.scene-improve .lnode.is-current circle{fill:var(--c-machine)}
.scene-improve.stage-scale .loop{transform:scale(1.06)}
.scene-improve.stage-scale .loop-fill{stroke-width:3}

/* Analyze histogram beside the Analyze node: grows with a 60ms stagger, collapses into a release, grows again */
.im-hist{position:absolute;left:calc(86.5% + 2px);top:calc(28.9% - 46px);width:44px;height:28px;display:flex;align-items:flex-end;gap:3px;padding:0 3px;border-bottom:1px solid var(--c-draft);opacity:.45;transform-origin:left bottom;transition:transform 500ms var(--ease),opacity 200ms,border-color 200ms}
.im-hist i{flex:1;height:100%;background:var(--c-machine);border-radius:1px 1px 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform 500ms var(--ease) calc(var(--i) * 60ms)}
.scene-improve.stage-h1 .im-hist{opacity:1;border-color:#86a35a}
.scene-improve.stage-h1 .im-hist i{transform:scaleY(var(--h))}
.scene-improve.stage-c1 .im-hist{opacity:.3;transform:scale(.6)}
.scene-improve.stage-h2 .im-hist{opacity:1;transform:none}
.scene-improve.stage-h2 .im-hist i{transform:scaleY(var(--h2))}
.scene-improve.stage-c2 .im-hist{opacity:.3;transform:scale(.6)}
.scene-improve.stage-h3 .im-hist{opacity:1;transform:none}
.scene-improve.stage-h3 .im-hist i{transform:scaleY(var(--h3))}
.scene-improve.stage-c3 .im-hist{opacity:.3;transform:scale(.6)}
.scene-improve.stage-h4 .im-hist{opacity:1;transform:none}
.scene-improve.stage-h4 .im-hist i{transform:scaleY(var(--h))}

/* Spec layer under the ring: what the grey dots are */
.im-legend{position:absolute;left:0;bottom:0;display:grid}
.im-legend span{grid-area:1/1;display:flex;align-items:center;gap:6px;opacity:0;transform:translateY(4px);transition:opacity 200ms,transform 500ms var(--ease)}
.im-legend span.is-current{opacity:1;transform:none;color:#8b95a4}
.im-legend i{width:6px;height:6px;border-radius:50%;background:var(--c-idle);flex:none}
.im-legend span:last-child i{background:var(--c-machine)}

/* Right panel: version roller, orders chart (canvas, in the .im-chart rect), release notes */
.scene-improve .improve-panel{display:grid;grid-template-rows:auto minmax(110px,1fr) auto;gap:18px;min-height:0;min-width:0;container-type:inline-size}
.im-version,.im-chartwrap,.im-chart-head{min-width:0}
.im-version{display:grid;gap:4px}
.im-ver{display:flex;align-items:flex-start;font-size:38px;line-height:1;font-weight:500;letter-spacing:-.02em;color:var(--c-human);font-variant-numeric:tabular-nums}
.im-v,.im-col{display:block;height:1em;line-height:1em}
.im-col{overflow:hidden}
.im-strip{display:block;transform:translateY(calc(var(--d,0) * -1em));transition:transform 500ms var(--ease)}
.im-strip i{display:block;height:1em;line-height:1em;font-style:normal}
.scene-improve .version{display:grid;font-size:11.5px;color:#8b95a4}
.scene-improve .version span{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity 200ms,transform 500ms var(--ease)}
.scene-improve .version span.is-current{opacity:1;transform:none;color:#dcf5bd}
.im-chartwrap{display:grid;grid-template-rows:auto minmax(110px,1fr) auto;gap:6px;min-height:0}
.im-chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;overflow:hidden}
@container (max-width:239px){.im-cap{display:none}}
@container (max-width:199px){.im-vs,.scene-improve .kpi-label span:nth-child(2){display:none}}
.im-chart-head b{font-weight:600;color:#dcf5bd}
.im-chart{position:relative;min-height:110px;border:1px solid #262b33;border-radius:12px}
.im-cap{position:absolute;right:8px;top:0;transform:translateY(-100%);opacity:0;transition:opacity 200ms}
.scene-improve.stage-scale .im-cap{opacity:1}
.scene-improve .kpi-label{font-size:10.5px;color:#6f7988;display:flex;justify-content:space-between;gap:8px}
.scene-improve .improve-notes{display:grid;gap:5px;font-size:11.5px;color:#aab3bf}
.scene-improve .improve-notes span{display:flex;gap:8px;align-items:center;padding:4px 9px;border-radius:8px;border:1px solid transparent;opacity:.35;transition:opacity 200ms,color 200ms,border-color 200ms,background-color 200ms}
.scene-improve .improve-notes span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--c-idle);flex:none;transition:background-color 200ms}
.scene-improve .improve-notes span.is-on{opacity:1;color:#dcf5bd;border-color:#2f3b28;background:#1b231780}
.scene-improve .improve-notes span.is-on::before{background:var(--c-machine)}

@media(max-width:850px){
  .scene-improve{grid-template-columns:184px minmax(0,1fr);grid-template-rows:180px auto auto;gap:8px 10px;padding:30px 14px 10px;align-items:start}
  .scene-improve .im-ring{grid-area:1/1/2/2;height:180px}
  .im-ringbox{width:176px;margin:2px 0 0 8px}
  .im-legend,.im-hist,.im-cap{display:none}
  .scene-improve .lnode text{font-size:18px}
  .scene-improve .improve-panel{display:contents}
  .im-version{grid-area:1/2/2/3;align-self:center;gap:2px}
  .im-ver{font-size:26px}
  .im-chartwrap{grid-area:2/1/3/3;grid-template-rows:auto 64px auto;gap:4px}
  .im-chart{min-height:64px}
  .scene-improve .improve-notes{grid-area:3/1/4/3;font-size:10.5px;gap:3px}
  .scene-improve .improve-notes span{padding:3px 8px}
}
@media(prefers-reduced-motion:reduce){
  .im-strip,.im-hist,.im-hist i,.scene-improve .loop,.scene-improve .loop-fill,.scene-improve .version span,.im-legend span{transition:none}
}

/* ==== Scene: eco ==== */
/* 13 Ecosystem (ec-): eight silos leak white hand-copies and lose every third one; APIs draw on and turn the
   copies lime; at .34 the chips travel to a ring and their trapped grey data streams down the spokes into the
   platform; workflows hop through the hub; an employee's question runs hub -> Payment -> Support and comes back
   answered; at .9 chips, spokes and hub beat as one. Canvas .ec-flow (z1) carries all traffic (eco.js).
   --ec-kx/--ec-ky compress the ring on small boxes; every anchored element uses the same two formulas. */
.scene-eco{--c-machine:#b7f34a;--c-human:#f4f5f7;--c-friction:#e07a5f;--c-idle:#5a6474;--c-draft:#3a4350;--ec-kx:1;--ec-ky:1;--ec-hub:140px}
.scene-eco>.scene-canvas{width:100%;height:100%}
.scene-eco .eco-wires{position:absolute;inset:0;width:100%;height:100%;z-index:0;transform:scale(var(--ec-kx),var(--ec-ky));transform-origin:50% 50%}
.scene-eco .eco-wires path{fill:none}
.scene-eco .pair{stroke:var(--c-idle);stroke-width:.25;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1100ms var(--ease),opacity 500ms var(--ease)}
.scene-eco.stage-connect .pair{stroke-dashoffset:0;stroke:#4e6132;animation:ecSettle 1.7s forwards}
.scene-eco.stage-centralize .pair{opacity:0}
.scene-eco .spoke{stroke:#4e6132;stroke-width:.25;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1100ms var(--ease) 400ms}
.scene-eco.stage-centralize .spoke{stroke-dashoffset:0;animation:ecSettle 2.1s forwards}
.scene-eco.stage-support .spoke{animation:ecBeatStroke 2.4s var(--ease) infinite}
@keyframes ecSettle{0%,68%{stroke:#b7f34a}100%{stroke:#4e6132}}
/* broken hand-offs: dissolve when the APIs are drawn */
.scene-eco .xmark{position:absolute;left:calc(50% + (var(--x) - 50%) * var(--ec-kx));top:calc(50% + (var(--y) - 50%) * var(--ec-ky));width:22px;height:22px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:#2a1b19;border:1px solid #8a4a3c;color:var(--c-friction);transition:opacity 500ms var(--ease),transform 500ms var(--ease);z-index:2}
.scene-eco .xmark .ic{width:12px;height:12px}
.scene-eco.stage-connect .xmark{opacity:0;transform:translate(-50%,-50%) scale(.5)}
/* the eight systems: scattered silos -> one ring (left/top travel is granted for this scene) */
.scene-eco .enode{position:absolute;left:calc(50% + (var(--sx) - 50%) * var(--ec-kx));top:calc(50% + (var(--sy) - 50%) * var(--ec-ky));transform:translate(-50%,-50%) rotate(var(--rot,0deg));opacity:.7;transition:left 1000ms var(--ease),top 1000ms var(--ease),transform 1000ms var(--ease),opacity 200ms var(--ease),border-color 200ms var(--ease),background-color 200ms var(--ease),color 200ms var(--ease);z-index:2}
.scene-eco .enode .ic{transition:color 200ms var(--ease)}
.scene-eco.stage-connect .enode{opacity:1}
.scene-eco.stage-centralize .enode{left:calc(50% + (var(--rx) - 50%) * var(--ec-kx));top:calc(50% + (var(--ry) - 50%) * var(--ec-ky));transform:translate(-50%,-50%) rotate(0deg);border-color:#86a35a;background:#1b2317;color:#dcf5bd}
.scene-eco.stage-centralize .enode .ic{color:#c9f28a}
.scene-eco.stage-support .enode{animation:ecBeat 2.4s var(--ease) infinite}
@keyframes ecBeat{0%{filter:brightness(1)}10%{filter:brightness(1.45)}25%,100%{filter:brightness(1)}}
@keyframes ecBeatStroke{0%{filter:brightness(1)}10%{filter:brightness(2.2)}25%,100%{filter:brightness(1)}}
/* the platform: ignites as the data arrives (scale-up coincides with the dust streams) */
.scene-eco .ehub{position:absolute;left:50%;top:50%;width:var(--ec-hub);height:var(--ec-hub);transform:translate(-50%,-50%) scale(.6);display:grid;place-content:center;justify-items:center;gap:6px;border-radius:50%;border:1px solid #3c4552;background:radial-gradient(circle at 50% 35%,#242b35,#121519);color:#e7eaef;font-size:11.5px;font-weight:600;text-align:center;opacity:0;transition:opacity 500ms var(--ease),transform 900ms var(--ease) 300ms,box-shadow 500ms var(--ease),border-color 200ms var(--ease);z-index:3}
.scene-eco .ehub .ic{width:26px;height:26px;color:#c9f28a}
.scene-eco.stage-centralize .ehub{opacity:1;transform:translate(-50%,-50%);border-color:#4e6132}
.scene-eco.stage-support .ehub{box-shadow:0 0 0 14px #b7f34a0d,0 0 0 28px #b7f34a06,0 0 60px #b7f34a2a}
.scene-eco .ehub::after{content:'';position:absolute;inset:-18px;border-radius:50%;border:1px dashed #6f8a49;opacity:0;transition:opacity 500ms var(--ease)}
.scene-eco.stage-support .ehub::after{opacity:1;animation:spin 18s linear infinite}
/* badges land with the materialise overshoot */
.scene-eco .ebadge{z-index:4;transform:translateY(8px) scale(.85);transition:opacity 200ms var(--ease),transform 420ms cubic-bezier(.34,1.56,.64,1)}
.scene-eco .ebadge.is-on{transform:none}
.scene-eco .b-analytics{left:calc(50% + 86px);top:calc(50% - 76px)}
.scene-eco .b-ai{left:calc(50% - 190px);top:calc(50% - 76px)}
.scene-eco .b-monitor{left:50%;top:calc(50% + 86px);transform:translate(-50%,8px) scale(.85)}
.scene-eco .b-monitor.is-on{transform:translate(-50%,0)}
/* caption + spec layer (top 28px stays clear for the sheet ruler) */
.scene-eco .eco-title{position:absolute;left:0;right:0;top:28px;text-align:center;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#8b95a4;display:grid;z-index:5;pointer-events:none}
.scene-eco .eco-title span{grid-area:1/1;opacity:0;transform:translateY(4px);transition:opacity 200ms var(--ease),transform 500ms var(--ease)}
.scene-eco .eco-title span.is-current{opacity:1;transform:none}
.scene-eco .eco-title span.final{color:#dcf5bd;text-transform:none;letter-spacing:0;font-size:15px;font-weight:600}
.ec-meta{position:absolute;left:0;right:0;top:46px;margin:0;text-align:center;display:grid;z-index:5;pointer-events:none;font:500 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;color:var(--c-idle);font-variant-numeric:tabular-nums}
.ec-meta>span{grid-area:1/1;opacity:0;transition:opacity 200ms var(--ease)}
.ec-meta>span.is-current{opacity:1}
.ec-meta b{font-weight:600;color:#dcf5bd}
.ec-ev{opacity:0;transition:opacity 200ms var(--ease)}
.ec-ev.is-on{opacity:1}
/* chat: a human asks (white), the platform answers (lime). Anchored above their chips' ring positions. */
.ec-chat,.ec-reply{position:absolute;left:calc(50% + (var(--rx) - 50%) * var(--ec-kx));top:calc(50% + (var(--ry) - 50%) * var(--ec-ky) - 40px);transform:translate(-50%,-50%) scale(.9);z-index:5;max-width:250px;padding:6px 10px;font:500 10.5px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.3px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease),transform 420ms cubic-bezier(.34,1.56,.64,1)}
.ec-chat{background:var(--c-human);color:#111214;border-radius:12px 12px 12px 3px}
.ec-reply{background:#1b2317;border:1px solid #86a35a;color:#dcf5bd;border-radius:12px 12px 3px 12px}
.ec-chat::before,.ec-reply::before{content:'';position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.ec-reply::before{border:1px solid #86a35a;border-top-color:transparent;border-left-color:transparent}
.ec-chat.is-on,.ec-reply.is-on{opacity:1;transform:translate(-50%,-50%)}
@media(max-width:850px){
  .scene-eco{--ec-kx:.95;--ec-ky:.8;--ec-hub:104px}
  .scene-eco .pair{display:none}                                   /* eco.js draws the pair lines from live chip rects here */
  .scene-eco .spoke{stroke-width:.4}
  .scene-eco .enode{font-size:10px;padding:4px 7px;gap:5px;left:calc(50% + (var(--msx,var(--sx)) - 50%) * var(--ec-kx));top:calc(50% + (var(--msy,var(--sy)) - 50%) * var(--ec-ky))}
  .scene-eco .enode .ic{width:12px;height:12px}
  .scene-eco .xmark{width:18px;height:18px;left:calc(50% + (var(--mx,var(--x)) - 50%) * var(--ec-kx));top:calc(50% + (var(--my,var(--y)) - 50%) * var(--ec-ky))}
  .scene-eco .ehub{font-size:10.5px;gap:4px}.scene-eco .ehub .ic{width:22px;height:22px}
  .scene-eco .b-analytics{left:calc(50% + 62px);top:calc(50% - 64px)}.scene-eco .b-ai{left:calc(50% - 160px);top:calc(50% - 64px)}
  .scene-eco .b-monitor{left:auto;right:14px;top:44px;transform:translateY(8px) scale(.85)}.scene-eco .b-monitor.is-on{transform:none}
  .scene-eco .eco-title{top:24px;font-size:11px}.scene-eco .eco-title span.final{font-size:13.5px}
  .ec-meta{top:auto;bottom:6px;font-size:9.5px}
  .ec-chat,.ec-reply{max-width:120px;font-size:10px;white-space:normal;text-align:center;padding:5px 9px}
  .ec-chat{left:calc(50% + (var(--rx) - 50%) * var(--ec-kx) - 10px);top:calc(50% + (var(--ry) - 50%) * var(--ec-ky) - 44px)}
  .ec-reply{top:calc(50% + (var(--ry) - 50%) * var(--ec-ky) + 40px);border-radius:3px 12px 12px 12px}   /* below Customer support, tail up */
  .ec-reply::before{bottom:auto;top:-5px;border-color:#86a35a transparent transparent #86a35a}
}
@media(prefers-reduced-motion:reduce){
  /* state is class-based, so the end state is already correct; only the resting transforms need pinning */
  .scene-eco .ebadge,.scene-eco .ebadge.is-on{transform:none}
  .scene-eco .b-monitor,.scene-eco .b-monitor.is-on{transform:translate(-50%,0)}
  @media(max-width:850px){.scene-eco .b-monitor,.scene-eco .b-monitor.is-on{transform:none}}
}