/* Case-study motion slides. One button per block opens one short animated slide.
   Namespaced with cm- so it cannot collide with Webflow classes. */
.cm-modal,.cm-play{--surface:#d8d8d8;--surface-2:#e2e2e2;--line:#717171;--fg:#222;--muted:#555;--accent:#2b4bd8;--accent-soft:rgba(43,75,216,.12);--stage:#0c0c0e;--scrim:rgba(20,20,22,.72);--hl:#a78bfa;--serif:"Fraunces",Georgia,"Times New Roman",serif;--mono:"Martian Mono",ui-monospace,Menlo,monospace;--bg:#d8d8d8}
.cm-modal[hidden]{display:none!important}
.cm-modal{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--fg);box-sizing:border-box}
.cm-modal *,.cm-modal *::before,.cm-modal *::after{box-sizing:border-box}
.cm-modal p{margin:0}
.cm-eyebrow{margin:0;font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.cm-play{font-family:var(--mono)}




.cm-play{align-self:flex-start;display:inline-flex;width:auto;line-height:1.2;text-align:left;align-items:center;gap:10px;margin-top:6px;cursor:pointer;
  font:inherit;font-size:12px;color:var(--accent);background:var(--accent-soft);border:.5px solid var(--accent);border-radius:999px;padding:9px 16px 9px 10px;
  transition:transform .3s cubic-bezier(.2,.9,.2,1.04)}
.cm-play:hover{transform:translateY(-2px)}
.cm-play:focus-visible,.cm-ctl:focus-visible,.cm-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cm-play .cm-ic{width:22px;height:22px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.cm-play .cm-ic svg{width:8px;height:8px;fill:var(--bg);margin-left:2px}
.cm-play .cm-dur{opacity:.7}

/* modal */
.cm-modal{position:fixed;inset:0;z-index:50;background:var(--scrim);display:grid;place-items:center;padding:16px;
  padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));animation:fade .25s ease}
