/* Animation du workflow (écran 4), chargée dans le shadow DOM de #flowHost */
:host{display:block;
  color-scheme: light;
  --paper:#F6F8FA;
  --ground:#E4EBF0;
  --window:#FFFFFF;
  --ink:#0E1E2E;
  --muted:#586A7A;
  --line:#D2DCE3;
  --soft:#E8EEF2;
  --accent:#14A3B8;
  --accent-deep:#1E8FA0;
  --accent-ink:#137A8A;
  --accent-soft:#E3F6F9;
  --ok:#1E8A63;
  --warn:#C98A0B;
  --cfo:#0E1E2E;
  --cfa:#1E8FA0;
  --cvc:#2BB8CC;
  --f-display:"Barlow Semi Condensed","Barlow","Arial Narrow",Arial,sans-serif;
  --f-body:"Barlow","Segoe UI",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}

.wrap{container-type:inline-size;max-width:1200px;margin:0 auto}

/* ---------- stage ---------- */
.stage{
  --u:1cqw;
  position:relative;aspect-ratio:16/9;max-width:100%;
  background:var(--paper);color:var(--ink);
  border-radius:calc(var(--u)*1.2);overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;
  font-size:calc(var(--u)*1.2);line-height:1.3;
  background-image:
    linear-gradient(var(--soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--soft) 1px,transparent 1px);
  background-size:calc(var(--u)*2.5) calc(var(--u)*2.5);
  background-position:-1px -1px;
}

/* ---------- rail ---------- */
.rail{position:relative;display:grid;grid-template-columns:repeat(7,1fr);padding:calc(var(--u)*2.4) calc(var(--u)*2) calc(var(--u)*1.2)}
.rail-line{position:absolute;left:calc(var(--u)*2 + (100% - var(--u)*4)/14);right:calc(var(--u)*2 + (100% - var(--u)*4)/14);top:calc(var(--u)*3.35);height:calc(var(--u)*.25);background:var(--line);border-radius:9px}
.rail-fill{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0);border-radius:9px}
.node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.7);background:none;border:0;padding:0;cursor:pointer;color:var(--muted);font:inherit}
.node:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.dot{width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);border-radius:50%;background:var(--paper);border:calc(var(--u)*.22) solid var(--line);display:grid;place-items:center;font-family:var(--f-mono);font-size:calc(var(--u)*.9);font-weight:600;color:var(--muted);transition:background .4s,border-color .4s,color .4s,transform .4s}
.node.done .dot{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.node.active .dot{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.18);box-shadow:0 0 0 calc(var(--u)*.6) var(--accent-soft)}
.lbl{font-family:var(--f-display);font-weight:600;font-size:calc(var(--u)*1.15);letter-spacing:.04em;text-transform:uppercase;text-align:center;line-height:1.1;transition:color .4s}
.node.active .lbl,.node.done .lbl{color:var(--ink)}

