/* Showcase scenes on /he/workshop/ (Adi 15 Oct: "super impressive, think charts,
   think visual, think big"). Three live scenes built from real material:
   Jimmy (his workout app, a real logged meal and Claude's real verdict),
   Klikz (the real 2024 family album: 9,893 photos -> 214 -> a printed book),
   and the bills dashboard (the /he/heshbonot/ sample numbers).
   Everything is sized in cqw so a scene scales with the frame. Animations run
   only on .is-play (site.js adds it when the slide plays on screen); without it
   every scene shows its end state, which is also what reduced motion gets. */

.sc-screens{container-type:inline-size}
.sc-scene{--out:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);--inout:cubic-bezier(.65,0,.35,1);overflow:hidden;background:#0b0b14}
.sc-scene *,.sc-scene *::before,.sc-scene *::after{box-sizing:border-box}
.sc-scene .sc-stage{position:absolute;inset:0}

/* ---------------------------------------------------------------- Jimmy */
.jm{direction:ltr;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:#f0f0f8;
  background:radial-gradient(70cqw 60cqw at 18% 38%,rgba(233,69,96,.32),transparent 70%),
             radial-gradient(60cqw 50cqw at 92% 92%,rgba(91,72,255,.22),transparent 70%),
             linear-gradient(160deg,#120d1f 0%,#0b0b14 55%,#07070d 100%)}
.jm-cond{font-family:'Bebas Neue','Avenir Next Condensed','Roboto Condensed','Arial Narrow',sans-serif;font-weight:700;font-stretch:condensed}
.jm-phone{position:absolute;left:6cqw;top:4.4cqw;width:40cqw;height:80cqw;border-radius:6.4cqw;background:#0b0b14;
  border:1cqw solid #1d1d30;box-shadow:0 4cqw 10cqw rgba(0,0,0,.65),0 0 0 .3cqw #34344f,inset 0 0 0 .2cqw #000;overflow:hidden}
.jm-notch{position:absolute;top:1.2cqw;left:50%;width:11cqw;height:2.8cqw;margin-left:-5.5cqw;border-radius:2cqw;background:#000;z-index:4}
.jm-screen{position:absolute;inset:0;padding:5.6cqw 2.4cqw 0;font-size:1.8cqw}
.jm-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.4cqw;border-bottom:.2cqw solid #252540}
.jm-logo{color:#e94560;font-size:3.8cqw;letter-spacing:.14em;line-height:1}
.jm-target{font-size:1.35cqw;color:#7a7a9a;background:#1a1a30;border:.2cqw solid #252540;border-radius:3cqw;padding:.55cqw 1.2cqw;white-space:nowrap}
.jm-target em{font-style:normal;color:#e94560;font-weight:700}
.jm-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.9cqw;margin:1.8cqw 0}
.jm-tabs span{display:flex;flex-direction:column;align-items:center;padding:1cqw 0;border-radius:1.5cqw;color:#7a7a9a;font-size:1.3cqw;background:#13132a}
.jm-tabs b{font-size:2.6cqw;line-height:1}
.jm-tabs .on{background:#e94560;color:#fff;box-shadow:0 .8cqw 2.4cqw rgba(233,69,96,.45)}
.jm-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#1d1a36,#13132a);border:.2cqw solid #2a2a48;border-radius:2cqw;padding:1.8cqw 2cqw}
.jm-card::after{content:'';position:absolute;right:-4cqw;top:-5cqw;width:14cqw;height:14cqw;border-radius:50%;background:rgba(233,69,96,.2)}
.jm-card b{display:block;color:#e94560;font-size:5cqw;line-height:1}
.jm-card p{margin:.5cqw 0 0;font-weight:700;font-size:1.9cqw}
.jm-card small{color:#7a7a9a;font-size:1.3cqw}
.jm-prog{display:flex;justify-content:space-between;margin:1.8cqw 0 .8cqw;font-size:1.35cqw;color:#7a7a9a}
.jm-prog b{color:#f0f0f8}
.jm-bar{height:.9cqw;border-radius:1cqw;background:#252540;overflow:hidden}
.jm-bar i{display:block;height:100%;background:linear-gradient(90deg,#e94560,#ff8a9e);transform-origin:left;box-shadow:0 0 1.6cqw rgba(233,69,96,.8)}
.jm-sec{margin:2cqw 0 .9cqw;font-size:1.25cqw;letter-spacing:.1em;color:#e94560;font-weight:700}
.jm-list{list-style:none;margin:0;padding:0;display:grid;gap:.9cqw}
.jm-list li{display:flex;align-items:center;justify-content:space-between;gap:1cqw;background:#13132a;border:.2cqw solid #252540;border-radius:1.5cqw;padding:1.2cqw 1.4cqw}
.jm-list b{display:block;font-size:1.65cqw;white-space:nowrap}
.jm-list span{font-size:1.15cqw;color:#7a7a9a;white-space:nowrap}
.jm-list em{font-style:normal;color:#f0f0f8;font-weight:700}
.jm-chk{position:relative;flex:none;width:3.4cqw;height:3.4cqw;border-radius:50%;border:.25cqw solid #3a3a55}
.jm-chk::after{content:'';position:absolute;inset:-.25cqw;border-radius:50%;
  background:#2ecc71 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/62% no-repeat;
  box-shadow:0 0 1.6cqw rgba(46,204,113,.6)}
.jm-nav{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);padding:1.4cqw .6cqw 2.6cqw;background:#0f0f1d;border-top:.2cqw solid #252540;font-size:2.3cqw;text-align:center;line-height:1.1}
.jm-nav small{display:block;font-size:1.1cqw;color:#7a7a9a;margin-top:.3cqw}
.jm-nav .on small{color:#e94560}
.jm-fab{position:absolute;right:2.8cqw;bottom:10.4cqw;width:6.6cqw;height:6.6cqw;border-radius:50%;background:#e94560;color:#fff;font-size:4cqw;line-height:1;display:grid;place-items:center;box-shadow:0 1cqw 3cqw rgba(233,69,96,.6);z-index:3}
.jm-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:5;pointer-events:none}

/* right column: the two things worth reading, at a readable size */
.jm-call{position:absolute;left:50.5cqw;right:4cqw;background:linear-gradient(160deg,rgba(29,26,54,.94),rgba(17,17,36,.94));
  border:.25cqw solid rgba(255,255,255,.08);border-radius:2.8cqw;box-shadow:0 3cqw 7cqw rgba(0,0,0,.55),inset 0 .2cqw 0 rgba(255,255,255,.05)}
.jm-c1{top:5cqw;padding:2.4cqw 2.8cqw;display:flex;align-items:center;gap:2.8cqw}
.jm-ring{position:relative;flex:none;width:15.5cqw;height:15.5cqw;filter:drop-shadow(0 0 1.8cqw rgba(233,69,96,.55))}
.jm-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.jm-ring circle{fill:none;stroke-width:3.6}
.jm-ring .tr{stroke:#252540}
.jm-ring .fg{stroke:url(#jmGrad);stroke-linecap:round;stroke-dasharray:100 100}
.jm-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:5.6cqw;line-height:1;color:#fff}
.jm-ring b small{font-size:.5em;color:#7a7a9a}
.jm-c1 p{margin:0;font-size:max(1.9cqw,9px);color:#9a9ab8;letter-spacing:.12em}
.jm-c1 strong{display:block;margin:.5cqw 0 .9cqw;font-size:max(3.4cqw,13px);line-height:1.15}
.jm-c1 .jm-pill{display:inline-flex;gap:.8cqw;align-items:center;font-size:max(1.8cqw,9px);color:#2ecc71;background:rgba(46,204,113,.12);border-radius:3cqw;padding:.6cqw 1.6cqw}
.jm-c2{top:28cqw;padding:2cqw}
.jm-shot{position:relative;height:23cqw;border-radius:1.8cqw;overflow:hidden;background:#1a1a30}
.sc-scene .jm-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.jm-scan{position:absolute;left:0;right:0;top:-35%;height:35%;background:linear-gradient(180deg,transparent,rgba(46,204,113,.55) 70%,rgba(255,255,255,.9) 72%,transparent 74%)}
.jm-ai{position:absolute;left:1.4cqw;bottom:1.4cqw;display:flex;align-items:center;gap:.8cqw;font-size:max(1.8cqw,9px);background:rgba(11,11,20,.82);color:#fff;padding:.7cqw 1.5cqw;border-radius:3cqw;opacity:0}
.jm-ai i{width:1.2cqw;height:1.2cqw;border-radius:50%;background:#2ecc71;box-shadow:0 0 1cqw #2ecc71}
.jm-c2 h4{margin:1.6cqw 0 1.1cqw;font-size:max(2.6cqw,11px);line-height:1.2}
.jm-c2 h4 small{display:block;font-weight:400;color:#9a9ab8;font-size:max(1.7cqw,8px);margin-bottom:.3cqw;letter-spacing:.08em}
.jm-flags{display:flex;flex-wrap:wrap;gap:1cqw}
.jm-flags span{font-size:max(2cqw,9px);padding:.6cqw 1.6cqw;border-radius:3cqw;font-weight:700}
.jm-flags .ok{background:rgba(46,204,113,.16);color:#3ee08a}
.jm-flags .bad{background:rgba(233,69,96,.18);color:#ff7b92}
.jm-scores{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw;margin-top:1.6cqw}
.jm-scores div{background:#1a1a30;border-radius:1.6cqw;padding:1.2cqw 1.5cqw}
.jm-scores span{display:flex;justify-content:space-between;align-items:baseline;font-size:max(1.7cqw,8px);color:#9a9ab8}
.jm-scores b{font-size:max(4.2cqw,15px);color:#fff;line-height:1}
.jm-scores b small{font-size:.5em;color:#7a7a9a}
.jm-scores i{display:block;height:.8cqw;margin-top:1cqw;border-radius:1cqw;background:#252540;overflow:hidden}
.jm-scores i::after{content:'';display:block;height:100%;width:calc(var(--v) * 10%);border-radius:inherit;background:linear-gradient(90deg,#e94560,#ffb86b);transform-origin:left}
.jm-scores div:nth-child(2) i::after{background:linear-gradient(90deg,#5b48ff,#2ecc71)}

.is-play .jm-phone{animation:jm-rise 1s var(--out) both}
.is-play .jm-c1{animation:jm-pop .8s var(--out) .45s both}
.is-play .jm-ring .fg{animation:jm-ring 2.3s var(--inout) .9s both}
.is-play .jm-bar i{animation:jm-bar 2.3s var(--inout) .9s both}
.is-play .jm-list li:nth-child(1) .jm-chk::after{animation:jm-tick .45s var(--spring) 1.25s both}
.is-play .jm-list li:nth-child(2) .jm-chk::after{animation:jm-tick .45s var(--spring) 1.8s both}
.is-play .jm-list li:nth-child(3) .jm-chk::after{animation:jm-tick .45s var(--spring) 2.35s both}
.is-play .jm-list li:nth-child(4) .jm-chk::after{animation:jm-tick .45s var(--spring) 2.9s both}
.is-play .jm-list li:nth-child(1){animation:jm-row .9s ease 1.2s both}
.is-play .jm-list li:nth-child(2){animation:jm-row .9s ease 1.75s both}
.is-play .jm-list li:nth-child(3){animation:jm-row .9s ease 2.3s both}
.is-play .jm-list li:nth-child(4){animation:jm-row .9s ease 2.85s both}
.is-play .jm-pill{animation:jm-chip .5s var(--spring) 3.2s both}
.is-play .jm-fab{animation:jm-tap .5s ease 3.5s both}
.is-play .jm-flash{animation:jm-flash .55s ease 3.75s both}
.is-play .jm-c2{animation:jm-fly .9s var(--out) 3.9s both}
.is-play .jm-scan{animation:jm-scan 1.05s var(--inout) 4.6s 2 both}
.is-play .jm-ai{animation:jm-ai 2.6s linear 4.4s both}
.is-play .jm-c2 h4{animation:jm-in .5s var(--out) 6.4s both}
.is-play .jm-flags span:nth-child(1){animation:jm-chip .55s var(--spring) 6.7s both}
.is-play .jm-flags span:nth-child(2){animation:jm-chip .55s var(--spring) 7s both}
.is-play .jm-scores div{animation:jm-in .5s var(--out) 7.3s both}
.is-play .jm-scores div:nth-child(2){animation-delay:7.45s}
.is-play .jm-scores i::after{animation:jm-bar 1s var(--out) 7.6s both}
@keyframes jm-rise{from{opacity:0;transform:translateY(9cqw) scale(.93) rotate(-2deg)}}
@keyframes jm-pop{from{opacity:0;transform:translateY(3cqw) scale(.9)}}
@keyframes jm-fly{from{opacity:0;transform:translate(-22cqw,22cqw) scale(.35) rotate(-6deg)}}
@keyframes jm-ring{from{stroke-dasharray:0 100}}
@keyframes jm-bar{from{transform:scaleX(0)}}
@keyframes jm-tick{from{transform:scale(0);opacity:0}}
@keyframes jm-row{30%{border-color:#2ecc71;background:#152a24}}
@keyframes jm-tap{50%{transform:scale(.8);box-shadow:0 0 0 2cqw rgba(233,69,96,.25)}}
@keyframes jm-flash{0%{opacity:0}25%{opacity:.9}100%{opacity:0}}
@keyframes jm-scan{from{top:-35%}to{top:100%}}
@keyframes jm-ai{0%{opacity:0}8%,86%{opacity:1}100%{opacity:0}}
@keyframes jm-in{from{opacity:0;transform:translateY(1.6cqw)}}
@keyframes jm-chip{from{opacity:0;transform:scale(.5)}}

/* ---------------------------------------------------------------- Klikz */
.kz{direction:ltr;background:radial-gradient(80cqw 55cqw at 50% 18%,#fffaf2 0%,rgba(255,250,242,0) 70%),linear-gradient(180deg,#efe8dc,#ddd3c4);font-family:-apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif}
.kz-lib{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;opacity:0}
.kz-bar{flex:none;display:flex;align-items:center;gap:2cqw;height:7.4cqw;padding:0 3cqw;background:#f5f5f4;border-bottom:.2cqw solid #e3e3e1;color:#1d1d1f;font-size:max(2.3cqw,9px)}
.kz-dots{display:flex;gap:1cqw}
.kz-dots i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#ff5f57}
.kz-dots i:nth-child(2){background:#febc2e}.kz-dots i:nth-child(3){background:#28c840}
.kz-bar b{font-size:max(2.7cqw,10px)}
.kz-n{margin-left:auto;color:#6e6e73;font-variant-numeric:tabular-nums}
.kz-n b{color:#1d1d1f;font-size:inherit}
.kz-wrap{position:relative;flex:1;overflow:hidden}
.kz-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.35cqw;padding:.35cqw}
.kz-grid i{position:relative;aspect-ratio:1;background:url(/img/showcase/klikz-lib.webp) 0 0/1000% 1000% no-repeat #ddd;
  background-position:calc(var(--x) * 11.111%) calc(var(--y) * 11.111%)}
.kz-grid i.pick::after{content:'';position:absolute;right:.5cqw;bottom:.5cqw;width:2.6cqw;height:2.6cqw;border-radius:50%;
  background:#0a84ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/64% no-repeat;
  box-shadow:0 0 0 .3cqw #fff;opacity:0}
.kz-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.6cqw;
  padding:3cqw 5cqw;border-radius:3.4cqw;background:rgba(20,20,24,.82);backdrop-filter:blur(2cqw);-webkit-backdrop-filter:blur(2cqw);color:#fff;
  box-shadow:0 3cqw 8cqw rgba(0,0,0,.45);opacity:0;white-space:nowrap}
.kz-big small{font-size:max(2.2cqw,9px);color:#c7c7cc;letter-spacing:.06em}
.kz-big b{font-size:max(10cqw,30px);line-height:1;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kz-big span{font-size:max(2.4cqw,10px);color:#64d2ff}
.kz-book{position:absolute;left:6.5cqw;top:13cqw;width:87cqw;aspect-ratio:900/695;perspective:240cqw}
.kz-book::before,.kz-book::after{content:'';position:absolute;inset:0;border-radius:.7cqw;background:#f7f4ee;box-shadow:0 .2cqw .6cqw rgba(60,40,20,.18)}
.kz-book::before{transform:translate(1.3cqw,1.1cqw);background:#ebe5da}
.kz-book::after{transform:translate(.65cqw,.55cqw)}
.kz-page::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 6%,transparent 94%,rgba(0,0,0,.05));pointer-events:none}
.kz-pre{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.kz-page{position:absolute;inset:0;margin:0;border-radius:.7cqw;overflow:hidden;background:#fff;transform-origin:left center;backface-visibility:hidden;
  box-shadow:0 2.6cqw 6cqw rgba(40,30,20,.32),0 0 0 .15cqw rgba(0,0,0,.06)}
.sc-scene .kz-page img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.kz-page.p0{z-index:4}.kz-page.p1{z-index:3}.kz-page.p2{z-index:2}.kz-page.p3{z-index:1}
.kz-page.p0,.kz-page.p1,.kz-page.p2{opacity:0}
.kz-chip{position:absolute;left:50%;top:4.2cqw;transform:translateX(-50%);display:flex;align-items:center;gap:1.4cqw;white-space:nowrap;
  background:#1d1d1f;color:#fff;border-radius:4cqw;padding:1.2cqw 2.8cqw;font-size:max(2.2cqw,9px);box-shadow:0 1.4cqw 4cqw rgba(0,0,0,.25)}
.kz-chip i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:#64d2ff;box-shadow:0 0 1.2cqw #64d2ff}

.is-play .kz-grid{animation:kz-scroll 3.1s cubic-bezier(.5,0,.2,1) .2s both}
.is-play .kz-grid i:not(.pick){animation:kz-dim .7s ease calc(3.4s + var(--r) * .7s) both}
.is-play .kz-grid i.pick{animation:kz-lift .6s var(--spring) calc(3.4s + var(--r) * .7s) both;z-index:1}
.is-play .kz-grid i.pick::after{animation:kz-check .4s var(--spring) calc(3.6s + var(--r) * .7s) both}
.is-play .kz-big{animation:kz-big 2.5s var(--out) 3.2s both}
.is-play .kz-lib{animation:kz-out .8s var(--inout) 5.7s both}
.is-play .kz-book{animation:kz-book 1.1s var(--out) 5.9s both}
.is-play .kz-chip{animation:jm-in .6s var(--out) 6.4s both}
.is-play .kz-page.p0{animation:kz-flip 1s var(--inout) 7.1s both}
.is-play .kz-page.p1{animation:kz-flip 1s var(--inout) 8.2s both}
.is-play .kz-page.p2{animation:kz-flip 1s var(--inout) 9.3s both}
@keyframes kz-scroll{to{transform:translateY(-55%)}}
@keyframes kz-dim{to{opacity:.16;filter:grayscale(1)}}
@keyframes kz-lift{to{transform:scale(1.08);box-shadow:0 0 0 .35cqw #0a84ff,0 1.6cqw 3cqw rgba(0,0,0,.35)}}
@keyframes kz-check{from{opacity:0;transform:scale(.3)}to{opacity:1}}
@keyframes kz-big{0%{opacity:0;transform:translate(-50%,-40%) scale(.9)}12%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes kz-out{from{opacity:1;transform:none;filter:none}to{opacity:0;transform:scale(.9);filter:blur(.6cqw)}}
@keyframes kz-book{from{opacity:0;transform:translateY(8cqw) rotateX(24deg) scale(.86)}60%{opacity:1}}
@keyframes kz-flip{0%{opacity:1;transform:rotateY(0);filter:brightness(1)}55%{filter:brightness(.78)}80%{opacity:1}100%{opacity:0;transform:rotateY(-165deg);filter:brightness(.7)}}

/* ---------------------------------------------------------------- Bills */
.bl{direction:rtl;color:#F3F1EA;font-family:var(--body,system-ui);padding:3.6cqw 4cqw;display:flex;flex-direction:column;gap:2.2cqw;
  background:radial-gradient(60cqw 40cqw at 85% 0%,rgba(127,168,201,.18),transparent 70%),
             radial-gradient(50cqw 40cqw at 0% 100%,rgba(232,145,111,.14),transparent 70%),#141c23}
.bl-head{display:flex;align-items:center;gap:1.6cqw}
.bl-head b{font-family:var(--display,Georgia,serif);font-size:max(3.4cqw,13px)}
.bl-live{display:inline-flex;align-items:center;gap:.8cqw;font-size:max(1.6cqw,8px);color:#7FA8C9}
.bl-live i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#3ee08a;box-shadow:0 0 1cqw #3ee08a}
.bl-tag{margin-inline-start:auto;font-size:max(1.6cqw,8px);border:.2cqw solid rgba(127,168,201,.4);color:#7FA8C9;padding:.4cqw 1.3cqw;border-radius:1cqw}
.bl-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8cqw}
.bl-kpi{position:relative;overflow:hidden;background:linear-gradient(160deg,#1f2a34,#18212a);border:.2cqw solid rgba(127,168,201,.22);border-radius:1.8cqw;padding:1.6cqw 2cqw 1.4cqw}
.bl-kpi small{display:block;color:#7FA8C9;font-size:max(1.7cqw,8px)}
.bl-kpi b{display:block;direction:ltr;text-align:right;font-family:var(--mono,ui-monospace,monospace);font-size:max(4.2cqw,14px);line-height:1.15;margin:.5cqw 0 .3cqw;letter-spacing:-.02em}
.bl-kpi svg{display:block;width:100%;height:4cqw;overflow:visible}
.bl-kpi path{fill:none;stroke:#7FA8C9;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bl-kpi.save{border-color:rgba(232,145,111,.55);background:linear-gradient(160deg,#33261f,#1c1a1a)}
.bl-kpi.save b{color:#F2A07E;text-shadow:0 0 2.4cqw rgba(242,160,126,.45)}
.bl-kpi.save small{color:#F2A07E}
.bl-kpi.save path{stroke:#F2A07E}
.bl-mid{flex:1;min-height:0;display:grid;grid-template-columns:1.7fr 1fr;gap:1.8cqw}
.bl-card{position:relative;min-height:0;display:flex;flex-direction:column;background:linear-gradient(160deg,#1f2a34,#18212a);border:.2cqw solid rgba(127,168,201,.22);border-radius:1.8cqw;padding:1.6cqw 2cqw}
.bl-card h5{margin:0;display:flex;justify-content:space-between;font-size:max(1.8cqw,8px);color:#7FA8C9;font-weight:400}
.bl-card h5 em{font-style:normal;color:#F3F1EA;font-family:var(--mono,monospace)}
.bl-area{position:relative;flex:1;min-height:0;margin-top:1cqw}
.bl-area svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bl-grid line{stroke:rgba(127,168,201,.18);stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.bl-fill{fill:url(#blFill)}
.bl-area .bl-fillsvg{z-index:0}.bl-area .bl-linesvg{z-index:1}
.bl-line{fill:none;stroke:#9cc3e3;stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(156,195,227,.7))}
.bl-dots i{position:absolute;width:1.5cqw;height:1.5cqw;margin:-.75cqw 0 0 -.75cqw;border-radius:50%;background:#141c23;border:.35cqw solid #9cc3e3;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%)}
.bl-dots i.hi{width:2.2cqw;height:2.2cqw;margin:-1.1cqw 0 0 -1.1cqw;border-color:#F2A07E;box-shadow:0 0 0 1cqw rgba(242,160,126,.18),0 0 2cqw rgba(242,160,126,.7)}
.bl-tip{position:absolute;left:54.3%;top:22.9%;transform:translate(-50%,calc(-100% - 2cqw));white-space:nowrap;background:#F3F1EA;color:#141c23;
  font-size:max(1.7cqw,8px);padding:.6cqw 1.3cqw;border-radius:1cqw;font-weight:700;box-shadow:0 1cqw 3cqw rgba(0,0,0,.4)}
.bl-tip::after{content:'';position:absolute;left:50%;bottom:-.8cqw;margin-left:-.8cqw;border:.8cqw solid transparent;border-top-color:#F3F1EA;border-bottom:0}
.bl-months{display:flex;justify-content:space-between;direction:ltr;margin-top:.8cqw;font-size:max(1.4cqw,7px);color:#6f8ea8;padding:0 .4cqw}
.bl-donut{position:relative;flex:1;min-height:0;display:grid;place-items:center;margin-top:.6cqw}
.bl-donut svg{width:auto;height:100%;max-width:100%;aspect-ratio:1;transform:rotate(-90deg);overflow:visible;filter:drop-shadow(0 0 1.4cqw rgba(242,160,126,.25))}
.bl-donut circle{fill:none;stroke-width:6.2}
.bl-donut .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1}
.bl-donut .mid b{font-family:var(--mono,monospace);font-size:max(4.2cqw,14px);color:#F2A07E}
.bl-donut .mid span{font-size:max(1.6cqw,8px);color:#7FA8C9}
.bl-legend{display:grid;gap:.5cqw;margin-top:.8cqw;font-size:max(1.4cqw,7px);color:#b9c7d3}
.bl-legend span{display:flex;align-items:center;gap:.8cqw}
.bl-legend i{width:1.2cqw;height:1.2cqw;border-radius:.3cqw;background:var(--c)}
.bl-legend em{font-style:normal;margin-inline-start:auto;font-family:var(--mono,monospace);color:#F3F1EA}
.bl-finds{display:grid;grid-template-columns:1fr 1fr;gap:1.8cqw}
.bl-find{display:flex;gap:1.4cqw;align-items:center;background:linear-gradient(160deg,#1f2a34,#18212a);border:.2cqw solid rgba(127,168,201,.22);border-radius:1.8cqw;padding:1.4cqw 1.8cqw}
.bl-find .ic{flex:none;width:5cqw;height:5cqw;border-radius:1.4cqw;display:grid;place-items:center;font-size:2.6cqw;background:rgba(242,160,126,.14)}
.bl-find b{display:block;font-size:max(1.9cqw,9px)}
.bl-find span{display:block;font-size:max(1.45cqw,7px);color:#7FA8C9;margin-top:.2cqw}
.bl-find em{display:inline-block;margin-top:.6cqw;font-style:normal;font-family:var(--mono,monospace);font-size:max(1.7cqw,8px);color:#141c23;background:#F2A07E;border-radius:1cqw;padding:.2cqw 1cqw}

.is-play .bl-kpi{animation:jm-in .6s var(--out) both}
.is-play .bl-kpi:nth-child(2){animation-delay:.12s}
.is-play .bl-kpi:nth-child(3){animation-delay:.24s}
.is-play .bl-kpi path{animation:bl-draw 1.6s var(--out) .5s both}
.is-play .bl-card{animation:jm-in .7s var(--out) .35s both}
.is-play .bl-card + .bl-card{animation-delay:.5s}
.is-play .bl-line{animation:bl-draw 2.2s var(--inout) .9s both}
.is-play .bl-fillsvg{animation:bl-wipe 2.2s var(--inout) .9s both}
.is-play .bl-dots i{animation:jm-chip .45s var(--spring) calc(.9s + var(--k) * .17s) both}
.is-play .bl-tip{animation:bl-tip .5s var(--spring) 3.1s both}
.is-play .bl-donut .seg{animation:bl-seg .7s var(--out) calc(1.5s + var(--k) * .2s) both}
.is-play .bl-donut .mid{animation:jm-chip .6s var(--spring) 2.7s both}
.is-play .bl-legend span{animation:jm-in .4s var(--out) calc(2.8s + var(--k) * .12s) both}
.is-play .bl-find{animation:bl-slide .7s var(--out) 3.6s both}
.is-play .bl-find + .bl-find{animation-delay:3.85s}
.is-play .bl-kpi.save{animation:jm-in .6s var(--out) .24s both,bl-glow 1.6s ease 5.2s both}
@keyframes bl-draw{from{stroke-dasharray:0 1;stroke-dashoffset:0}to{stroke-dasharray:1 0}}
@keyframes bl-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes bl-tip{from{opacity:0;transform:translate(-50%,calc(-60% - 2cqw)) scale(.7)}}
@keyframes bl-seg{from{stroke-dasharray:0 100}}
@keyframes bl-slide{from{opacity:0;transform:translateX(-4cqw)}}
@keyframes bl-glow{0%{box-shadow:0 0 0 0 rgba(242,160,126,0)}35%{box-shadow:0 0 0 .6cqw rgba(242,160,126,.35),0 0 5cqw rgba(242,160,126,.45)}100%{box-shadow:0 0 0 0 rgba(242,160,126,0),0 0 2.6cqw rgba(242,160,126,.2)}}

/* Small frames (phones): the text floors above make labels bigger than their
   share of the scene, so drop what the chart already says. */
@container (max-width: 520px){
  .bl-legend,.bl-live{display:none}
  .bl-months span:nth-child(even){visibility:hidden}
  .bl-find .ic{display:none}
  .jm-target{display:none}
}