.cm-sheet{width:min(960px,100%);background:var(--surface);border:.5px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;max-height:100%}
.cm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px}
.cm-top .cm-eyebrow{opacity:.8}
.cm-x{width:32px;height:32px;border-radius:50%;border:.5px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;font-size:18px;line-height:1}
.cm-stage{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--stage);overflow:hidden}
.cm-scene{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s ease}
.cm-scene.cm-on{opacity:1}
.cm-shot{position:absolute;inset:6% 7%;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);border:1px solid #2a2a2e}
.cm-shot img{display:block;width:100%;height:100%;object-fit:cover}
.cm-hl{position:absolute;border:2px solid var(--hl);border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,0);opacity:0}
.cm-tag{position:absolute;font-family:var(--mono);font-size:clamp(9px,1.2vw,12px);color:#fff;background:#6d28d9;border-radius:999px;padding:4px 10px;white-space:nowrap;opacity:0}
.cm-cursor{position:absolute;width:clamp(14px,2vw,22px);left:50%;top:60%;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.cm-ripple{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid #fff;opacity:0}

/* scene 1: before */
.cm-on .cm-s1-dim{animation:dim 1s 1.2s forwards}
.cm-s1-dim{position:absolute;inset:0;background:rgba(0,0,0,0)}
.cm-on .cm-s1-cursor{animation:wander 3.6s .3s forwards}
.cm-on .cm-s1-hl{animation:pop .5s 2.6s forwards}
.cm-on .cm-s1-tag{animation:pop .5s 3.1s forwards}
@keyframes wander{0%{opacity:0;left:40%;top:70%}10%{opacity:1}30%{left:22%;top:40%}50%{left:62%;top:52%}70%{left:44%;top:30%}100%{opacity:1;left:58%;top:62%}}
@keyframes dim{to{background:rgba(0,0,0,.45)}}

/* scene 2: start page */
.cm-on .cm-s2-shot{animation:slidein .7s cubic-bezier(.2,.9,.2,1) both}
.cm-on .cm-s2-cursor{animation:toDemo 2s 1s forwards}
.cm-on .cm-s2-ripple{animation:ripple .6s 3s forwards}
.cm-on .cm-s2-hl{animation:pop .5s 2.4s forwards}
.cm-on .cm-s2-tag{animation:pop .5s 3.3s forwards}
@keyframes toDemo{0%{opacity:0;left:70%;top:80%}15%{opacity:1}100%{opacity:1;left:39%;top:39%}}

/* scene 3: demo page */
.cm-on .cm-s3-shot{animation:slidein .7s cubic-bezier(.2,.9,.2,1) both}
.cm-on .s3-hl1{animation:pop .5s .9s forwards}
.cm-on .s3-tag1{animation:pop .5s 1.3s forwards}
.cm-on .s3-hl2{animation:pop .5s 2.6s forwards, pulse 1.2s 3.1s 2}
.cm-on .s3-tag2{animation:pop .5s 3s forwards}

/* scene 4: the path */
.cm-path{position:absolute;inset:10% 5% 30%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3%;align-items:center}
.cm-step{display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(10px)}
.cm-step img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;border-radius:6px;border:1px solid #2a2a2e;display:block}
.cm-step span{font-family:var(--mono);font-size:clamp(8px,1.1vw,11px);color:#d4d4d8;letter-spacing:.06em}
.cm-step b{color:var(--hl);font-weight:400;margin-right:6px}
.cm-on .cm-step{animation:rise .5s forwards}
.cm-on .cm-step:nth-child(1){animation-delay:.2s}.cm-on .cm-step:nth-child(2){animation-delay:.8s}
.cm-on .cm-step:nth-child(3){animation-delay:1.4s}.cm-on .cm-step:nth-child(4){animation-delay:2s}
.cm-line{position:absolute;left:5%;right:5%;top:41%;height:2px;background:linear-gradient(90deg,var(--hl),#6d28d9);transform-origin:left;transform:scaleX(0)}
.cm-on .cm-line{animation:grow 2.2s .2s forwards}
.cm-result{position:absolute;left:5%;right:5%;bottom:8%;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;color:#f4f4f5;opacity:0}
.cm-on .cm-result{animation:pop .6s 2.8s forwards}
.cm-result .cm-k{font-family:var(--mono);font-size:clamp(8px,1.1vw,11px);letter-spacing:.14em;text-transform:uppercase;color:#a1a1aa}
.cm-result .cm-v{font-family:var(--serif);font-weight:300;font-size:clamp(22px,4.4vw,46px);line-height:1}
.cm-result .cm-v em{font-style:normal;color:var(--hl)}
.cm-result .cm-u{font-size:clamp(9px,1.2vw,12px);color:#a1a1aa}

@keyframes slidein{from{transform:translateX(8%);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(167,139,250,.35)}}
@keyframes ripple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes fade{from{opacity:0}}

/* caption + controls */
.cm-caption{padding:18px 22px 6px;min-height:92px}
.cm-caption .cm-k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.cm-caption p{margin:6px 0 0;font-family:var(--serif);font-weight:300;font-size:clamp(17px,2.2vw,22px);line-height:1.3;text-wrap:balance}
.cm-bar{display:flex;align-items:center;gap:14px;padding:12px 18px 18px;flex-wrap:wrap}
.cm-dots{display:flex;gap:6px;flex:1 1 160px}
.cm-dot{flex:1;height:4px;border-radius:4px;border:0;padding:0;background:var(--line);opacity:.45;cursor:pointer;position:relative;overflow:hidden}
.cm-dot.cm-done{opacity:1;background:var(--accent)}
.cm-dot i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.cm-dot.cm-cur{opacity:1}
.cm-ctls{display:flex;gap:8px}
.cm-ctl{height:34px;min-width:34px;padding:0 12px;border-radius:999px;border:.5px solid var(--line);background:transparent;color:var(--fg);font:inherit;font-size:12px;cursor:pointer}
.cm-ctl[disabled]{opacity:.35;cursor:default}
.cm-ctl.cm-primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}

@media (max-width:600px){
  .cm-modal{padding:0}
  .cm-sheet{border-radius:0;height:100%;justify-content:center;border:0}
  .cm-stage{aspect-ratio:4/5}
  .cm-scene{display:flex;align-items:center}
  .cm-shot{position:relative;inset:auto;width:92%;margin:0 auto;aspect-ratio:16/9}
  .cm-path{inset:8% 5% 30%;grid-template-columns:repeat(2,minmax(0,1fr));gap:8% 5%}
  .cm-result{bottom:7%}
  .cm-line{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cm-scene *,.cm-scene{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}
}

/* v2: one slide per block */
.cm-s4b-shot{opacity:0}
.cm-on .cm-s4b-shot{animation:fadein .6s 4.2s forwards}
.cm-on .cm-s4b-hl1{animation:pop .5s 5s forwards}
.cm-on .cm-s4b-tag1{animation:pop .5s 5.3s forwards}
.cm-on .cm-s4b-tag2{animation:pop .5s 6.5s forwards}
@keyframes fadein{to{opacity:1}}
.cm-res{position:absolute;inset:12% 8%;display:flex;flex-direction:column;justify-content:center;gap:22px;color:#f4f4f5}
.cm-res .cm-k{font-family:var(--mono);font-size:clamp(9px,1.2vw,12px);letter-spacing:.16em;text-transform:uppercase;color:#a1a1aa}
.cm-row{display:grid;grid-template-columns:minmax(64px,110px) minmax(0,1fr) minmax(48px,auto);align-items:center;gap:14px}
.cm-row .cm-lab{font-family:var(--mono);font-size:clamp(9px,1.2vw,12px);color:#d4d4d8}
.cm-track{height:clamp(14px,2.6vw,26px);background:#1f1f23;border-radius:6px;overflow:hidden}
.cm-fill{height:100%;border-radius:6px;transform-origin:left;transform:scaleX(0)}
.cm-fill.cm-b{background:#52525b;width:45%}.cm-fill.cm-a{background:linear-gradient(90deg,#6d28d9,var(--hl));width:100%}
.cm-on .cm-fill.cm-b{animation:grow 1s .5s forwards}.cm-on .cm-fill.cm-a{animation:grow 1.4s 1.6s forwards}
.cm-row .cm-num{font-family:var(--serif);font-weight:300;font-size:clamp(20px,3.6vw,38px);line-height:1;font-variant-numeric:tabular-nums}
.cm-row.cm-after .cm-num{color:var(--hl)}
.cm-res .cm-src{font-family:var(--mono);font-size:clamp(9px,1.1vw,11px);color:#a1a1aa;opacity:0}
.cm-on .cm-res .cm-src{animation:fadein .5s 3.2s forwards}
.cm-single .cm-bar .cm-dots{flex:1 1 160px}

/* neutral alphabet scene */
.cm-neutral{position:absolute;inset:0;background:#dedede}
.cm-neutral svg{position:absolute;inset:0;width:100%;height:100%}
.cm-nb{opacity:0}
.cm-on .cm-nb1{animation:beat 6s .1s forwards}
.cm-on .cm-nb2{animation:beat 6s 6.2s forwards}
.cm-on .cm-nb3{animation:beatlast 7s 12.3s forwards}
@keyframes beat{0%{opacity:0}5%{opacity:1}94%{opacity:1}100%{opacity:0}}
@keyframes beatlast{0%{opacity:0}5%{opacity:1}100%{opacity:1}}
.cm-n-lab{font-family:var(--mono);font-size:26px;letter-spacing:4px;fill:#555}
.cm-n-h{font-family:var(--serif);font-weight:300;font-size:56px;fill:#222}
.cm-n-p{font-family:var(--mono);font-size:27px;fill:#444}
.cm-n-box{fill:#cfcfcf;stroke:#717171;stroke-width:1.5}
.cm-n-dash{fill:none;stroke:#717171;stroke-width:2;stroke-dasharray:10 8}
.cm-n-line{fill:none;stroke:#222;stroke-width:3;stroke-dasharray:900;stroke-dashoffset:900}
.cm-n-dot{fill:#222}
.cm-n-acc{fill:#2b4bd8}
.cm-n-q{font-family:var(--serif);font-size:90px;fill:#2b4bd8;opacity:0}
/* beat 1 */
.cm-on .cm-nb1 .cm-n-line{animation:draw 1.4s .8s forwards}
.cm-on .cm-nb1 .cm-n-dot{animation:b1dot 3.2s .8s forwards}
.cm-on .cm-nb1 .cm-n-q{animation:fadein .4s 3.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes b1dot{0%{transform:translate(0,0)}45%{transform:translate(560px,0)}70%{transform:translate(860px,-160px)}85%{transform:translate(800px,-120px)}100%{transform:translate(860px,-160px)}}
/* beat 2 */
.cm-n-chip{fill:#2b4bd8;opacity:0}
.cm-on .cm-nb2 .cm-n-chip{animation:chip 2.4s 7s forwards}
.cm-on .cm-nb2 .cm-n-chip.cm-c2{animation-delay:7.6s}.cm-on .cm-nb2 .cm-n-chip.cm-c3{animation-delay:8.2s}
@keyframes chip{0%{opacity:0}15%{opacity:1}30%{opacity:.4}45%{opacity:1}100%{opacity:1}}
/* beat 3 */
.cm-n-step{fill:#cfcfcf;stroke:#717171;stroke-width:1.5}
.cm-on .cm-nb3 .cm-n-dot{animation:climb 3.6s 13.2s steps(1,end) forwards}
@keyframes climb{0%{transform:translate(0,0)}20%{transform:translate(170px,-70px)}40%{transform:translate(340px,-140px)}60%{transform:translate(510px,-210px)}80%{transform:translate(680px,-280px)}100%{transform:translate(680px,-280px)}}

/* Problem slide text lives in HTML so it stays readable on phones. */
.cm-ntext{position:absolute;left:7.5%;right:7%;top:7%;display:flex;flex-direction:column;gap:6px}
.cm-ntext p{margin:0}
.cm-nlab{font-family:var(--mono);font-size:clamp(9px,1.1vw,12px);letter-spacing:.18em;text-transform:uppercase;color:#555}
.cm-nh{font-family:var(--serif);font-weight:300;font-size:clamp(20px,3vw,32px);line-height:1.1;color:#222}
.cm-np{font-family:var(--mono);font-size:clamp(12px,1.35vw,15px);line-height:1.5;color:#444;max-width:46ch}
@media (max-width:600px){
  .cm-neutral svg{top:auto;bottom:4%;height:62%}
}

/* Duo frame: two images side by side inside one frame. */
.cv2-frame.cv2-frame--duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:600px){.cv2-frame.cv2-frame--duo{grid-template-columns:1fr}}

/* ---- HealthTech neutral scenes ---- */
.cm-ht{position:absolute;inset:0;background:#dedede;overflow:hidden}
.cm-ht .cm-ntext{max-width:none}
.cm-ht .cm-np{max-width:58ch}
.cm-ht-area{position:absolute;left:6%;right:6%;top:40%;bottom:7%}
/* problem: gates before value */
.cm-ht-track{position:absolute;left:0;right:0;top:55%;height:2px;background:#222;transform-origin:left;transform:scaleX(0)}
.cm-on .cm-ht-track{animation:grow 1s .3s forwards}
.cm-ht-gate{position:absolute;top:55%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0}
.cm-ht-gate i{display:block;width:clamp(10px,1.2vw,16px);height:clamp(44px,7vw,84px);border:2px dashed #717171;border-radius:8px;background:#cfcfcf;transition:background .4s,border-color .4s}
.cm-ht-gate span{position:absolute;bottom:calc(50% + clamp(30px,4.4vw,52px));white-space:nowrap;font-family:var(--mono);font-size:clamp(9px,1.05vw,12px);color:#222;background:#cfcfcf;border:.5px solid #717171;border-radius:999px;padding:4px 10px}
.cm-on .cm-ht-gate{animation:fadein .4s forwards}
.cm-on .cm-ht-g1{animation-delay:.9s}.cm-on .cm-ht-g2{animation-delay:1.2s}.cm-on .cm-ht-g3{animation-delay:1.5s}
.cm-ht-value{position:absolute;right:0;top:55%;transform:translateY(-50%);padding:clamp(8px,1.2vw,14px) clamp(12px,1.8vw,22px);border:2px dashed #717171;border-radius:12px;font-family:var(--serif);font-size:clamp(14px,1.8vw,22px);color:#555;background:#d6d6d6;opacity:0}
.cm-on .cm-ht-value{animation:fadein .4s 1.8s forwards, valueOn .6s 10.6s forwards}
@keyframes valueOn{to{background:#2b4bd8;color:#fff;border-color:#2b4bd8;border-style:solid}}
.cm-ht-dot{position:absolute;top:55%;left:0;width:clamp(14px,1.6vw,22px);height:clamp(14px,1.6vw,22px);margin:calc(clamp(14px,1.6vw,22px)/-2) 0 0 calc(clamp(14px,1.6vw,22px)/-2);border-radius:50%;background:#222;opacity:0}
.cm-on .cm-ht-dot{animation:fadein .3s 2s forwards, htWalk 8.6s 2.2s forwards}
@keyframes htWalk{0%{left:0}12%{left:calc(25% - 2.4%)}26%{left:calc(25% - 2.4%)}36%{left:calc(48% - 2.4%)}52%{left:calc(48% - 2.4%)}62%{left:calc(71% - 2.4%)}80%{left:calc(71% - 2.4%)}100%{left:calc(100% - 9vw)}}
.cm-on .cm-ht-g1 i{animation:gateOpen .5s 4.2s forwards}
.cm-on .cm-ht-g2 i{animation:gateOpen .5s 6.4s forwards}
.cm-on .cm-ht-g3 i{animation:gateOpen .5s 8.8s forwards}
@keyframes gateOpen{to{background:transparent;border-color:rgba(113,113,113,.35)}}

/* approach: sort into cut / kept */
.cm-ht-col{position:absolute;top:0;font-family:var(--mono);font-size:clamp(9px,1.05vw,12px);letter-spacing:.18em;text-transform:uppercase;color:#555;opacity:0}
.cm-ht-col--cut{left:0}.cm-ht-col--kept{left:52%;color:#2b4bd8}
.cm-on .cm-ht-col{animation:fadein .4s 3.4s forwards, fadeoutK .5s 11.2s forwards}
.cm-ht-chip{position:absolute;left:var(--x0);top:var(--y0);width:46%;max-width:46%;font-family:var(--mono);font-size:clamp(9px,1.05vw,12.5px);line-height:1.3;color:#222;background:#cfcfcf;border:.5px solid #717171;border-radius:10px;padding:clamp(5px,.7vw,8px) clamp(8px,1vw,12px);opacity:0}
.cm-on .cm-ht-chip{animation:fadein .4s .6s forwards, sortTo 1.1s cubic-bezier(.2,.9,.2,1) 3.6s forwards, fadeoutK .5s 11.2s forwards}
.cm-ht-chip.is-cut{--c:#9a9a9a}
.cm-on .cm-ht-chip.is-cut{animation:fadein .4s .6s forwards, sortTo 1.1s cubic-bezier(.2,.9,.2,1) 3.6s forwards, cutOff .5s 5.2s forwards, fadeoutK .5s 11.2s forwards}
.cm-on .cm-ht-chip.is-kept{animation:fadein .4s .6s forwards, sortTo 1.1s cubic-bezier(.2,.9,.2,1) 3.6s forwards, keepOn .5s 5.4s forwards, fadeoutK .5s 11.2s forwards}
@keyframes sortTo{to{left:var(--x1);top:var(--y1)}}
@keyframes cutOff{to{color:#8a8a8a;text-decoration:line-through;background:transparent;border-style:dashed}}
@keyframes keepOn{to{border-color:#2b4bd8;box-shadow:inset 3px 0 0 #2b4bd8;background:#e6e9f7}}
@keyframes fadeoutK{to{opacity:0}}
/* approach effect: guided path */
.cm-ht-path{position:absolute;inset:0;opacity:0}
.cm-on .cm-ht-path{animation:fadein .5s 11.8s forwards}
.cm-ht-path .cm-ht-track{animation:none;transform:none;top:55%}
.cm-ht-step{position:absolute;top:55%;width:clamp(10px,1.2vw,14px);height:clamp(10px,1.2vw,14px);margin:calc(clamp(10px,1.2vw,14px)/-2) 0 0 calc(clamp(10px,1.2vw,14px)/-2);border-radius:50%;background:#dedede;border:2px solid #222}
.cm-ht-path .cm-ht-value{opacity:1;animation:none}
.cm-on .cm-ht-path .cm-ht-value{animation:valueOn .5s 14.4s forwards}
.cm-on .cm-ht-path .cm-ht-dot{animation:fadein .3s 12.2s forwards, htGlide 2.2s ease-in-out 12.4s forwards}
@keyframes htGlide{to{left:calc(100% - 9vw)}}
.cm-ht-tagline{position:absolute;left:0;top:78%;font-family:var(--mono);font-size:clamp(9px,1.1vw,13px);color:#222;opacity:0}
.cm-on .cm-ht-tagline{animation:fadein .5s 13s forwards}
/* beat text swap for approach */
.cm-ht .cm-ntext.cm-ht-t2{opacity:0}
.cm-on .cm-ht .cm-ntext.cm-ht-t1{animation:fadeoutK .4s 11.2s forwards}
.cm-on .cm-ht .cm-ntext.cm-ht-t2{animation:fadein .5s 11.6s forwards}
.cm-ht .cm-ntext{opacity:1}
@media (max-width:600px){
  .cm-ht-area{top:44%;left:5%;right:5%}
  .cm-ht-chip{width:47%;max-width:47%}
  /* Labels never overlap: wrap, and alternate above / below the line. */
  .cm-ht-gate span{white-space:normal;text-align:center;width:max-content;max-width:26vw;line-height:1.25;padding:4px 8px}
  .cm-ht-g2 span{bottom:auto;top:calc(50% + clamp(30px,4.4vw,52px))}
}

/* ---- CareCru Enterprise Management neutral scenes ---- */
.cm-em{position:absolute;inset:0;background:#dedede;overflow:hidden}
.cm-em .cm-np{max-width:60ch}
.cm-em-area{position:absolute;left:6%;right:6%;top:40%;bottom:6%}
.cm-em-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cm-em-svg line,.cm-em-svg path{stroke:#222;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.cm-on .cm-em-svg .d1{animation:emDraw .6s .7s forwards}
.cm-on .cm-em-svg .d2{animation:emDraw .6s 1.3s forwards}
@keyframes emDraw{to{stroke-dashoffset:0}}
.cm-em-node{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:clamp(9px,1.05vw,12.5px);line-height:1.25;white-space:nowrap;color:#222;background:#cfcfcf;border:.5px solid #717171;border-radius:10px;padding:clamp(5px,.7vw,8px) clamp(8px,1.1vw,14px);opacity:0}
.cm-em-node.is-top{font-family:var(--serif);font-size:clamp(13px,1.6vw,19px);background:#e6e6e6}
.cm-on .cm-em-n0{animation:fadein .4s .3s forwards}
.cm-on .cm-em-n1{animation:fadein .4s .9s forwards}
.cm-on .cm-em-n2{animation:fadein .4s 1.5s forwards}
.cm-em-chip{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:clamp(9px,1vw,12px);white-space:nowrap;color:#fff;background:#2b4bd8;border-radius:999px;padding:3px 10px;opacity:0;z-index:2}

/* 1 · hierarchy: one role, adjustable at every level */
.cm-em-legend{position:absolute;left:0;top:0;transform:none}
.cm-on .cm-em-legend{animation:fadein .3s 2.8s forwards}
.cm-on .cm-em-pick1{animation:fadein .4s .3s forwards, emPick 1.6s 3.2s}
.cm-on .cm-em-pick2{animation:fadein .4s .9s forwards, emPick 1.6s 5s}
.cm-on .cm-em-pick3{animation:fadein .4s 1.5s forwards, emPick 4s 6.8s forwards}
@keyframes emPick{0%,100%{background:#2b4bd8;color:#fff;border-color:#2b4bd8}}
.cm-em-lvl{position:absolute;right:0;font-family:var(--mono);font-size:clamp(8px,.95vw,11px);letter-spacing:.14em;text-transform:uppercase;color:#555;transform:translateY(-50%);opacity:0}
.cm-on .cm-em-lvl{animation:fadein .4s 2s forwards}

/* 2 · permissions: no access means not visible */
.cm-em-b{opacity:1}
.cm-on .cm-em-hide{animation:emHide .8s 3.2s forwards}
@keyframes emHide{to{opacity:.06}}
.cm-em-ghost{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:clamp(9px,1vw,12px);color:#555;border:1.5px dashed #717171;border-radius:10px;padding:4px 10px;white-space:nowrap;opacity:0}
.cm-on .cm-em-ghost{animation:fadein .4s 4s forwards}
.cm-on .cm-em-you{animation:fadein .3s 1.8s forwards}
.cm-em-beat1{position:absolute;inset:0}
.cm-on .cm-em-beat1{animation:fadeoutK .5s 7.4s forwards}
.cm-em-beat2{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6%;align-content:center;opacity:0}
.cm-on .cm-em-beat2{animation:fadein .5s 8s forwards}
.cm-em-view{display:flex;flex-direction:column;gap:10px;min-width:0}
.cm-em-view p{margin:0;font-family:var(--mono);font-size:clamp(9px,1vw,12px);letter-spacing:.12em;text-transform:uppercase;color:#555}
.cm-em-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border:.5px solid #717171;border-radius:12px;background:#cfcfcf;padding:10px}
.cm-em-btn{font-family:var(--mono);font-size:clamp(9px,1vw,12px);white-space:nowrap;border:.5px solid #717171;border-radius:8px;padding:5px 10px;background:#e6e6e6;color:#222}
.cm-em-btn.is-ent{background:#2b4bd8;border-color:#2b4bd8;color:#fff;opacity:0}
.cm-on .cm-em-btn.is-ent{animation:fadein .4s 9.2s forwards}
.cm-em-btn.is-off{background:transparent;border-style:dashed;color:#8a8a8a;text-decoration:line-through;opacity:0}
.cm-on .cm-em-btn.is-off{animation:fadein .4s 9.6s forwards}

/* 3 · migration: roles mapped first, carried over, then refined */
.cm-em-sys{position:absolute;top:0;bottom:12%;width:36%;border:.5px solid #717171;border-radius:16px;background:#d4d4d4}
.cm-em-sys.is-old{left:0;z-index:2}
.cm-em-area{container-type:inline-size}
.cm-em-rows{position:absolute;inset:clamp(30px,3.4vw,40px) clamp(10px,1.4vw,16px) clamp(10px,1.4vw,16px);display:flex;flex-direction:column;justify-content:space-evenly;gap:8px}.cm-em-sys.is-new{right:0;background:#e6e6e6}
.cm-em-sys b{position:absolute;left:12px;top:10px;font-family:var(--mono);font-weight:400;font-size:clamp(9px,1vw,12px);letter-spacing:.14em;text-transform:uppercase;color:#555}
.cm-em-row{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:clamp(9px,1vw,12px);color:#222;background:#cfcfcf;border:.5px solid #717171;border-radius:12px;padding:7px 8px 7px 12px;opacity:0}
.cm-em-row i{font-style:normal;color:#fff;background:#2b4bd8;border-radius:999px;padding:2px 9px;white-space:nowrap;line-height:1.3}
.cm-on .cm-em-row{animation:fadein .4s .5s forwards, emMove 1.4s cubic-bezier(.2,.9,.2,1) var(--t) forwards}
@keyframes emMove{to{transform:translateX(64cqw)}}
.cm-em-check{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:clamp(9px,1vw,12px);white-space:nowrap;color:#222;background:#e6e6e6;border:.5px solid #717171;border-radius:999px;padding:4px 10px;opacity:0}
.cm-on .cm-em-check{animation:fadein .4s 1.4s forwards, fadeoutK .4s 3.2s forwards}
.cm-on .cm-em-adj i{animation:emAdj .5s 8.2s forwards}
@keyframes emAdj{to{background:#222}}
.cm-em-adjtag{position:absolute;right:0;bottom:0;font-family:var(--mono);font-size:clamp(9px,1vw,12px);color:#222;opacity:0}
.cm-on .cm-em-adjtag{animation:fadein .4s 8.4s forwards}

/* 4 · EM sync toggle */
.cm-em-svc{position:absolute;top:18%;bottom:18%;width:34%;border:.5px solid #717171;border-radius:16px;background:#e6e6e6}
.cm-em-svc.is-ccp{left:0}.cm-em-svc.is-em{right:0}
.cm-em-svc b{position:absolute;left:12px;top:10px;font-family:var(--mono);font-weight:400;font-size:clamp(9px,1vw,12px);letter-spacing:.14em;text-transform:uppercase;color:#555}
.cm-em-data{position:absolute;width:clamp(8px,1vw,12px);height:clamp(8px,1vw,12px);border-radius:3px;background:#222}
.cm-em-svc .cm-em-data{opacity:1}
.cm-em-svc.is-em .cm-em-data{opacity:0}
.cm-on .cm-em-svc.is-em .cm-em-data{animation:fadein .2s var(--t) forwards}
.cm-em-toggle{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:clamp(9px,1vw,12px);color:#222;white-space:nowrap}
.cm-em-sw{position:relative;width:34px;height:18px;border-radius:999px;background:#9a9a9a}
.cm-em-sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.cm-on .cm-em-sw{animation:emSw 9.8s .6s forwards}
.cm-on .cm-em-sw::after{animation:emKnob 9.8s .6s forwards}
@keyframes emSw{0%{background:#9a9a9a}4%,74%{background:#2b4bd8}78%,100%{background:#9a9a9a}}
@keyframes emKnob{0%{left:2px}4%,74%{left:18px}78%,100%{left:2px}}
.cm-em-state{display:inline-block;min-width:3ch}
.cm-em-state::after{content:"OFF"}
.cm-on .cm-em-state::after{animation:emState 9.8s .6s forwards}
@keyframes emState{0%{content:"OFF"}4%,74%{content:"ON"}78%,100%{content:"OFF"}}
.cm-em-flow{position:absolute;left:36%;right:36%;top:var(--y);height:2px}
.cm-em-flow::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#717171 0 6px,transparent 6px 12px);opacity:.6}
.cm-em-pk{position:absolute;top:50%;width:clamp(8px,1vw,12px);height:clamp(8px,1vw,12px);margin-top:calc(clamp(8px,1vw,12px)/-2);border-radius:3px;background:#2b4bd8;opacity:0}
.cm-on .cm-em-pk.r{animation:emR 1.1s var(--t) both}
.cm-on .cm-em-pk.l{animation:emL 1.1s var(--t) both}
@keyframes emR{0%{left:0;opacity:1}100%{left:100%;opacity:1}}
@keyframes emL{0%{left:100%;opacity:1}100%{left:0;opacity:1}}
.cm-em-note{position:absolute;left:50%;transform:translateX(-50%);bottom:0;font-family:var(--mono);font-size:clamp(9px,1vw,12px);color:#222;white-space:nowrap;opacity:0}
.cm-on .cm-em-note.n1{animation:fadein .3s 1.2s forwards, fadeoutK .3s 4s forwards}
.cm-on .cm-em-note.n2{animation:fadein .3s 4.4s forwards, fadeoutK .3s 7.6s forwards}
.cm-on .cm-em-note.n3{animation:fadein .3s 8.4s forwards}
.cm-em-blink{animation:none}
.cm-on .cm-em-svc.is-ccp .cm-em-data.chg{animation:emChg .6s 5.2s forwards}
.cm-on .cm-em-svc.is-em .cm-em-data.chg2{animation:fadein .2s var(--t) forwards, emChg .6s 4.6s forwards}
@keyframes emChg{to{background:#2b4bd8}}

@media (max-width:600px){
  .cm-em-area{top:54%;left:5%;right:5%}
  .cm-em-node{padding:4px 7px}
  .cm-em-lvl{display:none}
  .cm-em-beat2{grid-template-columns:1fr;gap:14px}
  .cm-em-row{font-size:9px;padding:5px 6px;justify-content:center}
  .cm-em-rows{inset:26px 8px 8px;gap:6px}
  .cm-em-u{display:none}
  .cm-em-sys b{top:6px;left:10px}
  .cm-em-sys,.cm-em-svc{width:40%}
  @keyframes emMove{to{transform:translateX(60cqw)}}
  .cm-em-flow{left:40%;right:40%}
  .cm-em-note{white-space:normal;text-align:center;width:90%}
  .cm-em-toggle{top:-4%}
  .cm-em-check{top:-17%;transform:translateX(-50%)}
  .cm-em-sys{top:2%;bottom:12%}
  .cm-em-legend{top:-6%}
  .cm-em-svc{bottom:26%}
  .cm-em-flow{top:calc(var(--y) - 6%)}
}

/* ---- Serpentime neutral scene: list becomes a path ---- */
.cm-sp{position:absolute;inset:0;background:#dedede;overflow:hidden}
.cm-sp .cm-ntext{transition:none}
.cm-sp .cm-sp-t2{opacity:0}
.cm-on .cm-sp .cm-sp-t1{animation:fadeoutK .4s 5.4s forwards}
.cm-on .cm-sp .cm-sp-t2{animation:fadein .5s 5.8s forwards}
.cm-sp-area{position:absolute;left:6%;right:6%;top:42%;bottom:7%;container-type:inline-size}
.cm-sp-row{position:absolute;left:var(--x0);top:var(--y0);width:58%;height:15%;display:flex;align-items:center;gap:8px;padding:0 10px;border:.5px solid #717171;border-radius:8px;background:#cfcfcf;opacity:0;font-family:var(--mono);font-size:clamp(9px,1vw,12px);color:#222;overflow:hidden;white-space:nowrap}
.cm-sp-row::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid #717171;border-radius:2px}
.cm-on .cm-sp-row{animation:fadein .3s var(--d) forwards, spToNode 1.2s cubic-bezier(.2,.9,.2,1) 5.6s forwards}
@keyframes spToNode{to{left:calc(var(--x1) - 9px);top:calc(var(--y1) - 9px);width:18px;height:18px;padding:0;border-radius:50%;background:#222;border-color:#222;color:transparent;gap:0}}
.cm-sp-row span{transition:none}
.cm-sp-setup{position:absolute;left:64%;width:36%;height:12%;border:1.5px dashed #717171;border-radius:8px;font-family:var(--mono);font-size:clamp(9px,1vw,12px);color:#555;display:flex;align-items:center;padding:0 10px;opacity:0;white-space:nowrap;overflow:hidden}
.cm-on .cm-sp-setup{animation:fadein .3s var(--d) forwards, fadeoutK .4s 5.4s forwards}
.cm-sp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cm-sp-svg path{fill:none;stroke:#222;stroke-width:2;vector-effect:non-scaling-stroke}
.cm-sp-svg{clip-path:inset(0 100% 0 0)}
.cm-on .cm-sp-svg{animation:spReveal 1.4s ease-in-out 6.2s forwards}
@keyframes spReveal{to{clip-path:inset(0 0 0 0)}}
.cm-on .cm-sp-row::before{animation:fadeoutK .3s 5.6s forwards}
.cm-sp-touch{position:absolute;left:calc(54% - 22px);top:calc(56.5% - 22px);width:44px;height:44px;border-radius:50%;border:2px solid #2b4bd8;background:rgba(43,75,216,.12);opacity:0}
.cm-on .cm-sp-touch{animation:fadein .3s 8.2s forwards, spDrag 2.4s ease-in-out 8.6s forwards}
@keyframes spDrag{50%{transform:translateY(-22%)}100%{transform:translateY(0)}}
.cm-sp-ring{position:absolute;left:calc(54% - 9px);top:calc(56.5% - 9px);width:18px;height:18px;border-radius:50%;border:2px solid #2b4bd8;opacity:0}
.cm-on .cm-sp-ring{animation:spRing .9s 8.4s 2}
@keyframes spRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.cm-sp-tag{position:absolute;font-family:var(--mono);font-size:clamp(9px,1vw,12px);white-space:nowrap;color:#fff;background:#2b4bd8;border-radius:999px;padding:3px 10px;opacity:0}
.cm-on .cm-sp-tag.g{animation:fadein .3s 8.6s forwards}
.cm-on .cm-sp-tag.h{animation:fadein .3s 9.4s forwards}
@media (max-width:600px){
  .cm-sp-area{top:52%;left:5%;right:5%}
  .cm-sp-row{width:56%}
  .cm-sp-setup{left:62%;width:38%}
}

/* ---- HealthTech / Facelift v1.5 neutral scenes ---- */
.cm-fl{position:absolute;inset:0;background:#dedede;overflow:hidden}
.cm-fl-area{position:absolute;left:6%;right:6%;top:40%;bottom:7%}
.cm-fl-lab{font-family:var(--mono);font-size:clamp(9px,1vw,12px);letter-spacing:.14em;text-transform:uppercase;color:#555;margin:0}
.cm-fl-box{position:absolute;border:.5px solid #717171;border-radius:12px;background:#e6e6e6}
.cm-fl-box>.cm-fl-lab{position:absolute;left:10px;top:6px}
.cm-fl-chip{position:absolute;font-family:var(--mono);font-size:clamp(9px,1vw,12px);line-height:1.2;color:#222;background:#cfcfcf;border:.5px solid #717171;border-radius:999px;padding:4px 10px;white-space:nowrap;text-align:center}
.cm-fl .cm-ntext.cm-fl-t2{opacity:0}
.cm-fl-b1,.cm-fl-b2,.cm-fl-b3{position:absolute;inset:0}
.cm-fl-b2,.cm-fl-b3{opacity:0}

/* 1 · audit */
.cm-fl-map{position:absolute;inset:0 0 8% 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,1fr);gap:clamp(6px,1vw,12px)}
.cm-fl-pg{border:.5px solid #717171;border-radius:8px;background:#cfcfcf;display:flex;align-items:center;justify-content:center;padding:4px;font-family:var(--mono);font-size:clamp(9px,1vw,12px);line-height:1.2;color:transparent;text-align:center;opacity:0}
.cm-on .cm-fl-pg{animation:fadein .25s var(--d) forwards}
.cm-on .cm-fl-pg.is-core{animation:fadein .25s var(--d) forwards, flCore .5s 2.6s forwards}
@keyframes flCore{to{background:#2b4bd8;border-color:#2b4bd8;color:#fff}}
.cm-on .cm-fl-audit .cm-fl-b1{animation:fadeoutK .4s 6s forwards}
.cm-on .cm-fl-audit .cm-fl-b2{animation:fadein .4s 6.4s forwards}
.cm-on .cm-fl-audit .cm-ntext.cm-fl-t1{animation:fadeoutK .4s 6s forwards}
.cm-on .cm-fl-audit .cm-ntext.cm-fl-t2{animation:fadein .4s 6.4s forwards}
.cm-fl-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%}
.cm-fl-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.cm-fl-col .cm-fl-lab{margin-bottom:4px}
.cm-fl-it{height:clamp(12px,1.6vw,20px);border-radius:6px;background:#cfcfcf;border:.5px solid #717171;opacity:0;width:var(--w,100%)}
.cm-fl-it.sw{width:clamp(14px,1.8vw,22px);height:clamp(14px,1.8vw,22px);border-radius:50%;display:inline-block}
.cm-fl-sws{display:flex;flex-wrap:wrap;gap:8px}
.cm-on .cm-fl-it{animation:fadein .3s var(--d) forwards}
.cm-fl-it.pill{border-radius:999px}
/* component = pill, state = diamond */
.cm-fl-col>.cm-fl-it{border-radius:999px}
.cm-fl-dms{display:flex;flex-wrap:wrap;gap:12px;padding:3px}
.cm-fl-it.dm{width:clamp(11px,1.4vw,16px);height:clamp(11px,1.4vw,16px);border-radius:2px;transform:rotate(45deg);display:inline-block;flex:none}
.cm-fl-dmk{display:inline-block;width:8px;height:8px;margin-right:8px;background:#fff;transform:rotate(45deg);border-radius:1px;flex:none}
.cm-fl-btn{border-radius:999px!important}
.cm-fl-tile .cm-fl-mini{background:#2b4bd8;border-radius:999px;width:80%;flex:none}

/* 2 · design decisions */
.cm-fl-aa{position:absolute;left:0;top:0;width:40%;height:70%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:.5px solid #717171;border-radius:12px;background:#e6e6e6}
.cm-fl-aa b{position:relative;display:block;height:1.1em;font-weight:400;font-size:clamp(34px,6vw,72px);line-height:1;color:#222;width:2.2ch;text-align:center}
.cm-fl-aa b span{position:absolute;inset:0}
.cm-fl-aa .f-old{font-family:"Courier New",Courier,monospace;font-style:italic}
.cm-fl-aa .f-new{font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:500;opacity:0}
.cm-fl-aa i{position:relative;display:block;height:1.4em;width:100%;font-style:normal}
.cm-fl-aa i span{position:absolute;inset:0;text-align:center;font-family:var(--mono);font-size:clamp(9px,1vw,12px);color:#555}
.cm-fl-aa i .f-new{opacity:0;color:#2b4bd8}
.cm-on .cm-fl-design .cm-fl-aa .f-old{animation:fadeoutK .4s 2.4s forwards}
.cm-on .cm-fl-design .cm-fl-aa .f-new{animation:fadein .4s 2.6s forwards}
.cm-fl-btns{position:absolute;left:48%;right:0;top:0;height:70%;display:flex;flex-direction:column;justify-content:space-between}
.cm-fl-btn{display:flex;align-items:center;justify-content:center;height:26%;border-radius:10px;font-family:var(--mono);font-size:clamp(9px,1vw,12px);color:#fff;background:var(--c0);border:0;transition:none}
.cm-on .cm-fl-btn{animation:flBtn .5s var(--d) forwards}
@keyframes flBtn{to{background:var(--c1)}}
.cm-fl-swrow{position:absolute;left:48%;right:0;top:80%;display:flex;gap:8px;justify-content:space-between}
.cm-fl-swrow span{flex:1;height:clamp(14px,2vw,24px);border-radius:6px;opacity:0}
.cm-on .cm-fl-swrow span{animation:fadein .3s var(--d) forwards}
.cm-fl-swlab{position:absolute;left:0;top:80%;width:40%;text-align:center;opacity:0}
.cm-on .cm-fl-swlab{animation:fadein .3s 4s forwards}
.cm-on .cm-fl-design .cm-fl-b1{animation:fadeoutK .4s 8.6s forwards}
.cm-on .cm-fl-design .cm-fl-b2{animation:fadein .5s 9s forwards}
.cm-fl-tile{position:absolute;left:0;right:0;top:0;bottom:0;border:.5px solid #717171;border-radius:16px;background:#e6e6e6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;padding:clamp(12px,2vw,24px)}
.cm-fl-tile>div{display:flex;flex-direction:column;gap:10px;min-width:0}
.cm-fl-mini{height:clamp(14px,1.8vw,22px);border-radius:6px}
.cm-fl-tile .cm-fl-type{font-family:"Inter",system-ui,sans-serif;font-weight:500;font-size:clamp(22px,3.4vw,40px);line-height:1;color:#222}

/* 3 · foundation */
.cm-fl-page{position:absolute;top:0;height:44%;width:30%;border:.5px solid #717171;border-radius:10px;background:#e6e6e6;overflow:hidden}
.cm-fl-page::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:#9a9a9a}
.cm-on .cm-fl-page::before{animation:flSkin .5s 6.6s forwards}
@keyframes flSkin{to{background:#2b4bd8}}
.cm-fl-style{position:absolute;left:var(--x0);top:var(--y0);font-family:var(--mono);font-size:9px;line-height:1;color:#222;background:#f0c27b;border:.5px solid #717171;border-radius:4px;padding:3px 6px;white-space:nowrap;z-index:2}
.cm-on .cm-fl-style{animation:flStyle 1.2s cubic-bezier(.2,.9,.2,1) var(--d) forwards}
@keyframes flStyle{to{left:var(--x1);top:var(--y1);background:#cfcfcf}}
.cm-fl-sheet{left:20%;width:60%;top:60%;bottom:0}
.cm-fl-tog{position:absolute;right:10px;top:6px;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:clamp(9px,1vw,12px);color:#222;white-space:nowrap}
.cm-fl-sw{position:relative;width:30px;height:16px;border-radius:999px;background:#9a9a9a}
.cm-fl-sw::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff}
.cm-on .cm-fl-sw{animation:flSw .3s 6.2s forwards}
.cm-on .cm-fl-sw::after{animation:flKnob .3s 6.2s forwards}
@keyframes flSw{to{background:#2b4bd8}}
@keyframes flKnob{to{left:16px}}

/* 4 · component library */
.cm-fl-shelf{left:0;right:0;top:0;height:36%}
.cm-fl-flow{top:48%;height:52%;width:30%}
.cm-fl-lib .cm-fl-chip{width:22%;padding:5px 4px}
.cm-fl-chip.is-acc{background:#2b4bd8;border-color:#2b4bd8;color:#fff}
.cm-fl-tag{position:absolute;font-family:var(--mono);font-size:clamp(8px,.9vw,11px);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:#2b4bd8;opacity:0}
.cm-on .cm-fl-card1{animation:fadein .3s 2.4s forwards, flPromote 1.2s cubic-bezier(.2,.9,.2,1) 8s forwards}
.cm-fl-card1,.cm-fl-card2,.cm-fl-card3{opacity:0}
@keyframes flPromote{to{left:74%;top:16%}}
.cm-on .cm-fl-card2{animation:fadein .3s 4.6s forwards, fadeoutK .4s 7.4s forwards}
.cm-on .cm-fl-card3{animation:fadein .3s 5.6s forwards, fadeoutK .4s 7.4s forwards}
.cm-on .cm-fl-tag.local{animation:fadein .3s 2.8s forwards, fadeoutK .3s 7.6s forwards}
.cm-on .cm-fl-tag.used{animation:fadein .3s 6.2s forwards, fadeoutK .3s 7.6s forwards}
.cm-on .cm-fl-tag.glob{animation:fadein .3s 9.4s forwards}
.cm-fl-atoms .cm-fl-chip{opacity:0}
.cm-on .cm-fl-atoms .cm-fl-chip{animation:fadein .3s var(--d) forwards}
.cm-fl-shelf .cm-fl-lab,.cm-fl-flow .cm-fl-lab{opacity:1}

@media (max-width:600px){
  .cm-fl-area{top:54%;left:5%;right:5%}
  .cm-fl-pg{font-size:8.5px}
  .cm-fl-lib .cm-fl-chip{font-size:8.5px}
  .cm-fl-tile{grid-template-columns:1fr;gap:8px}
  .cm-fl-tile>div{flex-direction:row;align-items:center;gap:8px}
  .cm-fl-tile .cm-fl-lab{min-width:30%}
  .cm-fl-tog .cm-fl-tl{display:none}
  .cm-fl-tile .cm-fl-mini{width:28%}
  .cm-fl-tile .cm-fl-dms{flex-wrap:nowrap;gap:10px}
}

/* visual alphabet: component = pill, state = diamond */
.cm-dmk{display:inline-block;width:7px;height:7px;margin-right:7px;background:currentColor;transform:rotate(45deg);border-radius:1px;flex:none;vertical-align:middle}
.cm-em-btn{border-radius:999px}
.cm-sp-row{border-radius:999px;padding:0 14px}