/* ---------- main ---------- */
.main{display:grid;grid-template-columns:33% 1fr;gap:calc(var(--u)*2.4);padding:calc(var(--u)*1.2) calc(var(--u)*3) calc(var(--u)*3);min-height:0}
.cap{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*1.1);min-width:0}
.cap.swap > *{animation:capIn .6s cubic-bezier(.2,.7,.2,1) both}
.cap.swap > *:nth-child(2){animation-delay:.06s}
.cap.swap > *:nth-child(3){animation-delay:.12s}
.cap.swap > *:nth-child(4){animation-delay:.18s}
@keyframes capIn{from{opacity:0;transform:translateY(calc(var(--u)*1.2))}to{opacity:1;transform:none}}
.eyebrow{font-family:var(--f-mono);font-size:calc(var(--u)*1);letter-spacing:.08em;color:var(--accent-ink);text-transform:uppercase}
.cap h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:calc(var(--u)*3.9);line-height:.95;letter-spacing:-.01em;text-wrap:balance}
.cap p{margin:0;color:var(--muted);font-size:calc(var(--u)*1.35);line-height:1.4;max-width:34ch}
.kpi{display:flex;align-items:baseline;gap:calc(var(--u)*1);border-top:1px solid var(--line);padding-top:calc(var(--u)*1.1);margin-top:calc(var(--u)*.4)}
.kpi b{font-family:var(--f-mono);font-weight:600;font-size:calc(var(--u)*2.6);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi span{color:var(--muted);font-size:calc(var(--u)*1.1);line-height:1.2}

/* ---------- app window ---------- */
.win{position:relative;background:var(--window);border:1px solid var(--line);border-radius:calc(var(--u)*.9);box-shadow:0 calc(var(--u)*1.2) calc(var(--u)*3) rgba(19,40,58,.12);display:grid;grid-template-rows:auto 1fr;min-height:0;overflow:hidden}
.bar{display:flex;align-items:center;gap:calc(var(--u)*1.2);padding:calc(var(--u)*.9) calc(var(--u)*1.4);border-bottom:1px solid var(--line);font-size:calc(var(--u)*1)}
.brand{display:block;height:calc(var(--u)*1.9);width:auto;flex:none}
.crumb{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.mod{font-family:var(--f-mono);font-size:calc(var(--u)*.9);background:var(--ink);color:var(--paper);padding:calc(var(--u)*.3) calc(var(--u)*.8);border-radius:99px;white-space:nowrap}
.body{position:relative;min-height:0}
.scene{position:absolute;inset:0;padding:calc(var(--u)*1.6) calc(var(--u)*1.8);opacity:0;transform:translateY(calc(var(--u)*1.2));transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none;display:flex;flex-direction:column;gap:calc(var(--u)*1)}
.scene.on{opacity:1;transform:none}
.scene .a{opacity:0}
.scene.on .a{animation:rise .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--i,0) * .11s)}
@keyframes rise{from{opacity:0;transform:translateY(calc(var(--u)*.9))}to{opacity:1;transform:none}}
.scene.on .grow{animation:grow 1s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(.35s + var(--i,0) * .12s)}
.grow{transform-origin:left;transform:scaleX(0)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:1em;font-size:calc(var(--u)*1.05);color:var(--muted)}
.shead strong{color:var(--ink);font-family:var(--f-display);font-size:calc(var(--u)*1.4);font-weight:700;letter-spacing:.01em}

