/* Scene visuals of the resource articles. GENERATED by scripts/build-article-scenes.py
   from _preview/build-scene-overview.py: change it there, then run that script. */
.article-visual.sc{padding:0;min-height:0;height:360px;display:block}
.sc-stage{position:absolute;left:0;top:0;width:720px;height:360px;perspective:1500px;perspective-origin:50% 40%}
.sc-plane{position:absolute;left:50%;top:50%;width:780px}
.sc-plane.tl{transform:translate(-46%,-45%) rotateX(26deg) rotateZ(-9deg)}
.sc-plane.tr{transform:translate(-41%,-41%) rotateX(26deg) rotateZ(7deg)}
.sc-panel{border-radius:22px;padding:8px 0 10px;min-height:330px;box-sizing:border-box;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.88));
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(10,30,70,.06),0 50px 80px -30px rgba(8,32,84,.5);
  -webkit-mask-image:linear-gradient(100deg,#000 60%,rgba(0,0,0,.45) 86%,transparent 99%),linear-gradient(180deg,#000 68%,transparent 100%);
  mask-image:linear-gradient(100deg,#000 60%,rgba(0,0,0,.45) 86%,transparent 99%),linear-gradient(180deg,#000 68%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.sc-bar{display:flex;align-items:center;gap:18px;padding:10px 24px 12px;border-bottom:1px solid rgba(23,24,26,.07);font-size:12.5px;font-weight:600;color:rgba(23,24,26,.45)}
.sc-bar b{color:var(--ink);font-weight:600;position:relative}
.sc-bar b::after{content:'';position:absolute;left:0;right:0;bottom:-13px;height:2px;background:var(--accent);border-radius:2px}
.sc-dots{width:44px;height:10px;background:radial-gradient(circle at 5px 5px,rgba(23,24,26,.22) 4.5px,transparent 5px) 0 0/17px 10px repeat-x}
.sc-r{display:grid;align-items:center;gap:16px;padding:0 24px;height:46px;font-size:14px;border-bottom:1px solid rgba(23,24,26,.055);color:rgba(23,24,26,.6)}
.sc-r>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sc-r.h{height:34px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(23,24,26,.42)}
.sc-m{font-family:var(--mono);font-size:13px;letter-spacing:-.01em;white-space:pre}
.sc-r>span.sc-m{white-space:pre}
.sc-r.off{color:rgba(23,24,26,.42)}
.sc-r.off .sc-m:first-child{text-decoration:line-through;text-decoration-color:rgba(200,40,40,.45)}
.sc-bad{color:#c62828;font-weight:600}.sc-ok{color:#12813f;font-weight:600}.sc-acc{color:var(--accent);font-weight:600}
.sc-r{position:relative}
.sc-r.focus{background:rgba(0,113,227,.07);box-shadow:inset 0 0 0 1.5px rgba(0,113,227,.75);color:var(--ink);border-bottom-color:transparent;border-radius:10px;margin:2px 10px;padding:0 14px;font-weight:600;}
.sc-chip{position:absolute;bottom:48px;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;color:var(--ink);max-width:330px;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.92));border:1px solid rgba(255,255,255,.95);
  box-shadow:0 1px 2px rgba(10,30,70,.08),0 22px 44px -14px rgba(8,32,84,.5);font-size:14px;line-height:1.25}
.sc-chip.r{right:40px}.sc-chip.l{left:40px}
.sc-chip.a{}
.sc-chip.big{padding:16px 20px}
.sc-chip.big small{margin:0 0 6px}
.sc-chip.a+.sc-chip.big{bottom:132px}
.sc-chip small{display:block;font-size:11.5px;font-weight:500;color:rgba(23,24,26,.55);margin-top:2px;white-space:normal}
.sc-chip strong{font-weight:650}
.sc-tile{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#f3f5f9;box-shadow:inset 0 0 0 1px rgba(23,24,26,.06)}
.sc-tile svg,.sc-tile img{width:22px;height:22px;fill:var(--lg,#17181a)}
.sc-tip{position:absolute;left:300px;top:70px;padding:7px 11px;border-radius:9px;background:#17181a;color:#fff;font-family:var(--mono);font-size:11.5px;box-shadow:0 14px 28px -10px rgba(0,0,0,.55)}
.sc-tip::after{content:'';position:absolute;left:18px;bottom:-4px;width:9px;height:9px;background:#17181a;transform:rotate(45deg)}
.sc-big{display:block;font-size:32px;font-weight:650;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.sc-big .sc-bad,.sc-big .sc-ok{font-weight:650}
.sc-stk{display:inline-grid}.sc-stk>*{grid-area:1/1}
.sc .o1{}.sc .o2{}
/* chat scene */
.sc-plane.chat{width:640px}
.sc-plane.chat .sc-panel{padding-bottom:28px}
.sc-q{display:flex;justify-content:flex-end;padding:22px 26px 6px}
.sc-q span{background:#17181a;color:#fff;font-size:16px;font-weight:500;padding:11px 16px;border-radius:16px 16px 4px 16px;max-width:76%}
.sc-tools{display:flex;gap:8px;padding:12px 26px 4px}
.sc-tools span{font-size:12px;padding:5px 9px;border-radius:8px;background:rgba(0,113,227,.08);color:var(--accent-deep);box-shadow:inset 0 0 0 1px rgba(0,113,227,.25)}
.sc-ans{padding:12px 26px 0;font-size:17px;line-height:1.5;color:var(--ink);max-width:84%}
/* real screenshot scene */
.sc-plane.shot{width:860px}
.sc-plane.shot .sc-panel{padding:0;overflow:hidden;background:#fff}
.sc-plane.shot img{display:block;width:100%;height:auto}
/* ---- shared by the flat scenes ---- */
.sc p{margin:0}
.sc-flat{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px}
.sc-card{position:relative;box-sizing:border-box;border-radius:20px;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.9));border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(10,30,70,.06),0 34px 60px -26px rgba(8,32,84,.5);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
/* (stat, chart, setting, bars and steps live inside an .sc-panel since the three-camera pass) */
.sc p.sc-k{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(23,24,26,.5)}
.sc-k .sc-tile{width:28px;height:28px;border-radius:8px}.sc-k .sc-tile svg{width:16px;height:16px}
.sc p.sc-note{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:0 16px 32px -12px rgba(8,32,84,.55);}
.sc-tile.txt{width:auto;padding:0 14px;font-weight:700;font-size:15px}
/* big number */
.st{width:630px;padding:30px 32px;display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:center}
.st-n{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.st-n .sc-big{font-size:72px;letter-spacing:-.045em}
.st-n small{font-size:14px;line-height:1.35;color:rgba(23,24,26,.62);font-weight:500}
.st-b{display:grid;gap:13px}
.st-r{display:grid;grid-template-columns:128px 1fr 52px;gap:12px;align-items:center;font-size:13.5px;color:rgba(23,24,26,.6)}
.st-r>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.st-r>span.sc-m{font-size:12px}
.st-r i{height:10px;border-radius:6px;background:rgba(23,24,26,.07);overflow:hidden}
.st-r b{display:block;height:100%;min-width:6px;border-radius:6px;background:rgba(23,24,26,.24)}
.st-r em{font-style:normal;font-variant-numeric:tabular-nums;text-align:right;font-family:var(--mono);font-size:12.5px}
.st-r.focus{color:var(--ink);font-weight:650}
.st-r.focus b{background:var(--accent);transform-origin:left;}
.st-r.bad b{background:#d64545}
/* before and after */
.sc-flat.vs{gap:0}
.vs-c{width:282px;padding:24px 24px 26px;display:flex;flex-direction:column;gap:9px}
.vs-c small{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(23,24,26,.5);padding-right:44px}
.vs-c strong{font-size:34px;letter-spacing:-.03em;line-height:1.08;font-weight:650}
.vs-c strong .sc-m{font-size:21px;letter-spacing:-.03em;font-weight:600}
.vs-c>span{font-size:13.5px;line-height:1.4;color:rgba(23,24,26,.62)}
.vs-c.a{transform:rotate(-4deg) translateY(12px) scale(.93);opacity:.9}
.vs-c.a.off strong{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(200,40,40,.55);color:rgba(23,24,26,.5)}
.vs-c.b{transform:rotate(2.5deg) translateY(-8px);box-shadow:0 0 0 2px rgba(0,113,227,.75),0 2px 4px rgba(10,30,70,.06),0 40px 64px -24px rgba(8,32,84,.6)}
.vs-c.b strong{color:var(--accent-deep)}
.vs-c .sc-tile{position:absolute;right:18px;top:16px}
.vs-ar{flex:none;width:44px;height:44px;border-radius:50%;background:#17181a;margin:0 -10px;z-index:2;display:grid;place-items:center;box-shadow:0 12px 24px -8px rgba(0,0,0,.5)}
.vs-ar svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* route */
.rt-w{position:relative;width:664px;margin-top:-30px}
.rt-w.has-skip{margin-top:44px}
.rt{display:flex;align-items:center}
.rt-n{flex:1;min-width:0;min-height:112px;justify-content:center;padding:18px 18px 20px;border-radius:20px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.rt-n strong{font-size:17.5px;letter-spacing:-.01em;font-weight:650;line-height:1.2}
.rt-n strong .sc-m{font-size:13px}
.rt-n small{font-size:13.5px;line-height:1.35;color:rgba(23,24,26,.62)}.rt-n small .sc-m{font-size:11.5px}
.rt-n .sc-tile{margin-bottom:6px;width:34px;height:34px}
.rt-n.focus{transform:scale(1.07);z-index:2;box-shadow:0 0 0 2px rgba(0,113,227,.75),0 40px 64px -24px rgba(8,32,84,.6)}
.rt-n.bad{opacity:.82}.rt-n.bad strong{color:#c62828;text-decoration:line-through;text-decoration-color:rgba(200,40,40,.45)}
.rt-l{flex:none;width:30px;height:2px;background:rgba(255,255,255,.95);position:relative}
.rt-l::after{content:'';position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35);animation:scDot 1.8s linear infinite}
.rt-fan{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rt-fan .sc-tile{width:54px;height:54px;border-radius:15px;background:#fff;box-shadow:0 14px 28px -12px rgba(8,32,84,.5)}
.rt-fan .sc-tile svg{width:28px;height:28px}
.rt-skip{position:absolute;left:10%;right:10%;bottom:100%;height:74px;margin-bottom:4px}
.rt-skip svg{width:100%;height:100%;overflow:visible}
.rt-skip path{fill:none;stroke:#e5484d;stroke-width:2.5;stroke-dasharray:7 6;vector-effect:non-scaling-stroke;animation:scDash 1s linear infinite}
.rt-skip span{position:absolute;left:50%;top:-14px;transform:translateX(-50%);white-space:nowrap;padding:7px 11px;border-radius:9px;background:#17181a;color:#fff;font-family:var(--mono);font-size:11.5px}
/* growing bar */
.br{width:620px;padding:26px 30px 20px}
.br-r{display:grid;grid-template-columns:180px 1fr 124px;gap:16px;align-items:center;padding:16px 0}
.br-r+.br-r{border-top:1px solid rgba(23,24,26,.06)}
.br-r strong{display:block;font-size:15px;font-weight:650}.br-r small{display:block;font-size:12.5px;color:rgba(23,24,26,.58);margin-top:2px}
.br-r i{height:18px;border-radius:9px;background:rgba(23,24,26,.06)}
.br-r b{display:block;height:100%;min-width:12px;border-radius:9px;background:rgba(23,24,26,.28)}
.br-r.focus b{background:linear-gradient(90deg,var(--accent),#57a6ff)}
.br-r b.grow{}
.br-r em{font-style:normal;text-align:right;font-size:22px;font-weight:650;letter-spacing:-.02em;white-space:nowrap}
/* chart */
.ch{width:640px;padding:22px 28px 26px}
.ch-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ch-h .sc-tile{width:28px;height:28px;border-radius:8px}.ch-h .sc-tile svg{width:16px;height:16px}
.ch-h strong{font-size:15.5px;font-weight:650;flex:1}
.ch-lg{display:flex;gap:16px;font-size:12px;color:rgba(23,24,26,.6)}
.ch-lg span::before{content:'';display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--accent);vertical-align:middle;margin-right:6px}
.ch-lg .k1::before{background:repeating-linear-gradient(90deg,rgba(23,24,26,.5) 0 4px,transparent 4px 7px)}
.ch-p{position:relative;height:180px;border-bottom:1px solid rgba(23,24,26,.1)}
.ch-p svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ch-a{fill:rgba(0,113,227,.09)}.ch-gap{fill:rgba(229,72,77,.13)}
.ch-l{fill:none;stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ch-l2{fill:none;stroke:rgba(23,24,26,.5);stroke-width:2;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.ch-b{fill:rgba(0,113,227,.28)}.ch-b.last{fill:var(--accent)}
.ch-pin{position:absolute;width:0;height:0}
.ch-pin b{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--accent),0 0 0 9px rgba(0,113,227,.18)}
.ch-pin.bad b{box-shadow:0 0 0 3px #e5484d,0 0 0 9px rgba(229,72,77,.2)}
.ch-pin em{position:absolute;bottom:20px;left:-22px;font-style:normal;white-space:nowrap;padding:8px 12px;border-radius:10px;background:#17181a;color:#fff;font-size:12.5px;font-weight:600;box-shadow:0 14px 28px -10px rgba(0,0,0,.55);}
.ch-pin.r em{left:auto;right:-22px}
.ch-pin.dn em{bottom:auto;top:20px}
.ch+.sc-chip{bottom:30px;left:56px}
/* code */
.sc-code{width:610px;border-radius:18px;background:#15171c;color:#c3cbd6;box-shadow:0 44px 70px -28px rgba(4,14,40,.8),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;transform:rotate(-1.5deg) translate(-26px,-6px);padding-bottom:14px}
.cd-bar{display:flex;gap:14px;align-items:center;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.55);margin-bottom:8px}
.cd-bar .sc-dots{filter:invert(1)}
.cd-l{display:grid;grid-template-columns:46px 1fr;font-family:var(--mono);font-size:14px;line-height:31px;white-space:pre}
.cd-l i{font-style:normal;text-align:right;padding-right:16px;color:rgba(255,255,255,.28)}
.cd-l.focus{background:rgba(87,166,255,.17);box-shadow:inset 3px 0 0 #57a6ff;color:#fff}
.cd-l.add{background:rgba(46,160,90,.17);color:#a5e8bb;box-shadow:inset 3px 0 0 #3fb96f}.cd-l.add i{color:#5fce8a}
.sc-code+.sc-chip{bottom:36px;right:34px}
/* decoded string */
.dc{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:-34px}
.dc.two{margin-top:0}
.sc p.dc-pre{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border-radius:999px;background:rgba(255,255,255,.92);font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:0 10px 22px -10px rgba(8,32,84,.45)}
.dc-pre .sc-tile{width:26px;height:26px;border-radius:8px}.dc-pre .sc-tile svg{width:15px;height:15px}
.dc-pre:not(:has(.sc-tile)){padding-left:14px}
.dc-bar{display:flex;align-items:center;padding:0 30px;height:86px;border-radius:24px;font-family:var(--mono);font-size:22px;letter-spacing:-.02em;white-space:pre}
.dc-bar.url{border-radius:999px;padding-left:66px;padding-right:38px}
.dc-bar.url::before{content:'';position:absolute;left:26px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;box-shadow:inset 0 0 0 2.5px rgba(23,24,26,.28)}
.dc-bar.wide{font-size:54px;height:120px;letter-spacing:.1em;font-weight:600;padding:0 40px 0 50px;border-radius:30px}
.dc-s{position:relative;color:rgba(23,24,26,.42)}
.dc-s b{font-weight:inherit}
.dc-s.lab{color:var(--ink)}
.dc-s.lab b{border-bottom:2px solid rgba(23,24,26,.75);padding-bottom:3px}
.dc-s.focus b{border-bottom-color:var(--accent);color:var(--accent-deep);background:rgba(0,113,227,.09);border-radius:6px 6px 0 0}
.dc-s small{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 44px);font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap;padding:8px 13px;border-radius:10px;background:#17181a;color:#fff;box-shadow:0 14px 28px -10px rgba(0,0,0,.55)}
.dc-s small::before{content:'';position:absolute;left:50%;bottom:100%;width:2px;height:36px;margin-left:-1px;background:#17181a}
.dc-s.up small{top:auto;bottom:calc(100% + 44px)}
.dc-s.up small::before{bottom:auto;top:100%}
.dc-bar.wide .dc-s small{top:calc(100% + 40px)}.dc-bar.wide .dc-s.up small{top:auto;bottom:calc(100% + 40px)}
.dc.two .dc-pre{position:absolute;left:28px;top:24px}
/* consent banner */
.sc-flat.bnw{gap:20px;align-items:center}
.bn{width:340px;padding:22px 22px 20px;transform:rotate(-2deg)}
.sc p.bn-t{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:17px}.bn-t strong{font-weight:650;letter-spacing:-.01em}
.bn-t .sc-tile{width:32px;height:32px;border-radius:9px}.bn-t .sc-tile svg{width:19px;height:19px}
.sc p.bn-x{margin:0 0 18px;font-size:13.5px;line-height:1.45;color:rgba(23,24,26,.64)}
.bn-bs{display:flex;gap:8px}
.bn-b{flex:1;text-align:center;padding:11px 0;border-radius:11px;font-size:14px;font-weight:650;box-shadow:inset 0 0 0 1px rgba(23,24,26,.18)}
.bn-b.on{background:#17181a;color:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.38);}
.bn.ghost{background:rgba(255,255,255,.5);border:1.5px dashed rgba(255,255,255,.95);box-shadow:none}
.bn.ghost .bn-x{margin-bottom:0}
.bn-s{width:292px;padding:18px 20px 8px;transform:rotate(1.5deg) translateY(-6px)}
.sc .bn-s p.sc-k{margin-bottom:8px}
.bn-p{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(23,24,26,.07);font-size:13px;color:rgba(23,24,26,.75)}
.bn-p .sc-m{font-size:12.5px}
/* setting */
.sw{width:530px;padding:22px 26px 10px}
.sw-h{display:flex;align-items:center;gap:14px;padding-bottom:18px}
.sw-h>span:not(.sc-tile){flex:1;min-width:0}
.sw-h strong{display:block;font-size:19px;font-weight:650;letter-spacing:-.015em}
.sw-h small{display:block;font-size:13px;color:rgba(23,24,26,.6);margin-top:3px}
.sw-h .tg{transform:scale(1.4);margin-right:9px}
.sw-r{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-top:1px solid rgba(23,24,26,.07);font-size:14px;color:rgba(23,24,26,.72)}
.sw-r.focus{color:var(--ink);font-weight:650}
.sw-r.off>span:first-child{text-decoration:line-through;text-decoration-color:rgba(200,40,40,.45);color:rgba(23,24,26,.45)}
.tg{flex:none;width:44px;height:26px;border-radius:13px;background:rgba(23,24,26,.2);position:relative}
.tg::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.tg.on,.tg.to-on{background:var(--accent)}.tg.on::after,.tg.to-on::after{transform:translateX(18px)}
.tg.to-on{}.tg.to-on::after{}
.tg.to-off{}.tg.to-off::after{}
/* stack of cards */
.sk{position:relative;width:520px;height:222px;transform:rotate(-2.5deg) translateY(-22px)}
.sk-c{position:absolute;left:0;bottom:0;width:440px;padding:20px 22px;display:flex;align-items:center;gap:14px;transform-origin:left bottom}
.sk-c>span:not(.sc-tile){flex:1;min-width:0}
.sk-c strong{display:block;font-size:16.5px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-c strong .sc-m{font-size:15px}
.sk-c small{display:block;font-size:12.5px;color:rgba(23,24,26,.6);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sk-c small .sc-m{font-size:12px}
.sk-c em{font-style:normal;font-size:13px;font-weight:600;white-space:nowrap}
.sk-c.k0{z-index:5;box-shadow:0 0 0 2px rgba(0,113,227,.75),0 40px 64px -24px rgba(8,32,84,.6)}
.sk-c:not(.k0){align-items:flex-start;padding-top:13px}
.sk-c.k1{transform:translate(28px,-50px) scale(.96);z-index:4}
.sk-c.k2{transform:translate(56px,-98px) scale(.92);z-index:3;opacity:.93}
.sk-c.k3{transform:translate(84px,-144px) scale(.88);z-index:2;opacity:.82}
.skw .sc-note{bottom:22px}
/* two into one */
.mg{position:absolute;inset:0}
.mg>svg{position:absolute;inset:0;width:100%;height:100%}
.mg>svg path{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:2 10;stroke-linecap:round;animation:scDash2 .9s linear infinite}
.mg-p{position:absolute;left:54px;width:280px;padding:15px 20px 16px;display:grid;gap:4px}
.mg-p.p0{top:60px;transform:rotate(-1.5deg)}.mg-p.p1{top:204px;transform:rotate(1.5deg)}
.mg-p small{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(23,24,26,.5)}
.mg-p strong{font-size:20px;font-weight:600}.mg-p span{font-size:12.5px;color:var(--accent-deep)}
.mg-t{position:absolute;left:458px;top:50%;transform:translateY(-50%);width:210px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:26px 18px 22px;box-shadow:0 0 0 2px rgba(0,113,227,.75),0 40px 64px -24px rgba(8,32,84,.6)}
.mg-t .sc-tile{width:76px;height:76px;border-radius:21px;background:#fff;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(23,24,26,.07),0 12px 24px -12px rgba(8,32,84,.4)}
.mg-t .sc-tile svg{width:42px;height:42px}
.mg-t .sc-tile.txt{width:auto;height:56px;font-size:17px;padding:0 18px}
.mg-t strong{font-size:24px;font-weight:650;letter-spacing:-.025em}
.mg-t small{font-size:12.5px;line-height:1.35;color:rgba(23,24,26,.62)}
/* steps */
.sp{width:650px;padding:26px 22px 30px}
.sc .sp p.sc-k{margin:0 8px 24px}
.sp-row{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr)}
.sp-row::before{content:'';position:absolute;top:19px;left:calc(50%/var(--n));height:3px;border-radius:2px;width:calc(100% - 100%/var(--n));background:rgba(23,24,26,.1)}
.sp-s{position:relative}
.sp-l{position:absolute;top:19px;left:-50%;width:100%;height:3px;background:var(--accent)}
.sp-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:0 6px}
.sp-s b{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 2px rgba(23,24,26,.14);font-size:15px;font-weight:650;color:rgba(23,24,26,.45);margin-bottom:8px}
.sp-s.done b{background:var(--accent);color:#fff;box-shadow:none}
.sp-s.focus b{color:var(--accent);box-shadow:inset 0 0 0 2.5px var(--accent),0 0 0 8px rgba(0,113,227,.16);animation:scPulse 3s ease-in-out infinite}
.sp-s strong{font-size:14px;font-weight:600;line-height:1.25;color:rgba(23,24,26,.5)}
.sp-s.done strong,.sp-s.focus strong{color:var(--ink)}.sp-s.focus strong{font-weight:650}
.sp-s small{font-size:12px;font-weight:600;color:var(--accent-deep);padding:4px 9px;border-radius:999px;background:rgba(0,113,227,.09);margin-top:4px;white-space:nowrap}
/* chat, front on */
.ct{width:580px;padding:0 0 26px;transform:rotate(-1.2deg)}.ct.l{transform:rotate(1.2deg)}
.ct-h{display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid rgba(23,24,26,.07)}
.ct-h strong{font-size:15px;font-weight:650;flex:1}
.ct-h span{font-size:12px;font-weight:600;color:#12813f;padding:5px 10px;border-radius:999px;background:rgba(18,129,63,.09)}
.ct .sc-q{padding:18px 22px 4px}.ct .sc-tools{padding:12px 22px 2px;flex-wrap:wrap}
.ct .sc-ans{padding:12px 22px 0;font-size:15.5px;max-width:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@keyframes scGrowX{0%,14%{transform:scaleX(0)}32%,100%{transform:none}}
@keyframes scGrowW{0%,44%{width:var(--w0)}58%,100%{}}
@keyframes scDot{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
@keyframes scDash{to{stroke-dashoffset:-13}}
@keyframes scDash2{to{stroke-dashoffset:-12}}
@keyframes scPress{0%,40%{box-shadow:0 0 0 0 rgba(0,113,227,0);transform:none}46%{transform:scale(.95)}52%,100%{transform:none}}
@keyframes scTgOn{0%,44%{background:rgba(23,24,26,.2)}52%,100%{}}
@keyframes scKnOn{0%,44%{transform:none}52%,100%{}}
@keyframes scTgOff{0%,44%{background:var(--accent)}52%,100%{}}
@keyframes scKnOff{0%,44%{transform:translateX(18px)}52%,100%{}}
@keyframes scPulse{0%,100%{box-shadow:inset 0 0 0 2.5px var(--accent),0 0 0 4px rgba(0,113,227,.2)}50%{box-shadow:inset 0 0 0 2.5px var(--accent),0 0 0 10px rgba(0,113,227,.08)}}
/* ---- CAMERAS: three, nothing else ----
   A  rotateX(26deg) rotateZ(-9deg)    panel or card leaning left
   B  rotateX(26deg) rotateZ(7deg)     panel or card leaning right
   D  no tilt                          front-on card, 60px from the sides, its bottom cut off by the frame
   Edges: a full-bleed panel (A/B, 780px+) leaves the frame on three sides and shows one
   diagonal edge. A floating card keeps 48px or more from every container edge. Nothing in between. */
.sc-plane.tl,.sc-plane.tr{width:880px}
.sc-plane.tl{transform:translate(-50%,-45%) rotateX(26deg) rotateZ(-9deg)}
.sc-plane.tr{transform:translate(-50%,-42%) rotateX(26deg) rotateZ(7deg)}
/* the panel's left edge and top-left corner lie 70px outside the frame; content starts 92px in */
.sc-plane.tl>*,.sc-plane.tr>*{min-height:370px;padding-left:114px}
.sc-plane.shot.tl>*,.sc-plane.shot.tr>*{padding-left:0}
.sc-chip.r{right:52px}.sc-chip.l{left:52px}
/* camera D: front-on, cut off at the bottom of the frame */
.sc-plane.fr{left:60px;right:60px;top:54px;width:auto;transform:none}
.sc-plane.fr>*{min-height:340px;-webkit-mask-image:none;mask-image:none;border-bottom-left-radius:0;border-bottom-right-radius:0;
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(10,30,70,.06),0 30px 70px -20px rgba(8,32,84,.55)}
.sc-plane.fr .sc-panel>*{width:auto!important}
.sc-plane.fr.k-code .sc-code{width:auto;-webkit-mask-image:none;mask-image:none}
/* panels: content sits in the near 600px, the rest of the surface fades out */
.sc-panel>.sw,.sc-panel>.br,.sc-panel>.ch,.sc-panel>.sp,.sc-panel>.st-b{box-sizing:border-box;width:540px}
.sc-panel>.sp{width:600px}
.sc-panel>.st-b{display:block;padding:4px 0}
.k-stat .st-r{grid-template-columns:190px 1fr 76px;gap:20px;height:52px;padding:0 24px;font-size:16.5px;border-bottom:1px solid rgba(23,24,26,.055)}
.k-stat .st-r>span.sc-m{font-size:14.5px}.k-stat .st-r i{height:14px;border-radius:7px}.k-stat .st-r em{font-size:14.5px}
.sc-chip.num{padding:20px 24px;max-width:280px;align-items:flex-start;bottom:48px;gap:14px}
.sc-chip.num .sc-big{font-size:60px;letter-spacing:-.045em}
.sc-chip.num small{font-size:13.5px;margin-top:10px;line-height:1.35}
.sc-panel>.sw{padding:26px 28px 10px}
.sc-panel>.sw .sw-h strong{font-size:23px}.sc-panel>.sw .sw-h small{font-size:15px}
.sc-panel>.sw .sw-r{font-size:16.5px;padding:15px 0}.sc-panel>.sw .sw-r .sc-m{font-size:15px}
.sc-panel>.sw .sw-h .sc-tile{width:46px;height:46px}.sc-panel>.sw .sw-h .sc-tile svg{width:26px;height:26px}
.sc-panel>.br{padding:28px 28px 10px}
.sc-panel>.br .br-r{grid-template-columns:170px 1fr 140px;padding:20px 0}
.sc-panel>.br .br-r strong{font-size:17px}.sc-panel>.br .br-r small{font-size:13.5px}.sc-panel>.br .br-r em{font-size:26px}
.sc-panel>.ch{padding:22px 28px}
.sc-panel>.ch .ch-h{flex-wrap:wrap}.sc-panel>.ch .ch-h strong{font-size:18px}.sc-panel>.ch .ch-p{height:150px}
.sc-panel>.sp{padding:30px 14px}
.sc-panel>.sp .sp-s strong{font-size:15px}.sc-panel>.sp .sp-s b{width:44px;height:44px;font-size:16px}
.sc-panel>.sp .sp-row::before,.sc-panel>.sp .sp-l{top:21px}
.k-banner .sc-r{grid-template-columns:1.5fr 1fr!important;font-size:16px;height:52px;width:470px;box-sizing:border-box}
.sc-chip.cf{top:36px;right:52px;bottom:auto;width:270px;box-sizing:border-box;padding:14px 18px}
.sc-stage>.bn.cfb{width:270px;padding:18px 18px 16px}
.k-banner.cf .sc-r{grid-template-columns:1.15fr 1fr!important}
.sc-chip.cf strong{font-size:15px}.sc-chip.cf small{font-size:12.5px;line-height:1.35;margin-top:4px}
/* the outlined row is inset 10px each side, so it is 20px narrower: its columns then line up with the other rows */
.k-banner .sc-r.focus{width:450px}
.sc-stage>.bn{position:absolute;right:52px;bottom:48px;width:300px;z-index:3;transform:rotate(2deg);box-shadow:inset 0 1px 0 #fff,0 40px 70px -24px rgba(8,32,84,.7)}
.sc-stage>.bn.ghost{background:rgba(255,255,255,.62);box-shadow:none}
/* setting: a floating card, camera A or B, with room on every side */
.sc-plane.k-sw{width:500px}
.k-sw.v0{transform:translate(-50%,-56%) rotateX(26deg) rotateZ(-9deg)}
.k-sw.v1{transform:translate(-50%,-56%) rotateX(26deg) rotateZ(7deg)}
.k-sw .sw{width:100%;padding:26px 30px 16px;box-shadow:inset 0 1px 0 #fff,0 50px 70px -28px rgba(8,32,84,.6)}
.k-sw .sw-h{padding-bottom:20px}
.k-sw .sw-h strong{font-size:20px}
.k-sw .sw-r{padding:13px 0;font-size:15px}
.k-sw .sw-r .sc-m{font-size:13.5px}
/* the same card front-on (camera D): 40px from the top and sides, running out at the bottom */
/* camera S (owner, from visual 1): a large card with a soft tilt, a little room at the top, left and right,
   dissolving into the gradient toward the bottom and right */
.sc-plane.soft{width:590px;transform:translate(-50%,-32%) rotateX(12deg) rotateZ(-4deg)}
.sc-plane.soft>.sc-panel{min-height:430px;border-radius:20px;padding:10px 0 0;
  box-shadow:inset 0 1px 0 #fff,0 50px 70px -28px rgba(8,32,84,.6);
  -webkit-mask-image:radial-gradient(150% 105% at 20% 6%,#000 50%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.3) 76%,transparent 90%);
  mask-image:radial-gradient(150% 105% at 20% 6%,#000 50%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.3) 76%,transparent 90%);
  -webkit-mask-composite:source-over;mask-composite:add}
/* lite: a gentler fade, for cards whose content reaches low or sits on few rows */
.sc-plane.soft.lite>.sc-panel{-webkit-mask-image:radial-gradient(170% 130% at 20% 0%,#000 62%,rgba(0,0,0,.8) 76%,rgba(0,0,0,.4) 90%,transparent 100%);mask-image:radial-gradient(170% 130% at 20% 0%,#000 62%,rgba(0,0,0,.8) 76%,rgba(0,0,0,.4) 90%,transparent 100%)}
.sc-plane.soft .sc-panel>.sp{width:auto;padding:34px 30px 0}
.sc-plane.soft .sp p.sc-k{margin:0 14px 30px}
.sc-plane.soft .sc-panel>.st-b{width:auto;padding:6px 0}
.sc-plane.soft.k-stat .st-r{padding:0 34px;grid-template-columns:170px 1fr 70px;gap:16px;height:50px;font-size:15.5px}
.sc-plane.soft.lite .sc-panel>.br{padding:26px 40px 0}
.sc-plane.soft .sc-bar{padding:12px 30px 14px;font-size:14px}
.sc-plane.soft .sc-panel>.ch{width:auto;padding:22px 30px}
.sc-plane.soft .ch-h strong{font-size:21px}.sc-plane.soft .ch-lg{font-size:13px;flex-basis:100%;margin-top:4px}
.sc-plane.soft .ch-p{height:170px}.sc-plane.soft .ch-pin em{font-size:14.5px;padding:10px 14px}
.sc-plane.soft .ob{width:auto}
.sc-plane.soft .sc-panel>.br{width:auto;padding:16px 30px 0}
.sc-plane.soft .br p.sc-k{margin-bottom:6px}
.sc-plane.soft .br .br-r{grid-template-columns:205px 1fr 128px;padding:10px 0}
.sc-plane.soft .br .br-r small{white-space:nowrap}
.sc-plane.soft.k-table .sc-r{padding:0 30px;height:52px;font-size:15px;gap:14px}
.sc-plane.soft.k-table .sc-r.h{height:38px;font-size:11.5px}
.sc-plane.soft.k-table .sc-r.focus{margin:2px 14px;padding:0 16px}
.sc-plane.soft.k-table .sc-r .sc-m{font-size:13px}
.sc-plane.soft .ob-add{padding:18px 30px 12px}
.sc-plane.soft .ob .sc-r{padding:0 30px;font-size:14.5px;height:48px;grid-template-columns:1fr 1.5fr .5fr .7fr!important;gap:12px}
.sc-plane.soft .ob .sc-r .sc-m{font-size:12.5px}
.sc-plane.soft .ob .ob-hi{margin:2px 14px;padding:0 16px!important}
.sc-stage>.sc-plane.soft~.sc-chip{bottom:36px;right:44px}
/* owner: tilted like camera A, a little room at the top, left and right, running out at the bottom */
.sc-plane.k-sw.big{width:590px;transform:translate(-50%,-34%) rotateX(12deg) rotateZ(-4deg)}
.k-sw.big .sw{width:100%;min-height:430px;padding:30px 38px 0}
/* the gradient comes over the card toward the bottom right, as on the tilted panels */
.k-sw.big .sw{-webkit-mask-image:radial-gradient(150% 105% at 20% 6%,#000 50%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.3) 76%,transparent 90%);mask-image:radial-gradient(150% 105% at 20% 6%,#000 50%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.3) 76%,transparent 90%)}
.k-sw.big .sw-h{padding-bottom:22px}
.k-sw.big.many .sw{padding-top:22px}.k-sw.big.many .sw-h{padding-bottom:12px}.k-sw.big.many .sw-r{padding:9px 0;font-size:17px}.k-sw.big.many .sw-r.focus{padding:9px 16px;margin-top:4px}
.sc-plane.soft .br .br-r:nth-last-child(2):nth-child(2),.sc-plane.soft .br .br-r:last-child:nth-child(3){padding:20px 0}
.k-sw.big .sw-h strong{font-size:27px;letter-spacing:-.02em}.k-sw.big .sw-h small{font-size:16px;margin-top:5px}
.k-sw.big .sw-h .tg{transform:scale(1.75)}.k-sw.big .sw-h>span.tgw:not(.sc-tile){margin-right:18px}
.k-sw.big .sw-r{padding:17px 0;font-size:18px}.k-sw.big .sw-r>.sc-stk:first-child{min-width:0;flex:1;overflow:hidden;justify-items:start}.k-sw.big .sw-r>.sc-stk:first-child>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-sw.big .sw-r>.sc-stk:first-child>.sc-acc{color:var(--ink);font-weight:600}.k-sw.big .sw-r .sc-m{font-size:16px}
.k-sw.big .sw-r>.sc-stk:last-child>span,.k-sw.big .sw-r>span.sc-ok,.k-sw.big .sw-r>span.sc-bad{font-size:15.5px;padding:7px 15px}
.k-sw.big .sw-r.focus{margin:8px -16px 0;padding:17px 16px;border-radius:14px}
.sc-stage>.k-sw.big~.sc-chip{bottom:36px;right:64px}
/* a state that changes is a badge, so the change reads at a glance */
.k-sw .sw-r>.sc-stk:last-child>span,.k-sw .sw-r>span.sc-ok,.k-sw .sw-r>span.sc-bad{padding:5px 12px;border-radius:999px;font-size:13.5px;justify-self:end}
.k-sw .sw-r .sc-bad{background:rgba(198,40,40,.1)}.k-sw .sw-r .sc-ok{background:rgba(18,129,63,.12)}
.k-sw .sw-r.focus{border-top-color:transparent;border-radius:12px;margin:6px -14px 0;padding:14px;background:rgba(0,113,227,.07);box-shadow:inset 0 0 0 1.5px rgba(0,113,227,.7)}
.k-sw .sw-r.focus.res{--rb:rgba(18,129,63,.08);--rc:rgba(18,129,63,.6);background:rgba(18,129,63,.08);box-shadow:inset 0 0 0 1.5px rgba(18,129,63,.6)}
.k-sw.tall .sw{zoom:.8}.sc-plane.k-sw.tall{width:420px}
.k-sw .sw-r.focus+.sw-r{border-top-color:transparent}
.sc-stage>.k-sw~.sc-chip{bottom:40px;padding:14px 20px}.sc-stage>.k-sw~.sc-chip strong{font-size:18px;color:#12813f}.sc-stage>.k-sw~.sc-chip small{font-size:13px;margin-top:3px}
/* code: the editor is the panel */
.k-code .sc-code{width:880px;box-sizing:border-box;transform:none;border-radius:22px;padding-bottom:20px;
  -webkit-mask-image:linear-gradient(100deg,#000 78%,rgba(0,0,0,.6) 92%,transparent 100%),linear-gradient(180deg,#000 84%,transparent 100%);
  mask-image:linear-gradient(100deg,#000 78%,rgba(0,0,0,.6) 92%,transparent 100%),linear-gradient(180deg,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.k-code .cd-l{font-size:16px;line-height:36px;grid-template-columns:56px 1fr}
.sc-plane.tl.k-code .sc-code,.sc-plane.tr.k-code .sc-code{padding-left:150px}.k-code .cd-bar{font-size:13px;padding:15px 22px}
.sc-stage>.k-code~.sc-chip{bottom:48px}
/* before and after: two floating cards, camera A behind and B in front (mirrored on odd articles) */
.sc-plane.k-vs{width:286px}
.k-vs .vs-c{width:100%;transform:none;opacity:1}
.k-vs.a{transform:translate(-103%,-70%) rotateX(26deg) rotateZ(-9deg);opacity:.9}
.k-vs.b{width:330px;z-index:2;transform:translate(-18%,-40%) rotateX(26deg) rotateZ(7deg)}
.k-vs.a .vs-c{box-shadow:inset 0 1px 0 #fff,0 30px 50px -26px rgba(8,32,84,.45)}
.k-vs.b .vs-c{padding:26px 26px 28px;gap:10px;box-shadow:0 0 0 2px rgba(0,113,227,.75),0 60px 80px -30px rgba(8,32,84,.7)}
.k-vs.b .vs-c strong{font-size:40px}.k-vs.b .vs-c strong .sc-m{font-size:24px}.k-vs.b .vs-c>span{font-size:14.5px}
.v1>.k-vs.a{transform:translate(3%,-70%) rotateX(26deg) rotateZ(7deg)}
.v1>.k-vs.b{transform:translate(-82%,-40%) rotateX(26deg) rotateZ(-9deg)}
/* route: camera C, the strip leaves the frame at both ends */
.sc-plane.k-route{width:auto;transform:translate(-50%,-56%) rotateX(26deg) rotateZ(-9deg)}
.k-route .rt-w{margin:0;zoom:.95}
.k-route .rt-w.has-skip{margin-top:64px}
.k-route .rt-n{box-shadow:inset 0 1px 0 #fff,0 40px 50px -24px rgba(8,32,84,.55)}
.k-route .rt-n.focus{transform:scale(1.1) translateY(-8px);box-shadow:0 0 0 2px rgba(0,113,227,.75),0 60px 60px -24px rgba(8,32,84,.7)}
/* decoded string: one bar, camera A or B */
.sc-plane.k-decode{width:auto}
.k-decode .dc{margin:0;zoom:1.2}
.k-decode.mid .dc{zoom:1}
.k-decode.v0{transform:translate(-50%,-50%) rotateX(26deg) rotateZ(-9deg)}
.k-decode.v1{transform:translate(-50%,-50%) rotateX(26deg) rotateZ(7deg)}
.k-decode.long{left:76px;transform:translate(0,-50%) rotateX(26deg) rotateZ(-9deg);transform-origin:20% 50%}
.sc p.dc-pre{position:absolute;left:52px;top:44px}
/* stack: a pile of floating cards, camera A or B */
.sk3{position:absolute;left:50%;top:50%;width:440px;height:96px;transform:translate(-58%,-28%) rotateX(26deg) rotateZ(-9deg)}
.sk3.v1{transform:translate(-56%,-28%) rotateX(26deg) rotateZ(7deg)}
.sk3 .sk-c{left:0;top:0;bottom:auto;width:440px;padding:22px 24px;gap:14px;opacity:1;transform-origin:left bottom}
.sk3 .sk-c:not(.k0){align-items:flex-start;padding-top:15px}
.sk3 .sk-c strong{font-size:19px}.sk3 .sk-c strong .sc-m{font-size:17px}.sk3 .sk-c small{font-size:13.5px}.sk3 .sk-c small .sc-m{font-size:13px}.sk3 .sk-c em{font-size:14.5px}
.sk3 .sk-c .sc-tile{width:42px;height:42px}.sk3 .sk-c .sc-tile svg{width:24px;height:24px}
.sk3 .k0{box-shadow:0 0 0 2px rgba(0,113,227,.75),0 60px 70px -24px rgba(8,32,84,.7)}
.sk3 .k1{transform:translate(34px,-60px) scale(.96)}
.sk3 .k2{transform:translate(68px,-116px) scale(.92);opacity:.95}
.sk3 .k3{transform:translate(102px,-168px) scale(.88);opacity:.88}
.sc p.sc-note{left:auto;right:52px;bottom:48px;transform:none;border-radius:16px;padding:13px 18px;font-size:14.5px;font-weight:650;line-height:1.3;
  white-space:normal;max-width:320px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.92));border:1px solid rgba(255,255,255,.95);
  box-shadow:0 1px 2px rgba(10,30,70,.08),0 22px 44px -14px rgba(8,32,84,.5)}
/* scripted story: agency client onboarding, one 8 s loop */
.ob{width:650px;box-sizing:border-box}
.ob-add{display:flex;gap:10px;padding:16px 24px 12px}
.ob-in{flex:1;height:44px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(0,113,227,.65),0 0 0 4px rgba(0,113,227,.1);display:flex;align-items:center;padding:0 14px;font-family:var(--mono);font-size:15px}
.ob-in b{font-weight:500;display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid var(--accent);animation:obType 8s infinite}
.ob-btn{height:44px;padding:0 18px;border-radius:12px;background:#17181a;color:#fff;font-size:15px;font-weight:650;display:flex;align-items:center;animation:obBtn 8s ease infinite}
.ob-new{overflow:hidden;max-height:58px;animation:obRow 8s cubic-bezier(.2,.8,.2,1) infinite}
.ob .sc-r{font-size:15px}
.ob-hi{color:var(--ink);font-weight:600;border-radius:10px;margin:2px 10px;padding:0 14px!important;border-bottom-color:transparent!important;
  background:rgba(18,129,63,.07);box-shadow:inset 0 0 0 1.5px rgba(18,129,63,.55);animation:obHi 8s ease infinite}
.sc-r>span.ob-tr{height:6px;border-radius:3px;background:rgba(23,24,26,.1)}
.ob-tr i{display:block;height:100%;width:100%;border-radius:3px;background:#1f9d55}
.ob-new .ob-tr i{animation:obFill 8s ease infinite}
.ob-s1,.ob-s2{opacity:0;color:var(--accent-deep)}
.ob-s1{animation:obS1 8s ease infinite}.ob-s2{animation:obS2 8s ease infinite}.ob-s3{animation:obS3 8s ease infinite}
.sc-chip.ob-chip{bottom:48px;animation:obChip 8s cubic-bezier(.2,.8,.2,1) infinite}
.sc-chip.ob-chip{padding:16px 20px}.sc-chip.ob-chip strong{font-size:19px}.sc-chip.ob-chip small{font-size:13px;margin-top:4px}
@keyframes obType{0%,3%{width:0}17%,100%{width:var(--ch)}}
@keyframes obBtn{0%,18%{transform:none;box-shadow:0 0 0 0 rgba(0,113,227,0)}21%{transform:scale(.93);box-shadow:0 0 0 5px rgba(0,113,227,.35)}25%,100%{transform:none;box-shadow:0 0 0 0 rgba(0,113,227,0)}}
@keyframes obRow{0%,23%{max-height:0;opacity:0}31%,95%{max-height:58px;opacity:1}100%{max-height:58px;opacity:0}}
@keyframes obFill{0%,31%{width:0;background:var(--accent)}35%,43%{width:34%;background:var(--accent)}47%,55%{width:67%;background:var(--accent)}59%,100%{width:100%;background:#1f9d55}}
@keyframes obS1{0%,30%{opacity:0}34%,43%{opacity:1}46%,100%{opacity:0}}
@keyframes obS2{0%,43%{opacity:0}47%,55%{opacity:1}58%,100%{opacity:0}}
@keyframes obS3{0%,56%{opacity:0;transform:translateY(5px)}60%,100%{opacity:1;transform:none}}
@keyframes obHi{0%,56%{background:rgba(0,113,227,.06);box-shadow:inset 0 0 0 1.5px rgba(0,113,227,.6)}61%,100%{background:rgba(18,129,63,.07);box-shadow:inset 0 0 0 1.5px rgba(18,129,63,.55)}}
@keyframes obChip{0%,62%{opacity:0;transform:translateY(12px) scale(.96)}69%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes scIn{0%,12%{opacity:0;transform:translateY(10px) scale(.97)}20%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes scOut{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}
@keyframes scOn{0%,44%{opacity:0;transform:translateY(6px)}52%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes scRow{0%,30%{background:rgba(0,113,227,0);box-shadow:inset 0 0 0 1.5px rgba(0,113,227,0)}38%,94%{background:rgba(0,113,227,.07);box-shadow:inset 0 0 0 1.5px rgba(0,113,227,.75)}100%{background:rgba(0,113,227,0);box-shadow:inset 0 0 0 1.5px rgba(0,113,227,0)}}
/* ---- MOTION: one 8 s sequence per draft. Beats and keyframes are generated (motion_css). ----
   mi enter · mo leave · gw grow from the left · mw widen from --w0 · mt wipe in · mk strike out ·
   mp press · mc pointer · rN ring at beat N · xN dim at beat N · dN stagger. Static styles = the end state. */
.sc-stage{animation:scLoop 8s linear infinite}
@keyframes scLoop{0%{opacity:0}3.5%,95.5%{opacity:1}100%{opacity:0}}
.sc-plane:not(.mi),.sk3{animation:scCam 8s cubic-bezier(.3,0,.5,1) infinite}
@keyframes scCam{0%{scale:1;translate:0 0}100%{scale:1.05;translate:0 -5px}}
.sc-plane.fr{transform-origin:50% 0}
.mi,.mo,.gw,.gh,.mw,.mt,.mk,.mp,.mc,.tg.to-on,.tg.to-off,.tg.to-on::after,.tg.to-off::after{animation-duration:8s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.85,.25,1.12)}
.mo,.mk,.mt,.mw{animation-timing-function:cubic-bezier(.3,.7,.2,1)}
.mi{--t0:0 14px}.mi.fl{--t0:-22px 0}.mi.pp{--t0:0 10px;--s0:.84}.mi.fd{--t0:0 5px}.mi.up{--t0:0 44px}
.mi.fa{--t0:-150px 26px;--s0:.8}.v1>.mi.fa{--t0:150px 26px}
.gw{transform-origin:left center}
.gh{transform-origin:center bottom}
.gh.last{animation-timing-function:cubic-bezier(.3,.6,.3,1)}
.ch-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:3px}
.ch-bars i{flex:1;border-radius:4px 4px 0 0;background:rgba(0,113,227,.28)}
.ch-bars i.last,.ch-bars i.hot{background:var(--accent)}
.ch-w{position:absolute;inset:0}
.m-cur{position:absolute;right:16%;top:52%;width:30px;height:30px;z-index:9;opacity:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.2 1.8L11 19z' fill='%2317181a' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.bn-b{position:relative}.bn-b .m-cur{right:14%;top:46%}
.tgw{position:relative;flex:none;display:inline-flex}.tgw .m-cur{right:-8px;top:8px}
.sw-h>span.tgw:not(.sc-tile){flex:none;margin-right:9px}.sw-h .tgw .tg{margin-right:0}
.ob-btn{position:relative}.ob-btn .m-cur{right:18%;top:50%}
.tg.on::after,.tg.to-on::after{transform:none;translate:18px 0}
.tg[style*="--dl"],.tg[style*="--dl"]::after{animation-delay:var(--dl)}
.tg.to-on,.tg.to-off,.tg.to-on::after,.tg.to-off::after{animation-timing-function:cubic-bezier(.3,1.4,.5,1)}
@keyframes mi1{0%,5%{opacity:0;translate:var(--t0);scale:var(--s0,1)}12%,100%{opacity:1;translate:0 0;scale:1}}
@keyframes mo1{0%,5%{opacity:1}8%,100%{opacity:0}}
@keyframes gw1{0%,5%{scale:0 1}14%,100%{scale:1 1}}
@keyframes gh1{0%,5%{scale:1 0}13%,100%{scale:1 1}}
@keyframes mw1{0%,5%{width:var(--w0,0%)}16%,100%{width:var(--w1,100%)}}
@keyframes mt1{0%,5%{clip-path:inset(-30% 100% -30% 0)}19%,100%{clip-path:inset(-30% -6% -30% 0)}}
@keyframes mk1{0%,5%{text-decoration-color:transparent;color:var(--ink)}9%,100%{text-decoration-color:rgba(200,40,40,.55);color:rgba(23,24,26,.5)}}
@keyframes mr1{0%,5%{background-color:transparent;box-shadow:inset 0 0 0 1.5px transparent}8%,100%{background-color:var(--rb,rgba(0,113,227,.07));box-shadow:inset 0 0 0 1.5px var(--rc,rgba(0,113,227,.75))}}
@keyframes mx1{0%,5%{color:rgba(23,24,26,.72)}9%,100%{color:rgba(23,24,26,.42)}}
@keyframes mp1{0%,4%{scale:1;box-shadow:0 0 0 0 rgba(0,113,227,0)}7%{scale:.92}11%,100%{scale:1}}
@keyframes mc1{0%,0.5%{opacity:0;translate:var(--dx,40px) var(--dy,30px)}1.2000000000000002%{opacity:1;translate:var(--dx,74px) var(--dy,58px)}4%{opacity:1;translate:0 0;scale:1}7%{scale:.8}10%{opacity:1;scale:1}15%,100%{opacity:0;translate:0 0}}
@keyframes tn1{0%,5%{background-color:rgba(23,24,26,.2)}6.2%,100%{background-color:var(--accent)}}
@keyframes kn1{0%,5%{translate:0 0}6.2%,100%{translate:18px 0}}
@keyframes tf1{0%,5%{background-color:var(--accent)}6.2%,100%{background-color:rgba(23,24,26,.2)}}
@keyframes kf1{0%,5%{translate:18px 0}6.2%,100%{translate:0 0}}
.mi.b1{animation-name:mi1}.mo.b1{animation-name:mo1}.gw.b1{animation-name:gw1}.gh.b1{animation-name:gh1}.mw.b1{animation-name:mw1}.mt.b1{animation-name:mt1}.mk.b1{animation-name:mk1}.mp.b1{animation-name:mp1}.mc.b1{animation-name:mc1}
.tg.to-on.b1{animation-name:tn1}.tg.to-on.b1::after{animation-name:kn1}.tg.to-off.b1{animation-name:tf1}.tg.to-off.b1::after{animation-name:kf1}
.sc-r.off.x1 .sc-m:first-child{animation:mk1 8s infinite both}
.sp-row.b1::after{animation:mw1 8s cubic-bezier(.3,.7,.2,1) infinite both;--w0:0%}
.mi.b1.r1{animation-name:mi1,mr1}.mi.b1.x1{animation-name:mi1,mx1}
.mi.b2.r1{animation-name:mi2,mr1}.mi.b2.x1{animation-name:mi2,mx1}
.mi.b3.r1{animation-name:mi3,mr1}.mi.b3.x1{animation-name:mi3,mx1}
.mi.b4.r1{animation-name:mi4,mr1}.mi.b4.x1{animation-name:mi4,mx1}
.mi.b5.r1{animation-name:mi5,mr1}.mi.b5.x1{animation-name:mi5,mx1}
.mi.b6.r1{animation-name:mi6,mr1}.mi.b6.x1{animation-name:mi6,mx1}
@keyframes mi2{0%,17%{opacity:0;translate:var(--t0);scale:var(--s0,1)}24%,100%{opacity:1;translate:0 0;scale:1}}
@keyframes mo2{0%,17%{opacity:1}20%,100%{opacity:0}}
@keyframes gw2{0%,17%{scale:0 1}26%,100%{scale:1 1}}
@keyframes gh2{0%,17%{scale:1 0}25%,100%{scale:1 1}}
@keyframes mw2{0%,17%{width:var(--w0,0%)}28%,100%{width:var(--w1,100%)}}
@keyframes mt2{0%,17%{clip-path:inset(-30% 100% -30% 0)}31%,100%{clip-path:inset(-30% -6% -30% 0)}}
@keyframes mk2{0%,17%{text-decoration-color:transparent;color:var(--ink)}21%,100%{text-decoration-color:rgba(200,40,40,.55);color:rgba(23,24,26,.5)}}
@keyframes mr2{0%,17%{background-color:transparent;box-shadow:inset 0 0 0 1.5px transparent}20%,100%{background-color:var(--rb,rgba(0,113,227,.07));box-shadow:inset 0 0 0 1.5px var(--rc,rgba(0,113,227,.75))}}
@keyframes mx2{0%,17%{color:rgba(23,24,26,.72)}21%,100%{color:rgba(23,24,26,.42)}}
@keyframes mp2{0%,16%{scale:1;box-shadow:0 0 0 0 rgba(0,113,227,0)}19%{scale:.92}23%,100%{scale:1}}
@keyframes mc2{0%,12.5%{opacity:0;translate:var(--dx,40px) var(--dy,30px)}13.2%{opacity:1;translate:var(--dx,74px) var(--dy,58px)}16%{opacity:1;translate:0 0;scale:1}19%{scale:.8}22%{opacity:1;scale:1}27%,100%{opacity:0;translate:0 0}}
@keyframes tn2{0%,17%{background-color:rgba(23,24,26,.2)}18.2%,100%{background-color:var(--accent)}}
@keyframes kn2{0%,17%{translate:0 0}18.2%,100%{translate:18px 0}}
@keyframes tf2{0%,17%{background-color:var(--accent)}18.2%,100%{background-color:rgba(23,24,26,.2)}}
@keyframes kf2{0%,17%{translate:18px 0}18.2%,100%{translate:0 0}}
.mi.b2{animation-name:mi2}.mo.b2{animation-name:mo2}.gw.b2{animation-name:gw2}.gh.b2{animation-name:gh2}.mw.b2{animation-name:mw2}.mt.b2{animation-name:mt2}.mk.b2{animation-name:mk2}.mp.b2{animation-name:mp2}.mc.b2{animation-name:mc2}
.tg.to-on.b2{animation-name:tn2}.tg.to-on.b2::after{animation-name:kn2}.tg.to-off.b2{animation-name:tf2}.tg.to-off.b2::after{animation-name:kf2}
.sc-r.off.x2 .sc-m:first-child{animation:mk2 8s infinite both}
.sp-row.b2::after{animation:mw2 8s cubic-bezier(.3,.7,.2,1) infinite both;--w0:0%}
.mi.b1.r2{animation-name:mi1,mr2}.mi.b1.x2{animation-name:mi1,mx2}
.mi.b2.r2{animation-name:mi2,mr2}.mi.b2.x2{animation-name:mi2,mx2}
.mi.b3.r2{animation-name:mi3,mr2}.mi.b3.x2{animation-name:mi3,mx2}
.mi.b4.r2{animation-name:mi4,mr2}.mi.b4.x2{animation-name:mi4,mx2}
.mi.b5.r2{animation-name:mi5,mr2}.mi.b5.x2{animation-name:mi5,mx2}
.mi.b6.r2{animation-name:mi6,mr2}.mi.b6.x2{animation-name:mi6,mx2}
@keyframes mi3{0%,30%{opacity:0;translate:var(--t0);scale:var(--s0,1)}37%,100%{opacity:1;translate:0 0;scale:1}}
@keyframes mo3{0%,30%{opacity:1}33%,100%{opacity:0}}
@keyframes gw3{0%,30%{scale:0 1}39%,100%{scale:1 1}}
@keyframes gh3{0%,30%{scale:1 0}38%,100%{scale:1 1}}
@keyframes mw3{0%,30%{width:var(--w0,0%)}41%,100%{width:var(--w1,100%)}}
@keyframes mt3{0%,30%{clip-path:inset(-30% 100% -30% 0)}44%,100%{clip-path:inset(-30% -6% -30% 0)}}
@keyframes mk3{0%,30%{text-decoration-color:transparent;color:var(--ink)}34%,100%{text-decoration-color:rgba(200,40,40,.55);color:rgba(23,24,26,.5)}}
@keyframes mr3{0%,30%{background-color:transparent;box-shadow:inset 0 0 0 1.5px transparent}33%,100%{background-color:var(--rb,rgba(0,113,227,.07));box-shadow:inset 0 0 0 1.5px var(--rc,rgba(0,113,227,.75))}}
@keyframes mx3{0%,30%{color:rgba(23,24,26,.72)}34%,100%{color:rgba(23,24,26,.42)}}
@keyframes mp3{0%,29%{scale:1;box-shadow:0 0 0 0 rgba(0,113,227,0)}32%{scale:.92}36%,100%{scale:1}}
@keyframes mc3{0%,25.5%{opacity:0;translate:var(--dx,40px) var(--dy,30px)}26.2%{opacity:1;translate:var(--dx,74px) var(--dy,58px)}29%{opacity:1;translate:0 0;scale:1}32%{scale:.8}35%{opacity:1;scale:1}40%,100%{opacity:0;translate:0 0}}
@keyframes tn3{0%,30%{background-color:rgba(23,24,26,.2)}31.2%,100%{background-color:var(--accent)}}
@keyframes kn3{0%,30%{translate:0 0}31.2%,100%{translate:18px 0}}
@keyframes tf3{0%,30%{background-color:var(--accent)}31.2%,100%{background-color:rgba(23,24,26,.2)}}
@keyframes kf3{0%,30%{translate:18px 0}31.2%,100%{translate:0 0}}
.mi.b3{animation-name:mi3}.mo.b3{animation-name:mo3}.gw.b3{animation-name:gw3}.gh.b3{animation-name:gh3}.mw.b3{animation-name:mw3}.mt.b3{animation-name:mt3}.mk.b3{animation-name:mk3}.mp.b3{animation-name:mp3}.mc.b3{animation-name:mc3}
.tg.to-on.b3{animation-name:tn3}.tg.to-on.b3::after{animation-name:kn3}.tg.to-off.b3{animation-name:tf3}.tg.to-off.b3::after{animation-name:kf3}
.sc-r.off.x3 .sc-m:first-child{animation:mk3 8s infinite both}
.sp-row.b3::after{animation:mw3 8s cubic-bezier(.3,.7,.2,1) infinite both;--w0:0%}
.mi.b1.r3{animation-name:mi1,mr3}.mi.b1.x3{animation-name:mi1,mx3}
.mi.b2.r3{animation-name:mi2,mr3}.mi.b2.x3{animation-name:mi2,mx3}
.mi.b3.r3{animation-name:mi3,mr3}.mi.b3.x3{animation-name:mi3,mx3}
.mi.b4.r3{animation-name:mi4,mr3}.mi.b4.x3{animation-name:mi4,mx3}
.mi.b5.r3{animation-name:mi5,mr3}.mi.b5.x3{animation-name:mi5,mx3}
.mi.b6.r3{animation-name:mi6,mr3}.mi.b6.x3{animation-name:mi6,mx3}
@keyframes mi4{0%,43%{opacity:0;translate:var(--t0);scale:var(--s0,1)}50%,100%{opacity:1;translate:0 0;scale:1}}
@keyframes mo4{0%,43%{opacity:1}46%,100%{opacity:0}}
@keyframes gw4{0%,43%{scale:0 1}52%,100%{scale:1 1}}
@keyframes gh4{0%,43%{scale:1 0}51%,100%{scale:1 1}}
@keyframes mw4{0%,43%{width:var(--w0,0%)}54%,100%{width:var(--w1,100%)}}
@keyframes mt4{0%,43%{clip-path:inset(-30% 100% -30% 0)}57%,100%{clip-path:inset(-30% -6% -30% 0)}}
@keyframes mk4{0%,43%{text-decoration-color:transparent;color:var(--ink)}47%,100%{text-decoration-color:rgba(200,40,40,.55);color:rgba(23,24,26,.5)}}
@keyframes mr4{0%,43%{background-color:transparent;box-shadow:inset 0 0 0 1.5px transparent}46%,100%{background-color:var(--rb,rgba(0,113,227,.07));box-shadow:inset 0 0 0 1.5px var(--rc,rgba(0,113,227,.75))}}
@keyframes mx4{0%,43%{color:rgba(23,24,26,.72)}47%,100%{color:rgba(23,24,26,.42)}}
@keyframes mp4{0%,42%{scale:1;box-shadow:0 0 0 0 rgba(0,113,227,0)}45%{scale:.92}49%,100%{scale:1}}
@keyframes mc4{0%,38.5%{opacity:0;translate:var(--dx,40px) var(--dy,30px)}39.2%{opacity:1;translate:var(--dx,74px) var(--dy,58px)}42%{opacity:1;translate:0 0;scale:1}45%{scale:.8}48%{opacity:1;scale:1}53%,100%{opacity:0;translate:0 0}}
@keyframes tn4{0%,43%{background-color:rgba(23,24,26,.2)}44.2%,100%{background-color:var(--accent)}}
@keyframes kn4{0%,43%{translate:0 0}44.2%,100%{translate:18px 0}}
@keyframes tf4{0%,43%{background-color:var(--accent)}44.2%,100%{background-color:rgba(23,24,26,.2)}}
@keyframes kf4{0%,43%{translate:18px 0}44.2%,100%{translate:0 0}}
.mi.b4{animation-name:mi4}.mo.b4{animation-name:mo4}.gw.b4{animation-name:gw4}.gh.b4{animation-name:gh4}.mw.b4{animation-name:mw4}.mt.b4{animation-name:mt4}.mk.b4{animation-name:mk4}.mp.b4{animation-name:mp4}.mc.b4{animation-name:mc4}
.tg.to-on.b4{animation-name:tn4}.tg.to-on.b4::after{animation-name:kn4}.tg.to-off.b4{animation-name:tf4}.tg.to-off.b4::after{animation-name:kf4}
.sc-r.off.x4 .sc-m:first-child{animation:mk4 8s infinite both}
.sp-row.b4::after{animation:mw4 8s cubic-bezier(.3,.7,.2,1) infinite both;--w0:0%}
.mi.b1.r4{animation-name:mi1,mr4}.mi.b1.x4{animation-name:mi1,mx4}
.mi.b2.r4{animation-name:mi2,mr4}.mi.b2.x4{animation-name:mi2,mx4}
.mi.b3.r4{animation-name:mi3,mr4}.mi.b3.x4{animation-name:mi3,mx4}
.mi.b4.r4{animation-name:mi4,mr4}.mi.b4.x4{animation-name:mi4,mx4}
.mi.b5.r4{animation-name:mi5,mr4}.mi.b5.x4{animation-name:mi5,mx4}
.mi.b6.r4{animation-name:mi6,mr4}.mi.b6.x4{animation-name:mi6,mx4}
@keyframes mi5{0%,56%{opacity:0;translate:var(--t0);scale:var(--s0,1)}63%,100%{opacity:1;translate:0 0;scale:1}}
@keyframes mo5{0%,56%{opacity:1}59%,100%{opacity:0}}
@keyframes gw5{0%,56%{scale:0 1}65%,100%{scale:1 1}}
@keyframes gh5{0%,56%{scale:1 0}64%,100%{scale:1 1}}
@keyframes mw5{0%,56%{width:var(--w0,0%)}67%,100%{width:var(--w1,100%)}}
@keyframes mt5{0%,56%{clip-path:inset(-30% 100% -30% 0)}70%,100%{clip-path:inset(-30% -6% -30% 0)}}
@keyframes mk5{0%,56%{text-decoration-color:transparent;color:var(--ink)}60%,100%{text-decoration-color:rgba(200,40,40,.55);color:rgba(23,24,26,.5)}}
@keyframes mr5{0%,56%{background-color:transparent;box-shadow:inset 0 0 0 1.5px transparent}59%,100%{background-color:var(--rb,rgba(0,113,227,.07));box-shadow:inset 0 0 0 1.5px var(--rc,rgba(0,113,227,.75))}}
@keyframes mx5{0%,56%{color:rgba(23,24,26,.72)}60%,100%{color:rgba(23,24,26,.42)}}
@keyframes mp5{0%,55%{scale:1;box-shadow:0 0 0 0 rgba(0,113,227,0)}58%{scale:.92}62%,100%{scale:1}}
@keyframes mc5{0%,51.5%{opacity:0;translate:var(--dx,40px) var(--dy,30px)}52.2%{opacity:1;translate:var(--dx,74px) var(--dy,58px)}55%{opacity:1;translate:0 0;scale:1}58%{scale:.8}61%{opacity:1;scale:1}66%,100%{opacity:0;translate:0 0}}
@keyframes tn5{0%,56%{background-color:rgba(23,24,26,.2)}57.2%,100%{background-color:var(--accent)}}
@keyframes kn5{0%,56%{translate:0 0}57.2%,100%{translate:18px 0}}
@keyframes tf5{0%,56%{background-color:var(--accent)}57.2%,100%{background-color:rgba(23,24,26,.2)}}
@keyframes kf5{0%,56%{translate:18px 0}57.2%,100%{translate:0 0}}
.mi.b5{animation-name:mi5}.mo.b5{animation-name:mo5}.gw.b5{animation-name:gw5}.gh.b5{animation-name:gh5}.mw.b5{animation-name:mw5}.mt.b5{animation-name:mt5}.mk.b5{animation-name:mk5}.mp.b5{animation-name:mp5}.mc.b5{animation-name:mc5}
.tg.to-on.b5{animation-name:tn5}.tg.to-on.b5::after{animation-name:kn5}.tg.to-off.b5{animation-name:tf5}.tg.to-off.b5::after{animation-name:kf5}
.sc-r.off.x5 .sc-m:first-child{animation:mk5 8s infinite both}
.sp-row.b5::after{animation:mw5 8s cubic-bezier(.3,.7,.2,1) infinite both;--w0:0%}
.mi.b1.r5{animation-name:mi1,mr5}.mi.b1.x5{animation-name:mi1,mx5}
.mi.b2.r5{animation-name:mi2,mr5}.mi.b2.x5{animation-name:mi2,mx5}
.mi.b3.r5{animation-name:mi3,mr5}.mi.b3.x5{animation-name:mi3,mx5}
.mi.b4.r5{animation-name:mi4,mr5}.mi.b4.x5{animation-name:mi4,mx5}
.mi.b5.r5{animation-name:mi5,mr5}.mi.b5.x5{animation-name:mi5,mx5}
.mi.b6.r5{animation-name:mi6,mr5}.mi.b6.x5{animation-name:mi6,mx5}
@keyframes mi6{0%,68%{opacity:0;translate:var(--t0);scale:var(--s0,1)}75%,100%{opacity:1;translate:0 0;scale:1}}
@keyframes mo6{0%,68%{opacity:1}71%,100%{opacity:0}}
@keyframes gw6{0%,68%{scale:0 1}77%,100%{scale:1 1}}
@keyframes gh6{0%,68%{scale:1 0}76%,100%{scale:1 1}}
@keyframes mw6{0%,68%{width:var(--w0,0%)}79%,100%{width:var(--w1,100%)}}
@keyframes mt6{0%,68%{clip-path:inset(-30% 100% -30% 0)}82%,100%{clip-path:inset(-30% -6% -30% 0)}}
@keyframes mk6{0%,68%{text-decoration-color:transparent;color:var(--ink)}72%,100%{text-decoration-color:rgba(200,40,40,.55);color:rgba(23,24,26,.5)}}
@keyframes mr6{0%,68%{background-color:transparent;box-shadow:inset 0 0 0 1.5px transparent}71%,100%{background-color:var(--rb,rgba(0,113,227,.07));box-shadow:inset 0 0 0 1.5px var(--rc,rgba(0,113,227,.75))}}
@keyframes mx6{0%,68%{color:rgba(23,24,26,.72)}72%,100%{color:rgba(23,24,26,.42)}}
@keyframes mp6{0%,67%{scale:1;box-shadow:0 0 0 0 rgba(0,113,227,0)}70%{scale:.92}74%,100%{scale:1}}
@keyframes mc6{0%,63.5%{opacity:0;translate:var(--dx,40px) var(--dy,30px)}64.2%{opacity:1;translate:var(--dx,74px) var(--dy,58px)}67%{opacity:1;translate:0 0;scale:1}70%{scale:.8}73%{opacity:1;scale:1}78%,100%{opacity:0;translate:0 0}}
@keyframes tn6{0%,68%{background-color:rgba(23,24,26,.2)}69.2%,100%{background-color:var(--accent)}}
@keyframes kn6{0%,68%{translate:0 0}69.2%,100%{translate:18px 0}}
@keyframes tf6{0%,68%{background-color:var(--accent)}69.2%,100%{background-color:rgba(23,24,26,.2)}}
@keyframes kf6{0%,68%{translate:18px 0}69.2%,100%{translate:0 0}}
.mi.b6{animation-name:mi6}.mo.b6{animation-name:mo6}.gw.b6{animation-name:gw6}.gh.b6{animation-name:gh6}.mw.b6{animation-name:mw6}.mt.b6{animation-name:mt6}.mk.b6{animation-name:mk6}.mp.b6{animation-name:mp6}.mc.b6{animation-name:mc6}
.tg.to-on.b6{animation-name:tn6}.tg.to-on.b6::after{animation-name:kn6}.tg.to-off.b6{animation-name:tf6}.tg.to-off.b6::after{animation-name:kf6}
.sc-r.off.x6 .sc-m:first-child{animation:mk6 8s infinite both}
.sp-row.b6::after{animation:mw6 8s cubic-bezier(.3,.7,.2,1) infinite both;--w0:0%}
.mi.b1.r6{animation-name:mi1,mr6}.mi.b1.x6{animation-name:mi1,mx6}
.mi.b2.r6{animation-name:mi2,mr6}.mi.b2.x6{animation-name:mi2,mx6}
.mi.b3.r6{animation-name:mi3,mr6}.mi.b3.x6{animation-name:mi3,mx6}
.mi.b4.r6{animation-name:mi4,mr6}.mi.b4.x6{animation-name:mi4,mx6}
.mi.b5.r6{animation-name:mi5,mr6}.mi.b5.x6{animation-name:mi5,mx6}
.mi.b6.r6{animation-name:mi6,mr6}.mi.b6.x6{animation-name:mi6,mx6}
.d1{animation-delay:0.07s}.d2{animation-delay:0.14s}.d3{animation-delay:0.21s}.d4{animation-delay:0.28s}.d5{animation-delay:0.35s}.d6{animation-delay:0.42s}.d7{animation-delay:0.49s}.d8{animation-delay:0.56s}.d9{animation-delay:0.63s}.d10{animation-delay:0.70s}.d11{animation-delay:0.77s}.d12{animation-delay:0.84s}.d13{animation-delay:0.91s}.d14{animation-delay:0.98s}
@media(prefers-reduced-motion:reduce){.sc *,.sc *::before,.sc *::after{animation:none!important}.sc .mo{opacity:0}}