.chip{display:inline-block;font-family:var(--f-mono);font-size:calc(var(--u)*.8);font-weight:600;padding:calc(var(--u)*.15) calc(var(--u)*.5);border-radius:calc(var(--u)*.3);color:#fff}
.c-cfo{background:var(--cfo)}.c-cfa{background:var(--cfa)}.c-cvc{background:var(--cvc);color:var(--ink)!important}

/* scene 1 — chiffrage */
.tbl{display:flex;flex-direction:column;font-size:calc(var(--u)*1.05)}
.tr{display:grid;grid-template-columns:calc(var(--u)*4.4) 1fr calc(var(--u)*7.5) calc(var(--u)*6) calc(var(--u)*7.5);gap:calc(var(--u)*.8);align-items:center;padding:calc(var(--u)*.72) 0;border-bottom:1px solid var(--soft)}
.tr .n{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.th{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em;font-size:calc(var(--u)*.85);color:var(--muted);border-bottom:1px solid var(--line)}
.th .n{font-family:var(--f-display)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:calc(var(--u)*.6);padding:calc(var(--u)*.9) calc(var(--u)*1);background:var(--accent-soft);border:1px solid #BFE8EF;border-radius:calc(var(--u)*.5)}
.total > span{font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:calc(var(--u)*1)}
.total b{font-family:var(--f-mono);font-size:calc(var(--u)*1.6);font-weight:600}

/* scene 2 — consultation */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*1);flex:1;align-content:start}
.offer{position:relative;border:1px solid var(--line);border-radius:calc(var(--u)*.6);padding:calc(var(--u)*1.1);display:flex;flex-direction:column;gap:calc(var(--u)*.55);background:var(--window)}
.offer h4{margin:0;font-family:var(--f-display);font-size:calc(var(--u)*1.2);font-weight:600}
.offer .price{font-family:var(--f-mono);font-size:calc(var(--u)*1.6);font-weight:600}
.offer .meta{color:var(--muted);font-size:calc(var(--u)*.95)}
.track{height:calc(var(--u)*.55);background:var(--soft);border-radius:9px;overflow:hidden}
.track i{display:block;height:100%;background:var(--muted);border-radius:9px}
.badge{position:absolute;top:calc(var(--u)*-.8);right:calc(var(--u)*.8);background:var(--accent-deep);color:#fff;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:calc(var(--u)*.85);padding:calc(var(--u)*.2) calc(var(--u)*.7);border-radius:99px;opacity:0;transform:scale(.6)}
.scene.on .win-offer{animation:rise .55s cubic-bezier(.2,.7,.2,1) .42s both,pick .5s ease 1.55s forwards}
.scene.on .win-offer .badge{animation:pop .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:1.7s}
.scene.on .win-offer .track i{animation:tint .4s both 1.55s}
@keyframes pick{to{border-color:var(--accent);box-shadow:0 0 0 calc(var(--u)*.3) var(--accent-soft);transform:translateY(calc(var(--u)*-.5))}}
@keyframes pop{to{opacity:1;transform:scale(1)}}
@keyframes tint{to{background:var(--accent)}}
.ref{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--line);padding-top:calc(var(--u)*.9);font-size:calc(var(--u)*1.05);color:var(--muted)}
.ref b{color:var(--ok);font-family:var(--f-mono);font-weight:600}

/* scene 3 — budget */
.brows{display:flex;flex-direction:column;gap:calc(var(--u)*1.05)}
.brow{display:grid;grid-template-columns:calc(var(--u)*12) 1fr calc(var(--u)*8);gap:calc(var(--u)*1);align-items:center;font-size:calc(var(--u)*1.05)}
.brow .track{height:calc(var(--u)*1.5);border-radius:calc(var(--u)*.3)}
.brow .track i{border-radius:calc(var(--u)*.3);background:var(--ink)}
.brow .n{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.brow small{display:block;color:var(--muted);font-size:calc(var(--u)*.85)}
.stamp{align-self:flex-start;display:flex;align-items:center;gap:calc(var(--u)*.6);border:calc(var(--u)*.18) solid var(--ok);color:var(--ok);font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:calc(var(--u)*1.1);padding:calc(var(--u)*.45) calc(var(--u)*1);border-radius:calc(var(--u)*.4);opacity:0;transform:scale(1.4) rotate(-3deg)}
.scene.on .stamp{animation:stamp .4s cubic-bezier(.3,1.4,.5,1) both 1.6s}
@keyframes stamp{to{opacity:1;transform:scale(1) rotate(-3deg)}}
.btot{display:flex;justify-content:space-between;align-items:center;gap:1em;border-top:1px solid var(--line);padding-top:calc(var(--u)*.9);margin-top:auto}
.btot b{font-family:var(--f-mono);font-size:calc(var(--u)*1.5);font-weight:600}

/* scene 4 — pointage de l'avancement */
.avg{display:grid;grid-template-columns:calc(var(--u)*15) repeat(4,1fr) calc(var(--u)*4.6);gap:calc(var(--u)*.4) calc(var(--u)*.5);font-size:calc(var(--u)*1);align-items:center}
.gh{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em;font-size:calc(var(--u)*.85);color:var(--muted);text-align:center}
.grp{grid-column:1/-1;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:calc(var(--u)*.85);color:var(--accent-ink);padding-top:calc(var(--u)*.35);border-bottom:1px solid var(--soft)}
.ouv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ouv small{color:var(--muted);font-family:var(--f-mono);font-size:calc(var(--u)*.8);margin-right:calc(var(--u)*.4)}
.pc{position:relative;height:calc(var(--u)*2.1);background:var(--soft);border-radius:calc(var(--u)*.3);overflow:hidden;display:grid;place-items:center;font-family:var(--f-mono);font-weight:600;font-size:calc(var(--u)*.88);color:var(--ink)}
.pc i{position:absolute;inset:0 auto 0 0;background:var(--cvc)}
.pc.full i{background:var(--accent-deep)}
.pc.full{color:#fff}
.pc b{position:relative;font-weight:600}
.gt{text-align:right;font-family:var(--f-mono);font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.4) calc(var(--u)*1.2);align-items:center;color:var(--muted);font-size:calc(var(--u)*.95);margin-top:auto;border-top:1px solid var(--line);padding-top:calc(var(--u)*.8)}
.legend .sync{margin-left:auto;color:var(--ok);font-weight:600;padding-right:calc(var(--u)*2.2)}

/* scene 5 — planning */
.gantt{display:grid;grid-template-columns:calc(var(--u)*13) 1fr;row-gap:calc(var(--u)*.75);font-size:calc(var(--u)*1)}
.weeks{display:grid;grid-template-columns:repeat(9,1fr);font-family:var(--f-mono);font-size:calc(var(--u)*.8);color:var(--muted)}
.weeks span{border-left:1px solid var(--soft);padding-left:calc(var(--u)*.3)}
.lane{position:relative;height:calc(var(--u)*2.3);background:repeating-linear-gradient(90deg,transparent 0 calc(100%/9 - 1px),var(--soft) calc(100%/9 - 1px) calc(100%/9))}
.task{display:flex;align-items:center;gap:calc(var(--u)*.5);white-space:nowrap}
.plan{position:absolute;top:calc(var(--u)*.35);bottom:calc(var(--u)*.35);border:1px solid var(--line);background:var(--soft);border-radius:calc(var(--u)*.35);overflow:hidden}
.plan i{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.plan.late{border-color:var(--warn)}
.plan.late i{background:var(--warn)}
.plan em.in{right:auto;left:calc(var(--u)*.5);color:#fff}
.plan em{position:absolute;right:calc(var(--u)*.5);z-index:1;top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--f-mono);font-size:calc(var(--u)*.8);font-weight:600;color:var(--ink);mix-blend-mode:normal}
.today{position:absolute;top:0;bottom:0;width:0;border-left:calc(var(--u)*.18) dashed var(--accent);opacity:0}
.scene.on .today{animation:rise .4s both 1.2s}
.today span{position:absolute;top:calc(var(--u)*-1.6);left:calc(var(--u)*-2.2);background:var(--accent-deep);color:#fff;font-family:var(--f-mono);font-size:calc(var(--u)*.78);padding:calc(var(--u)*.1) calc(var(--u)*.4);border-radius:99px;white-space:nowrap}
.gwrap{position:relative;display:contents}
.alert{display:flex;align-items:center;gap:calc(var(--u)*.7);margin-top:auto;background:#FBF1DA;color:#6E4A00;border-radius:calc(var(--u)*.5);padding:calc(var(--u)*.7) calc(var(--u)*1);font-size:calc(var(--u)*1)}
.alert b{font-family:var(--f-mono)}

/* scene 6 — revue budget */
.chart{flex:1;min-height:0}
.chart svg{width:100%;height:100%;display:block;overflow:visible}
.chart text{font-family:var(--f-mono);font-size:13px;fill:var(--muted)}
.chart .strong{fill:var(--ink);font-weight:600}
.chart .acc{fill:var(--accent-ink);font-weight:600}
.draw{stroke-dasharray:1;stroke-dashoffset:1}
.scene.on .draw{animation:draw 1.3s cubic-bezier(.4,.1,.2,1) forwards;animation-delay:calc(.3s + var(--i,0) * .25s)}
@keyframes draw{to{stroke-dashoffset:0}}
.fadein{opacity:0}
.scene.on .fadein{animation:fade .4s forwards;animation-delay:calc(1.4s + var(--i,0) * .15s)}
@keyframes fade{to{opacity:1}}
.loop{display:flex;align-items:center;gap:calc(var(--u)*.7);font-size:calc(var(--u)*1.05);color:var(--ink);border-top:1px solid var(--line);padding-top:calc(var(--u)*.8)}
.loop svg{width:calc(var(--u)*1.7);height:calc(var(--u)*1.7);flex:none}
.scene.on .loop svg{animation:spin 1.4s cubic-bezier(.5,0,.2,1) 1.9s both}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

/* ---------- controls ---------- */
.ctrl{position:absolute;right:calc(var(--u)*1.2);bottom:calc(var(--u)*1);display:flex;gap:calc(var(--u)*.6);z-index:3}
.ctrl button{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);min-width:26px;min-height:26px;border-radius:50%;border:1px solid var(--line);background:var(--window);color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.ctrl button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctrl svg{width:45%;height:45%}
.note{max-width:1200px;margin:14px auto 0;color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between}

/* ---------- narrow (mobile) ---------- */
@container (max-width:680px){
  .stage{--u:2.05cqw;aspect-ratio:4/5.4;font-size:calc(var(--u)*1.1)}
  .rail{padding:calc(var(--u)*1.8) calc(var(--u)*1.2) calc(var(--u)*.6)}
  .rail-line{left:calc(var(--u)*1.2 + (100% - var(--u)*2.4)/14);right:calc(var(--u)*1.2 + (100% - var(--u)*2.4)/14);top:calc(var(--u)*2.75)}
  .lbl{display:none}
  .node.active .lbl{display:none}
  .main{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:calc(var(--u)*1.2);padding:calc(var(--u)*1) calc(var(--u)*1.6) calc(var(--u)*1.6)}
  .cap{gap:calc(var(--u)*.6)}
  .cap h2{font-size:calc(var(--u)*3.2)}
  .cap p{font-size:calc(var(--u)*1.15);max-width:none}
  .kpi{padding-top:calc(var(--u)*.6)}
  .kpi b{font-size:calc(var(--u)*2.1)}
  .crumb{display:none}
  .tr{grid-template-columns:calc(var(--u)*4.2) 1fr calc(var(--u)*7) calc(var(--u)*7.2)}
  .tr .pu{display:none}
  .brow{grid-template-columns:calc(var(--u)*10) 1fr calc(var(--u)*7)}
  .gantt{grid-template-columns:calc(var(--u)*10.5) 1fr}
  .avg{grid-template-columns:calc(var(--u)*11) repeat(4,1fr) calc(var(--u)*4.2)}
  .ouv small{display:none}
  .legend span:first-child{display:none}
  .offer .meta{font-size:calc(var(--u)*.85)}
  .offer .price{font-size:calc(var(--u)*1.3)}
}


/* scene 7 — et bien plus */
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(var(--u)*.9);flex:1;min-height:0}
.mc{border:1px solid var(--line);border-radius:calc(var(--u)*.6);padding:calc(var(--u)*.8) calc(var(--u)*.9);background:var(--window);display:flex;flex-direction:column;gap:calc(var(--u)*.45);min-width:0;min-height:0;overflow:hidden;font-size:calc(var(--u)*.92)}
.scene.on .mc.a{animation:rise .55s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i,0) * .11s) both,glow 1.1s ease calc(1.5s + var(--i,0) * .32s) both}
@keyframes glow{0%{border-color:var(--line);box-shadow:none}35%{border-color:var(--accent);box-shadow:0 0 0 calc(var(--u)*.3) var(--accent-soft)}100%{border-color:var(--line);box-shadow:none}}
.mc h4{margin:0 0 calc(var(--u)*.15);font-family:var(--f-display);font-weight:700;font-size:calc(var(--u)*1.12);display:flex;align-items:center;gap:calc(var(--u)*.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc h4 i{flex:none;width:calc(var(--u)*1.7);height:calc(var(--u)*1.7);border-radius:calc(var(--u)*.4);background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center}
.mc h4 svg{width:62%;height:62%}
.pipe{display:grid;grid-template-columns:calc(var(--u)*6.4) 1fr calc(var(--u)*1.4);gap:calc(var(--u)*.5);align-items:center}
.pipe .track{height:calc(var(--u)*.8)}
.pipe .track i{background:var(--ink)}
.pipe .track i.acc{background:var(--accent)}
.pipe b{text-align:right;font-weight:600}
.res{display:grid;grid-template-columns:calc(var(--u)*5.6) repeat(5,1fr);gap:calc(var(--u)*.25);align-items:center}
.res em{font-style:normal;font-family:var(--f-mono);font-size:calc(var(--u)*.72);color:var(--muted);text-align:center}
.res span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res b{height:calc(var(--u)*1.05);border-radius:calc(var(--u)*.2);background:var(--soft)}
.res b.on,.res b.alt{transform:scaleY(.2);opacity:.3}
.scene.on .res b.on,.scene.on .res b.alt{animation:cell .35s cubic-bezier(.3,1.4,.5,1) calc(.3s + var(--i,0) * .16s) forwards}
.res b.on{background:var(--ink)}.res b.alt{background:var(--accent)}
@keyframes cell{to{transform:none;opacity:1}}
.doc{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u)*.5);padding:calc(var(--u)*.3) calc(var(--u)*.5);border:1px solid var(--soft);border-radius:calc(var(--u)*.3)}
.doc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc em,.fld b{font-style:normal;font-family:var(--f-mono);font-size:calc(var(--u)*.78);font-weight:600;white-space:nowrap}
.doc em{background:var(--soft);padding:calc(var(--u)*.1) calc(var(--u)*.4);border-radius:99px}
.ok{color:var(--ok)}
.msg{align-self:flex-start;max-width:92%;background:var(--soft);border-radius:calc(var(--u)*.5) calc(var(--u)*.5) calc(var(--u)*.5) calc(var(--u)*.1);padding:calc(var(--u)*.35) calc(var(--u)*.6);line-height:1.25}
.msg.me{align-self:flex-end;background:var(--accent-soft);border-radius:calc(var(--u)*.5) calc(var(--u)*.5) calc(var(--u)*.1) calc(var(--u)*.5)}
.msg small{display:block;font-family:var(--f-mono);font-size:calc(var(--u)*.68);color:var(--muted)}
.fld{display:flex;justify-content:space-between;gap:calc(var(--u)*.5);border-bottom:1px dashed var(--line);padding-bottom:calc(var(--u)*.3)}
.fld span{color:var(--muted);white-space:nowrap}
.mc.sum{background:var(--ink);border-color:var(--ink);color:var(--paper);justify-content:center;gap:calc(var(--u)*.4)}
.mc.sum b{font-family:var(--f-display);font-weight:700;font-size:calc(var(--u)*2);line-height:1}
.mc.sum span{color:#B4C6D1;font-size:calc(var(--u)*1)}
@container (max-width:680px){
  .more{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:calc(var(--u)*.6)}
  .mc{font-size:calc(var(--u)*.8);padding:calc(var(--u)*.6)}
  .mc h4{font-size:calc(var(--u)*.95)}
  .mc .opt{display:none}
  .pipe{grid-template-columns:calc(var(--u)*5.4) 1fr calc(var(--u)*1.2)}
  .res{grid-template-columns:calc(var(--u)*5) repeat(5,1fr)}
  .mc.sum b{font-size:calc(var(--u)*1.6)}
}
@media (prefers-reduced-motion:reduce){
  .stage *,.stage *::before,.stage *::after{animation-duration:1ms!important;animation-delay:0s!important;transition:none!important}
}

[hidden]{display:none!important}
*{box-sizing:border-box}
.wrap{color:var(--ink);font-family:var(--f-body)}