/* H27 Email campaign builder — 30s loop: empty canvas → "Build with AI" → type the brief → AI drafts every block in the shop's voice → Import HTML as a block → Next → audience pulled from the CRM. Needs hero-graphics.css shell. */
.rcg .h27{--t:30s;--yl:#ffd21f;--em:#161616}
.rcg .h27 .panel{padding:0}
.rcg .h27 .ic{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rcg .h27 .btn{height:22px;padding:0 8px;font-size:8.5px;border-radius:5px;gap:4px}
.rcg .h27 .pz::after{content:"";position:absolute;inset:-3px;border-radius:7px;border:1.5px solid var(--blue);opacity:0;pointer-events:none}
/* step pills */
.rcg .h27 .stp{position:absolute;left:16px;top:12px;height:26px;display:flex;gap:2px;padding:3px;border-radius:7px;background:var(--g-hi,#f3f4f6);border:1px solid var(--g-line,#e6e8ed)}
.rcg .h27 .stp span{display:flex;align-items:center;padding:0 10px;border-radius:5px;font-size:9px;font-weight:600;color:var(--g-mute,#6b7280);white-space:nowrap}
.rcg .h27 .stp .p1{animation:ecP1 var(--t) step-end infinite}.rcg .h27 .stp .p2{animation:ecP2 var(--t) step-end infinite}
@keyframes ecP1{0%,84%{background:var(--g-bg,#fff);color:var(--g-ink,#111318);box-shadow:0 1px 2px rgba(0,0,0,.08)}84.01%,100%{background:transparent;color:var(--g-mute,#6b7280);box-shadow:none}}
@keyframes ecP2{0%,84%{background:transparent;color:var(--g-mute,#6b7280);box-shadow:none}84.01%,100%{background:var(--g-bg,#fff);color:var(--g-ink,#111318);box-shadow:0 1px 2px rgba(0,0,0,.08)}}
/* frame */
.rcg .h27 .fr{position:absolute;left:16px;top:46px;width:768px;height:356px;border:1px solid var(--g-line,#e6e8ed);border-radius:8px;overflow:hidden;background:var(--g-bg,#fff)}
.rcg .h27 .rail{position:absolute;left:0;top:0;bottom:0;width:44px;border-right:1px solid var(--g-line,#e6e8ed);display:grid;align-content:start;gap:12px;padding:12px 0}
.rcg .h27 .rail span{display:grid;justify-items:center;gap:3px;font-size:7px;font-weight:600;color:var(--g-mute,#6b7280)}.rcg .h27 .rail .ic{width:12px;height:12px}.rcg .h27 .rail span.on{color:var(--blue)}
.rcg .h27 .rail .r-add{animation:ecRa var(--t) step-end infinite}.rcg .h27 .rail .r-ai{animation:ecRb var(--t) step-end infinite}
@keyframes ecRa{0%,8%{color:var(--blue)}8.01%,55.67%{color:var(--g-mute,#6b7280)}55.68%,100%{color:var(--blue)}}@keyframes ecRb{0%,8%{color:var(--g-mute,#6b7280)}8.01%,55.67%{color:var(--blue)}55.68%,100%{color:var(--g-mute,#6b7280)}}
.rcg .h27 .blk{position:absolute;left:44px;top:0;bottom:0;width:184px;border-right:1px solid var(--g-line,#e6e8ed);padding:12px 12px 0}
.rcg .h27 .blk .h{font-size:11px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.rcg .h27 .blk .lab{font-size:7.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g-ink2,#3a3f4b);margin-bottom:7px}.rcg .h27 .blk .lab small{display:block;font-size:7px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--g-mute,#6b7280);margin-top:1px}
.rcg .h27 .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}
.rcg .h27 .tl{height:36px;border:1px solid var(--g-line,#e6e8ed);border-radius:5px;padding:5px 6px;display:grid;align-content:space-between;font-size:7px;font-weight:500;color:var(--g-ink2,#3a3f4b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--g-bg,#fff)}
.rcg .h27 .tl b{font-size:9px;font-weight:600;line-height:10px;color:var(--g-ink,#111318)}.rcg .h27 .tl .ic{color:var(--g-ink,#111318)}
.rcg .h27 .tiles.cols .tl{height:30px}.rcg .h27 .tl i{display:block;height:7px;border-radius:2px;border:1px solid var(--g-mute3,#d1d5db)}.rcg .h27 .tl i.c1{width:20px}.rcg .h27 .tl i.c2{width:20px;background:linear-gradient(90deg,transparent 46%,var(--g-mute3,#d1d5db) 46% 54%,transparent 54%)}.rcg .h27 .tl i.c3{width:21px;background:linear-gradient(90deg,transparent 31%,var(--g-mute3,#d1d5db) 31% 36%,transparent 36% 64%,var(--g-mute3,#d1d5db) 64% 69%,transparent 69%)}
.rcg .h27 .less{height:20px;border:1px solid var(--g-line,#e6e8ed);border-radius:5px;display:grid;place-items:center;font-size:8px;font-weight:600;margin-bottom:12px}
.rcg .h27 .tl.fX{animation:ecFX var(--t) ease-out infinite}
@keyframes ecFX{0%,76%{border-color:var(--g-line,#e6e8ed);background:var(--g-bg,#fff)}76.4%,78%{border-color:var(--blue);background:var(--g-bluetint,rgba(27,100,243,.07))}79.5%,100%{border-color:var(--g-line,#e6e8ed);background:var(--g-bg,#fff)}}
/* canvas toolbar + subject */
.rcg .h27 .tb{position:absolute;left:228px;top:0;right:0;height:34px;border-bottom:1px solid var(--g-line,#e6e8ed)}
.rcg .h27 .tb .btn{position:absolute;top:6px;justify-content:center;padding:0 6px;white-space:nowrap}.rcg .h27 .b-ai{left:10px;width:88px}.rcg .h27 .b-im{left:104px;width:84px}
.rcg .h27 .dev{position:absolute;left:50%;top:6px;transform:translateX(-50%);display:flex;gap:4px}.rcg .h27 .dev i{width:26px;height:22px;border-radius:5px;display:grid;place-items:center;color:var(--g-ink2,#3a3f4b)}.rcg .h27 .dev i.on{background:var(--blue);color:#fff}
.rcg .h27 .tb .rt{position:absolute;right:10px;top:6px;display:flex;gap:4px}.rcg .h27 .tb .rt .btn{position:static}.rcg .h27 .ib{width:22px;height:22px;display:grid;place-items:center;color:var(--g-mute,#6b7280)}
.rcg .h27 .sub{position:absolute;left:228px;top:34px;right:0;height:34px;border-bottom:1px solid var(--g-line,#e6e8ed);padding:0 16px;display:flex;align-items:center}
.rcg .h27 .sub .sw{display:grid}.rcg .h27 .sub .sw>span{font-size:9.5px;font-weight:600;white-space:nowrap}.rcg .h27 .sub small{display:block;font-size:7.5px;font-weight:400;color:var(--g-mute,#6b7280);margin-top:2px}
.rcg .h27 .sub .a{color:var(--g-mute2,#9aa0ab);animation:ecOutS var(--t) step-end infinite}.rcg .h27 .sub .b{animation:ecInS var(--t) ease-out infinite}
@keyframes ecOutS{0%,35.33%{opacity:1}35.34%,100%{opacity:0}}@keyframes ecInS{0%,35.33%{opacity:0;transform:translateY(3px)}36.5%,100%{opacity:1;transform:none}}
.rcg .h27 .dm{animation:ecDim var(--t) ease-out infinite}@keyframes ecDim{0%,84%{opacity:1}86.67%,100%{opacity:.35}}
/* canvas body */
.rcg .h27 .cvb{position:absolute;left:228px;top:68px;right:0;bottom:0;background:var(--g-soft,#f4f5f7);overflow:hidden}
.rcg .h27 .emp{position:absolute;left:120px;top:16px;width:300px;height:260px;border:1.5px dashed var(--g-mute3,#d1d5db);border-radius:8px;display:grid;place-items:center;align-content:center;gap:4px;text-align:center;padding:0 40px;color:var(--g-mute,#6b7280);animation:ecEmp var(--t) ease-out infinite}
.rcg .h27 .emp .ic{width:18px;height:18px;color:var(--blue);margin-bottom:6px;stroke-width:1.5}.rcg .h27 .emp b{font-size:10px;color:var(--g-ink,#111318)}.rcg .h27 .emp span{font-size:8px;line-height:1.45}
@keyframes ecEmp{0%,28.67%{opacity:1}29.7%,100%{opacity:0}}
.rcg .h27 .sk{position:absolute;left:120px;top:16px;width:300px;height:280px;border-radius:8px;background:var(--em);padding:22px 20px;opacity:0;animation:ecSk var(--t) ease-out infinite}
.rcg .h27 .sk i{display:block;height:8px;border-radius:3px;margin-bottom:7px;background:linear-gradient(90deg,rgba(255,255,255,.08) 25%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.08) 75%);background-size:200% 100%;animation:ecShim 1.2s linear infinite}.rcg .h27 .sk i.big{height:90px;margin-top:4px}
@keyframes ecShim{to{background-position:-200% 0}}
@keyframes ecSk{0%,28.67%{opacity:0}29.7%,35.33%{opacity:1}36.7%,100%{opacity:0}}
/* the email */
.rcg .h27 .em{position:absolute;left:120px;top:16px;width:300px;background:var(--em);color:#fff;border-radius:8px;padding:22px 20px 18px;opacity:0;animation:ecEm var(--t) cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ecEm{0%,35.33%{opacity:0;transform:none}36.5%,43%{opacity:1;transform:none}45.33%{transform:translateY(-50px)}48%{transform:translateY(-110px)}50%,52%{transform:translateY(-150px)}54%,74.67%{transform:none}77.33%,84%{opacity:1;transform:translateY(-212px)}86.67%,100%{opacity:.15;transform:translateY(-212px)}}
.rcg .h27 .eb{opacity:0;transform:translateY(6px)}
.rcg .h27 .logo{font-size:15px;font-weight:900;font-style:italic;letter-spacing:-.03em;text-align:center;margin-bottom:12px;text-transform:uppercase}
.rcg .h27 .hd{font-size:12.5px;font-weight:800;line-height:1.2;letter-spacing:-.02em;margin-bottom:8px}
.rcg .h27 .em .p{font-size:7.6px;line-height:1.5;color:rgba(255,255,255,.86);margin-bottom:8px;text-wrap:pretty}
.rcg .h27 .im{height:100px;border-radius:4px;margin:4px 0 12px;background:linear-gradient(135deg,#4a080c,#b3121c 45%,#e01c2a 60%,#6e0d13);position:relative;overflow:hidden}
.rcg .h27 .im::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 62%)}
.rcg .h27 .im .chip{position:absolute;left:8px;bottom:8px;height:16px;font-size:7.5px;background:rgba(0,0,0,.6);border-color:transparent;color:#fff;z-index:1}.rcg .h27 .im .chip b{font-weight:700;margin-left:3px}
.rcg .h27 .cta{height:26px;border-radius:5px;background:var(--yl);color:#111;font-size:9px;font-weight:700;display:grid;place-items:center;width:150px;margin:0 auto 12px}
.rcg .h27 .fb{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);text-align:center;position:relative}
.rcg .h27 .fb .soc{display:flex;justify-content:center;gap:6px;margin-bottom:8px}.rcg .h27 .fb .soc i{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.14)}
.rcg .h27 .fb small{font-size:7px;line-height:1.5;color:rgba(255,255,255,.55);display:block}.rcg .h27 .fb small u{text-decoration:underline}
.rcg .h27 .fb .tag{position:absolute;right:0;top:8px;height:14px;padding:0 5px;border-radius:3px;background:var(--blue);color:#fff;font-size:6.5px;font-weight:700;letter-spacing:.04em;display:flex;align-items:center;opacity:0;animation:ecTag var(--t) ease-out infinite}
@keyframes ecTag{0%,77.33%{opacity:0}78%,82%{opacity:1}83%,100%{opacity:0}}
.rcg .h27 .b1{animation:ecB1 var(--t) ease-out infinite}.rcg .h27 .b2{animation:ecB2 var(--t) ease-out infinite}.rcg .h27 .b3{animation:ecB3 var(--t) ease-out infinite}.rcg .h27 .b4{animation:ecB4 var(--t) ease-out infinite}.rcg .h27 .b5{animation:ecB5 var(--t) ease-out infinite}.rcg .h27 .b6{animation:ecB6 var(--t) ease-out infinite}.rcg .h27 .b7{animation:ecB7 var(--t) ease-out infinite}.rcg .h27 .b8{animation:ecB8 var(--t) ease-out infinite}
@keyframes ecB1{0%,36.67%{opacity:0;transform:translateY(6px)}38%,100%{opacity:1;transform:none}}
@keyframes ecB2{0%,38.67%{opacity:0;transform:translateY(6px)}40%,100%{opacity:1;transform:none}}
@keyframes ecB3{0%,40.67%{opacity:0;transform:translateY(6px)}42%,100%{opacity:1;transform:none}}
@keyframes ecB4{0%,43%{opacity:0;transform:translateY(6px)}44.3%,100%{opacity:1;transform:none}}
@keyframes ecB5{0%,45.33%{opacity:0;transform:translateY(6px)}46.7%,100%{opacity:1;transform:none}}
@keyframes ecB6{0%,48%{opacity:0;transform:translateY(6px)}49.3%,100%{opacity:1;transform:none}}
@keyframes ecB7{0%,50%{opacity:0;transform:translateY(6px)}51.3%,100%{opacity:1;transform:none}}
@keyframes ecB8{0%,76%{opacity:0;transform:translateY(6px)}77.3%,100%{opacity:1;transform:none}}
/* audience card (after Next) */
.rcg .h27 .aud{position:absolute;left:90px;top:44px;width:360px;background:var(--g-bg,#fff);border:1px solid var(--g-line,#e6e8ed);border-radius:10px;box-shadow:0 24px 50px -20px rgba(0,0,0,.35);padding:14px 16px;opacity:0;animation:ecAud var(--t) cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ecAud{0%,84%{opacity:0;transform:translateY(10px)}86.67%,100%{opacity:1;transform:none}}
.rcg .h27 .aud .ah{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.rcg .h27 .aud .ah b{font-size:11.5px;font-weight:700}
.rcg .h27 .aud .fl{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}.rcg .h27 .aud .fl .chip b{font-weight:700;color:var(--g-ink,#111318);margin-left:3px}
.rcg .h27 .aud .cnt{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--g-soft,#f1f2f5)}.rcg .h27 .aud .cnt b{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--blue)}.rcg .h27 .aud .cnt span{font-size:10px;font-weight:600;line-height:1.35}.rcg .h27 .aud .cnt small{display:block;font-size:8px;font-weight:400;color:var(--g-mute,#6b7280);margin-top:2px}
/* Build-with-AI side drawer (slides over the blocks panel) */
.rcg .h27 .aip{position:absolute;left:44px;top:0;bottom:0;width:184px;background:var(--g-bg,#fff);border-right:1px solid var(--g-line,#e6e8ed);padding:12px;z-index:6;opacity:0;animation:ecAip var(--t) cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ecAip{0%,8%{opacity:0;transform:translateX(-8px)}9.67%,54.67%{opacity:1;transform:none}55.67%,100%{opacity:0;transform:translateX(-8px)}}
.rcg .h27 .aip .ah{display:grid;gap:3px;margin-bottom:10px}.rcg .h27 .aip .ttl{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:-.01em}.rcg .h27 .aip .ttl .ic{color:var(--blue);width:11px;height:11px}.rcg .h27 .aip .ah span{font-size:7.5px;line-height:1.35;color:var(--g-mute,#6b7280)}
.rcg .h27 .q{height:70px;border:1px solid var(--g-line,#e6e8ed);border-radius:6px;padding:8px;font-size:8.4px;line-height:13px;color:var(--g-ink,#111318);display:grid;align-content:start;overflow:hidden}
.rcg .h27 .q span{display:block;white-space:nowrap;clip-path:inset(0 100% 0 0)}
.rcg .h27 .q .l1{animation:ecT1 var(--t) steps(28,end) infinite}.rcg .h27 .q .l2{animation:ecT2 var(--t) steps(27,end) infinite}.rcg .h27 .q .l3{animation:ecT3 var(--t) steps(29,end) infinite}.rcg .h27 .q .l4{animation:ecT4 var(--t) steps(30,end) infinite}
@keyframes ecT1{0%,10.67%{clip-path:inset(0 100% 0 0)}14.67%,100%{clip-path:inset(0 0 0 0)}}
@keyframes ecT2{0%,14.67%{clip-path:inset(0 100% 0 0)}18.67%,100%{clip-path:inset(0 0 0 0)}}
@keyframes ecT3{0%,18.67%{clip-path:inset(0 100% 0 0)}22.67%,100%{clip-path:inset(0 0 0 0)}}
@keyframes ecT4{0%,22.67%{clip-path:inset(0 100% 0 0)}26.67%,100%{clip-path:inset(0 0 0 0)}}
.rcg .h27 .af{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-top:8px}
.rcg .h27 .af .sw{flex:1;min-width:0;display:grid}.rcg .h27 .af .sw>span{font-size:7.8px;line-height:1.35;color:var(--g-mute,#6b7280);white-space:normal;padding-top:3px}.rcg .h27 .af .sw .ic{display:inline-block;vertical-align:-1px;margin-right:3px}
.rcg .h27 .sug{margin-top:18px;padding-top:12px;border-top:1px solid var(--g-soft,#f1f2f5);display:grid;gap:5px}.rcg .h27 .sug .lab{margin-bottom:3px}.rcg .h27 .sug span{height:24px;border:1px solid var(--g-line,#e6e8ed);border-radius:5px;padding:0 8px;display:flex;align-items:center;font-size:7.5px;font-weight:500;color:var(--g-ink2,#3a3f4b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcg .h27 .st0{animation:ecSt0 var(--t) step-end infinite}.rcg .h27 .st1{opacity:0;animation:ecSt1 var(--t) step-end infinite}.rcg .h27 .st1 b{color:var(--g-ink,#111318);font-weight:600}.rcg .h27 .af .sw>.st2{opacity:0;color:var(--grn);font-weight:600;animation:ecSt2 var(--t) ease-out infinite}.rcg .h27 .st2 .ic{stroke-width:2.6}
@keyframes ecSt0{0%,28.67%{opacity:1}28.68%,100%{opacity:0}}@keyframes ecSt1{0%,28.67%{opacity:0}28.68%,51.33%{opacity:1}51.34%,100%{opacity:0}}@keyframes ecSt2{0%,51.33%{opacity:0;transform:translateY(3px)}52.3%,100%{opacity:1;transform:none}}
.rcg .h27 .dots{display:inline-flex;gap:2px;margin-left:2px}.rcg .h27 .dots i{width:3px;height:3px;border-radius:50%;background:var(--blue);animation:hgblink 1s ease-in-out infinite}.rcg .h27 .dots i:nth-child(2){animation-delay:.2s}.rcg .h27 .dots i:nth-child(3){animation-delay:.4s}
.rcg .h27 .snd{width:22px;height:22px;border-radius:6px;background:var(--blue);color:#fff;display:grid;place-items:center;position:relative;flex:none}
/* Import HTML modal */
.rcg .h27 .imp{position:absolute;left:338px;top:50px;width:320px;height:232px;background:var(--g-bg,#fff);border:1px solid var(--g-line,#e6e8ed);border-radius:10px;box-shadow:0 24px 50px -20px rgba(0,0,0,.35);padding:12px;z-index:6;opacity:0;animation:ecImp var(--t) cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ecImp{0%,61.33%{opacity:0;transform:translateY(6px) scale(.98)}62.33%,73.33%{opacity:1;transform:none}74.33%,100%{opacity:0;transform:translateY(4px) scale(.98)}}
.rcg .h27 .imp .ih b{font-size:11px;font-weight:700;display:block}.rcg .h27 .imp .ih span{font-size:7.8px;color:var(--g-mute,#6b7280);display:block;margin-top:2px}
.rcg .h27 .code{height:104px;margin:10px 0;border:1px solid var(--g-line,#e6e8ed);border-radius:6px;background:var(--g-soft,#f6f7f9);padding:8px 10px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:7.2px;line-height:14px;color:var(--g-ink2,#3a3f4b);white-space:nowrap;overflow:hidden}
.rcg .h27 .code span{display:block;opacity:0;transform:translateX(-4px)}.rcg .h27 .code .in1{padding-left:10px}.rcg .h27 .code .in2{padding-left:20px}.rcg .h27 .code em{font-style:normal;color:#b42318}.rcg .h27 .code u{text-decoration:none;color:var(--blue)}.rcg .h27 .code i{font-style:normal;color:var(--grn)}
.rcg .h27 .code .l1{animation:ecL1 var(--t) ease-out infinite}.rcg .h27 .code .l2{animation:ecL2 var(--t) ease-out infinite}.rcg .h27 .code .l3{animation:ecL3 var(--t) ease-out infinite}.rcg .h27 .code .l4{animation:ecL4 var(--t) ease-out infinite}.rcg .h27 .code .l5{animation:ecL5 var(--t) ease-out infinite}.rcg .h27 .code .l6{animation:ecL6 var(--t) ease-out infinite}
@keyframes ecL1{0%,62.67%{opacity:0;transform:translateX(-4px)}63.4%,100%{opacity:1;transform:none}}
@keyframes ecL2{0%,64%{opacity:0;transform:translateX(-4px)}64.7%,100%{opacity:1;transform:none}}
@keyframes ecL3{0%,65.33%{opacity:0;transform:translateX(-4px)}66%,100%{opacity:1;transform:none}}
@keyframes ecL4{0%,66.67%{opacity:0;transform:translateX(-4px)}67.4%,100%{opacity:1;transform:none}}
@keyframes ecL5{0%,68%{opacity:0;transform:translateX(-4px)}68.7%,100%{opacity:1;transform:none}}
@keyframes ecL6{0%,69.33%{opacity:0;transform:translateX(-4px)}70%,100%{opacity:1;transform:none}}
.rcg .h27 .seg{display:flex;gap:2px;padding:2px;border-radius:6px;background:var(--g-hi,#f3f4f6);height:22px;width:170px}.rcg .h27 .seg span{flex:1;display:grid;place-items:center;font-size:7.8px;font-weight:600;color:var(--g-mute,#6b7280);border-radius:4px}.rcg .h27 .seg span.on{background:var(--g-bg,#fff);color:var(--g-ink,#111318);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.rcg .h27 .ibs{position:absolute;right:12px;bottom:12px;display:flex;gap:6px}.rcg .h27 .b-go{width:54px;justify-content:center}
/* footer bar */
.rcg .h27 .ft{position:absolute;left:16px;right:16px;top:412px;height:26px;display:flex;justify-content:space-between;align-items:center}.rcg .h27 .ft .btn{height:24px;font-size:9px;padding:0 12px}.rcg .h27 .b-nx{width:52px;justify-content:center}
/* pulses — A build 8% · B send 28.33% · C import-html 60.67% · D import 73.33% · E next 83.33% */
.rcg .h27 .b-ai::after{animation:ecPz1 var(--t) ease-out infinite}.rcg .h27 .snd::after{animation:ecPz2 var(--t) ease-out infinite}.rcg .h27 .b-im::after{animation:ecPz3 var(--t) ease-out infinite}.rcg .h27 .b-go::after{animation:ecPz4 var(--t) ease-out infinite}.rcg .h27 .b-nx::after{animation:ecPz5 var(--t) ease-out infinite}
@keyframes ecPz1{0%,8%{opacity:0;transform:scale(1)}8.7%{opacity:1}11%,100%{opacity:0;transform:scale(1.3)}}
@keyframes ecPz2{0%,28.33%{opacity:0;transform:scale(1)}29%{opacity:1}31.3%,100%{opacity:0;transform:scale(1.3)}}
@keyframes ecPz3{0%,60.67%{opacity:0;transform:scale(1)}61.3%{opacity:1}63.6%,100%{opacity:0;transform:scale(1.3)}}
@keyframes ecPz4{0%,73.33%{opacity:0;transform:scale(1)}74%{opacity:1}76.3%,100%{opacity:0;transform:scale(1.3)}}
@keyframes ecPz5{0%,83.33%{opacity:0;transform:scale(1)}84%{opacity:1}86.3%,100%{opacity:0;transform:scale(1.3)}}
/* toast + cursor */
.rcg .h27 .toast{right:30px;bottom:60px;animation:ecToast var(--t) ease-out infinite}
@keyframes ecToast{0%,55.33%{opacity:0;transform:translateY(10px)}56.3%,59.5%{opacity:1;transform:none}61%,100%{opacity:0;transform:translateY(4px)}}
.rcg .h27 .cur{animation:ecCur var(--t) cubic-bezier(.3,.7,.3,1) infinite}
@keyframes ecCur{0%,2%{opacity:0;left:420px;top:300px}7.33%{opacity:1;left:294px;top:61px}8%{left:294px;top:61px}8.5%{left:292px;top:59px}9.3%{left:294px;top:61px}12%,26.67%{left:300px;top:260px}27.6%{left:218px;top:197px}28.33%{left:216px;top:195px}29%,31%{opacity:1;left:218px;top:197px}32%,56%{opacity:0;left:300px;top:260px}57%{opacity:1;left:540px;top:180px}60%{left:383px;top:61px}60.67%{left:381px;top:59px}61.3%{left:383px;top:61px}63%{left:470px;top:150px}72.67%{left:632px;top:303px}73.33%{left:630px;top:301px}74%{left:632px;top:303px}75.5%,80%{opacity:0;left:650px;top:330px}80.6%{opacity:1;left:700px;top:390px}82.67%{left:755px;top:423px}83.33%{left:753px;top:421px}84%{left:755px;top:423px}86%,100%{opacity:0;left:760px;top:430px}}
/* dark tokens */
html[data-theme="dark"] .rcg .h27 .code em{color:#f87171}html[data-theme="dark"] .rcg .h27 .cvb{background:#0f1218}
/* reduced motion → finished draft */
@media (prefers-reduced-motion:reduce){.rcg .h27 *,.rcg .h27 *::before,.rcg .h27 *::after{animation:none!important}.rcg .h27 .cur,.rcg .h27 .toast,.rcg .h27 .emp,.rcg .h27 .sk,.rcg .h27 .aip,.rcg .h27 .imp,.rcg .h27 .aud,.rcg .h27 .fb .tag{display:none}.rcg .h27 .em,.rcg .h27 .eb{opacity:1;transform:none}.rcg .h27 .sub .a{opacity:0}.rcg .h27 .sub .b{opacity:1}}

/* ===== H28 Campaign calendar (800×600 feature-row graphic) — 24s loop: Create → schedule a promo → drag to reschedule → today's review request sends → journey touchpoints fill in. Colour = campaign type. ===== */
.rcg .ab.hg.h28{width:800px;height:600px;--t:24s}
.rcg .h28 .panel{padding:0}
.rcg .h28 .ic{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rcg .h28 .pz::after{content:"";position:absolute;inset:-3px;border-radius:8px;border:1.5px solid var(--blue);opacity:0;pointer-events:none}
.rcg .h28 .hdr{position:absolute;left:22px;top:18px}.rcg .h28 .hdr .t{font-size:16px;font-weight:700;letter-spacing:-.02em}.rcg .h28 .hdr .s{font-size:9.5px;color:var(--g-mute,#6b7280);margin-top:3px}
.rcg .h28 .acts{position:absolute;right:22px;top:18px;display:flex;gap:8px}.rcg .h28 .acts .btn{height:26px;font-size:9.5px;padding:0 10px}.rcg .h28 .b-cr{width:70px;justify-content:center}
.rcg .h28 .row2{position:absolute;left:22px;right:22px;top:54px;height:24px;display:flex;align-items:center;justify-content:space-between}
.rcg .h28 .pills span{padding:4px 10px}
.rcg .h28 .leg{display:flex;gap:10px;font-size:8px;color:var(--g-mute,#6b7280)}.rcg .h28 .leg span{display:flex;align-items:center;gap:4px}.rcg .h28 .leg i{width:6px;height:6px;border-radius:50%;background:var(--c)}.rcg .h28 .leg i.d{background:transparent;border:1px dashed var(--g-mute2,#9aa0ab)}
.rcg .h28 .cal{position:absolute;left:22px;right:22px;top:86px;bottom:22px;border:1px solid var(--g-line,#e6e8ed);border-radius:8px;background:var(--g-bg,#fff);overflow:hidden}
.rcg .h28 .mh{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--g-line,#e6e8ed)}.rcg .h28 .mh b{font-size:12px;font-weight:700;letter-spacing:-.01em}.rcg .h28 .mh .nav{display:flex;align-items:center;gap:6px}.rcg .h28 .mh .btn{height:22px;font-size:8.5px}.rcg .h28 .mh .ar{width:20px;height:22px;display:grid;place-items:center;color:var(--g-ink2,#3a3f4b)}
.rcg .h28 .dn{height:20px;display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--g-line,#e6e8ed)}.rcg .h28 .dn span{font-size:7.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g-mute,#6b7280);display:flex;align-items:center;padding:0 7px}
.rcg .h28 .gr{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(5,1fr);height:432px}
.rcg .h28 .d{border-right:1px solid var(--g-line,#e6e8ed);border-bottom:1px solid var(--g-line,#e6e8ed);padding:5px 6px;display:grid;align-content:start;gap:3px;min-width:0}.rcg .h28 .d:nth-child(7n){border-right:0}.rcg .h28 .d:nth-child(n+29){border-bottom:0}.rcg .h28 .d.o{background:var(--g-soft,#f8f9fb)}
.rcg .h28 .d .n{font-size:9.5px;color:var(--g-ink2,#3a3f4b);height:16px;display:flex;align-items:center;margin-bottom:1px}.rcg .h28 .d.o .n{color:var(--g-mute2,#9aa0ab)}.rcg .h28 .d .n.td span{width:16px;height:16px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:8.5px;font-weight:700;margin-left:-3px}
.rcg .h28 .cp{height:16px;border-radius:4px;padding:0 5px;border:1px solid var(--c);display:flex;align-items:center;gap:4px;font-size:7.4px;font-weight:600;color:var(--g-ink2,#3a3f4b);background:var(--bgc);white-space:nowrap;overflow:hidden;min-width:0}.rcg .h28 .cp::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c);flex:none}.rcg .h28 .cp em{font-style:normal;overflow:hidden;text-overflow:ellipsis}
.rcg .h28 .pr{--c:var(--org);--bgc:var(--g-otint,#fffbeb)}.rcg .h28 .rv{--c:var(--grn);--bgc:var(--g-gtint,#f0fdf4)}.rcg .h28 .jn{--c:var(--blue);--bgc:var(--g-bluetint,rgba(27,100,243,.07))}.rcg .h28 .rm{--c:var(--pur);--bgc:var(--g-ptint,#f5f3ff)}
.rcg .h28 .cp.dr{--c:var(--g-mute2,#9aa0ab);--bgc:transparent;border-style:dashed;color:var(--g-mute,#6b7280)}
.rcg .h28 .cp.sn{background:var(--c);border-color:var(--c);color:#fff}.rcg .h28 .cp.sn::before{background:#fff}.rcg .h28 .cp.sn .ic{stroke-width:3;width:8px;height:8px;margin-left:auto}
.rcg .h28 .slot{position:relative;height:16px}.rcg .h28 .slot .cp{position:absolute;inset:0}
.rcg .h28 .slot .a{animation:ccOutS var(--t) step-end infinite}.rcg .h28 .slot .b{opacity:0;animation:ccInS var(--t) ease-out infinite}
@keyframes ccOutS{0%,58.33%{opacity:1}58.34%,100%{opacity:0}}@keyframes ccInS{0%,58.33%{opacity:0;transform:scale(.96)}59.5%,100%{opacity:1;transform:none}}
/* journey + reminder chips that fill in on their own */
.rcg .h28 .a1{opacity:0;animation:ccA1 var(--t) cubic-bezier(.2,.8,.2,1) infinite}.rcg .h28 .a2{opacity:0;animation:ccA2 var(--t) cubic-bezier(.2,.8,.2,1) infinite}.rcg .h28 .a3{opacity:0;animation:ccA3 var(--t) cubic-bezier(.2,.8,.2,1) infinite}.rcg .h28 .a4{opacity:0;animation:ccA4 var(--t) cubic-bezier(.2,.8,.2,1) infinite}.rcg .h28 .a5{opacity:0;animation:ccA5 var(--t) cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ccA1{0%,75%{opacity:0;transform:translateY(4px) scale(.96)}76.2%,100%{opacity:1;transform:none}}
@keyframes ccA2{0%,76.67%{opacity:0;transform:translateY(4px) scale(.96)}77.9%,100%{opacity:1;transform:none}}
@keyframes ccA3{0%,78.33%{opacity:0;transform:translateY(4px) scale(.96)}79.5%,100%{opacity:1;transform:none}}
@keyframes ccA4{0%,80%{opacity:0;transform:translateY(4px) scale(.96)}81.2%,100%{opacity:1;transform:none}}
@keyframes ccA5{0%,81.67%{opacity:0;transform:translateY(4px) scale(.96)}82.9%,100%{opacity:1;transform:none}}
/* the promo that gets created, then dragged Oct 8 → Oct 10 */
.rcg .h28 .cp.mv{position:absolute;left:461px;top:257px;width:96px;z-index:5;opacity:0;animation:ccMv var(--t) cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ccMv{0%,23.33%{opacity:0;transform:scale(.7);left:461px;box-shadow:none}24.6%{opacity:1;transform:scale(1.08)}25.4%,41.67%{opacity:1;transform:none;left:461px;box-shadow:none}42.5%{transform:scale(1.05);left:461px;box-shadow:0 8px 18px -6px rgba(0,0,0,.35)}47.92%{transform:scale(1.05);left:677px;box-shadow:0 8px 18px -6px rgba(0,0,0,.35)}48.75%,100%{opacity:1;transform:none;left:677px;box-shadow:none}}
/* New campaign popover */
.rcg .h28 .np{position:absolute;right:22px;top:50px;width:240px;background:var(--g-bg,#fff);border:1px solid var(--g-line,#e6e8ed);border-radius:10px;box-shadow:0 24px 50px -20px rgba(0,0,0,.35);padding:12px;z-index:7;opacity:0;animation:ccNp var(--t) cubic-bezier(.2,.8,.2,1) infinite}
@keyframes ccNp{0%,13.33%{opacity:0;transform:translateY(-4px)}14.3%,23.33%{opacity:1;transform:none}24.17%,100%{opacity:0;transform:translateY(-4px)}}
.rcg .h28 .np .t{font-size:10.5px;font-weight:700;margin-bottom:8px}
.rcg .h28 .np .in{height:24px;border:1px solid var(--g-line,#e6e8ed);border-radius:6px;padding:0 8px;display:flex;align-items:center;font-size:9px;font-weight:600;margin-bottom:8px}
.rcg .h28 .np .k{font-size:7.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g-mute,#6b7280);margin-bottom:4px}
.rcg .h28 .np .ty{display:flex;gap:4px;margin-bottom:8px}.rcg .h28 .np .ty span{height:18px;padding:0 7px;border-radius:9px;border:1px solid var(--g-line,#e6e8ed);font-size:7.5px;font-weight:600;display:flex;align-items:center;gap:4px;color:var(--g-ink2,#3a3f4b)}.rcg .h28 .np .ty span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c)}.rcg .h28 .np .ty span.on{border-color:var(--org);background:var(--g-otint,#fffbeb);color:var(--g-ink,#111318)}
.rcg .h28 .np .fl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.rcg .h28 .np .fl b{display:block;font-size:8.5px;font-weight:600}.rcg .h28 .np .fl small{display:block;font-size:7.5px;color:var(--g-mute,#6b7280);margin-top:1px}
.rcg .h28 .np .bt{display:flex;justify-content:flex-end;gap:6px}.rcg .h28 .np .btn{height:24px;font-size:9px}.rcg .h28 .b-sc{width:64px;justify-content:center}
/* pulses — Create 12.5% · Schedule 23.33% */
.rcg .h28 .b-cr::after{animation:ccPz1 var(--t) ease-out infinite}.rcg .h28 .b-sc::after{animation:ccPz2 var(--t) ease-out infinite}
@keyframes ccPz1{0%,12.5%{opacity:0;transform:scale(1)}13.2%{opacity:1}15.5%,100%{opacity:0;transform:scale(1.3)}}
@keyframes ccPz2{0%,23.33%{opacity:0;transform:scale(1)}24%{opacity:1}26.3%,100%{opacity:0;transform:scale(1.3)}}
/* toasts + cursor */
.rcg .h28 .toast{right:34px;bottom:34px}
.rcg .h28 .toast.t1{animation:ccT1 var(--t) ease-out infinite}.rcg .h28 .toast.t2{animation:ccT2 var(--t) ease-out infinite}.rcg .h28 .toast.t3{animation:ccT3 var(--t) ease-out infinite}.rcg .h28 .toast.t4{animation:ccT4 var(--t) ease-out infinite}
@keyframes ccT1{0%,25%{opacity:0;transform:translateY(10px)}26.2%,37.5%{opacity:1;transform:none}39%,100%{opacity:0;transform:translateY(4px)}}
@keyframes ccT2{0%,50%{opacity:0;transform:translateY(10px)}51.2%,58.33%{opacity:1;transform:none}59.5%,100%{opacity:0;transform:translateY(4px)}}
@keyframes ccT3{0%,60.42%{opacity:0;transform:translateY(10px)}61.6%,75%{opacity:1;transform:none}76.2%,100%{opacity:0;transform:translateY(4px)}}
@keyframes ccT4{0%,81.25%{opacity:0;transform:translateY(10px)}82.5%,93.75%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(4px)}}
.rcg .h28 .toast .ok.o{background:var(--org)}
.rcg .h28 .cur{animation:ccCur var(--t) cubic-bezier(.3,.7,.3,1) infinite}
@keyframes ccCur{0%,4%{opacity:0;left:600px;top:400px}11%{opacity:1;left:740px;top:29px}12.5%{left:740px;top:29px}13%{left:738px;top:27px}13.7%{left:740px;top:29px}17%{left:690px;top:120px}22.5%{left:731px;top:226px}23.33%{left:729px;top:224px}24%{left:731px;top:226px}27%,30%{opacity:1;left:640px;top:300px}31%,38%{opacity:0;left:600px;top:330px}39%{opacity:1;left:580px;top:320px}41.67%{left:506px;top:262px}42.5%{left:504px;top:260px}47.92%{left:722px;top:262px}48.75%{left:722px;top:262px}50%{opacity:1;left:740px;top:300px}52%,100%{opacity:0;left:750px;top:320px}}
@media (prefers-reduced-motion:reduce){.rcg .h28 *,.rcg .h28 *::before,.rcg .h28 *::after{animation:none!important}.rcg .h28 .cur,.rcg .h28 .toast,.rcg .h28 .np{display:none}.rcg .h28 .a1,.rcg .h28 .a2,.rcg .h28 .a3,.rcg .h28 .a4,.rcg .h28 .a5{opacity:1;transform:none}.rcg .h28 .cp.mv{opacity:1;left:677px}.rcg .h28 .slot .a{opacity:0}.rcg .h28 .slot .b{opacity:1}}

/* ===== H29 Audience picker (800×600 feature-row graphic) — the campaign audience is the CRM list itself: filters on top, the same leads/customers table scrolling underneath, live count. ===== */
.rcg .ab.hg.h29{width:800px;height:600px;--t:36s}
.rcg .h29 .scene{animation:none}
.rcg .h29 .panel{padding:0}
.rcg .h29 .ic{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rcg .h29 .stp{position:absolute;left:22px;top:18px;height:26px;display:flex;gap:2px;padding:3px;border-radius:7px;background:var(--g-hi,#f3f4f6);border:1px solid var(--g-line,#e6e8ed)}
.rcg .h29 .stp span{display:flex;align-items:center;padding:0 10px;border-radius:5px;font-size:9px;font-weight:600;color:var(--g-mute,#6b7280);white-space:nowrap}.rcg .h29 .stp span.on{background:var(--g-bg,#fff);color:var(--g-ink,#111318);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.rcg .h29 .live{position:absolute;right:22px;top:21px;display:flex;align-items:center;gap:6px;font-size:9px;font-weight:600;color:var(--grn)}.rcg .h29 .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grn);animation:hgblink 1.4s ease-in-out infinite}
.rcg .h29 .hd2{position:absolute;left:22px;top:58px}.rcg .h29 .hd2 .t{font-size:15px;font-weight:700;letter-spacing:-.02em}.rcg .h29 .hd2 .s{font-size:9.5px;color:var(--g-mute,#6b7280);margin-top:3px}
.rcg .h29 .flt{position:absolute;left:22px;right:22px;top:102px;display:flex;gap:6px;align-items:center;flex-wrap:nowrap;overflow:hidden}.rcg .h29 .flt .chip{height:22px;font-size:8.5px;padding:0 9px;border-radius:6px;gap:5px}.rcg .h29 .flt .chip b{font-weight:700;color:var(--g-ink,#111318)}.rcg .h29 .flt .chip.b b{color:var(--blue)}.rcg .h29 .flt .chip i{font-style:normal;color:var(--g-mute2,#9aa0ab);margin-left:2px}
.rcg .h29 .lst{position:absolute;left:22px;right:22px;top:138px;bottom:22px;border:1px solid var(--g-line,#e6e8ed);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:var(--g-bg,#fff)}
.rcg .h29 .lt .hd,.rcg .h29 .lt .row{grid-template-columns:22px minmax(0,1.3fr) 92px minmax(0,1.35fr) 70px 90px;gap:8px}
.rcg .h29 .lt .hd{padding:9px 12px 8px;font-size:7.5px;flex:none}.rcg .h29 .lt .row{height:42px;padding:0 12px;font-size:9px}
.rcg .h29 .lt .row>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:flex;align-items:center;gap:4px}
.rcg .h29 .ldn{display:grid!important;gap:1px;align-content:center}.rcg .h29 .ldn b{font-weight:700;font-size:9.5px;overflow:hidden;text-overflow:ellipsis}.rcg .h29 .ldn small{font-size:8px;color:var(--g-mute,#6b7280);overflow:hidden;text-overflow:ellipsis}
.rcg .h29 .mu{color:var(--g-mute,#6b7280)}
.rcg .h29 .ck{width:12px;height:12px;border-radius:3px;background:var(--blue);display:grid;place-items:center;flex:none}.rcg .h29 .ck .ic{width:8px;height:8px;stroke:#fff;stroke-width:3}
.rcg .hg.h29 .chip{border-radius:4px;height:17px;font-size:8px}.rcg .hg.h29 .chip.st{color:var(--g-ink2,#3a3f4b);border-color:var(--g-line,#e6e8ed);background:var(--g-bg,#fff)}
.rcg .hg.h29 .chip.st.g::before{background:var(--grn)}.rcg .hg.h29 .chip.st.b::before{background:var(--blue)}.rcg .hg.h29 .chip.st.o::before{background:var(--org)}.rcg .hg.h29 .chip.st.p::before{background:var(--pur)}
.rcg .h29 .chips{display:flex;gap:4px;align-items:center;flex-wrap:nowrap;min-width:0;overflow:hidden}.rcg .h29 .chips .chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;line-height:15px;flex:0 1 auto;min-width:0}
.rcg .h29 .vp{flex:1;min-height:0;position:relative;overflow:hidden}
.rcg .h29 .vp::before,.rcg .h29 .vp::after{content:"";position:absolute;left:0;right:0;height:18px;z-index:2;pointer-events:none}.rcg .h29 .vp::before{top:0;background:linear-gradient(var(--g-bg,#fff),rgba(255,255,255,0))}.rcg .h29 .vp::after{bottom:0;background:linear-gradient(rgba(255,255,255,0),var(--g-bg,#fff))}
html[data-theme="dark"] .rcg .h29 .vp::before{background:linear-gradient(#141821,rgba(20,24,33,0))}html[data-theme="dark"] .rcg .h29 .vp::after{background:linear-gradient(rgba(20,24,33,0),#141821)}
.rcg .h29 .scr{position:absolute;left:0;right:0;top:0;animation:auScroll var(--t) linear infinite}
@keyframes auScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.rcg .h29 .ftr{height:40px;flex:none;border-top:1px solid var(--g-line,#e6e8ed);background:var(--g-soft,#f8f9fb);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:9px;color:var(--g-mute,#6b7280)}.rcg .h29 .ftr b{color:var(--g-ink,#111318);font-weight:700;font-size:11px;margin-right:4px}.rcg .h29 .ftr .btn{height:24px;font-size:9px;padding:0 12px}
@media (prefers-reduced-motion:reduce){.rcg .h29 *,.rcg .h29 *::before,.rcg .h29 *::after{animation:none!important}}

/* ===== H30 AI campaign brief (800×600 feature-row graphic) — 28s loop: pick a goal → pick services → type the brief → add an offer → Build my campaign → "Here's what I built" (subject lines, blocks, audience, send time). ===== */
.rcg .ab.hg.h30{width:800px;height:600px;--t:28s}
.rcg .h30 .panel{padding:0;background:var(--g-soft,#f4f5f7)}
.rcg .h30 .ic{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rcg .h30 .bgl{position:absolute;left:22px;right:22px;top:22px;bottom:0;opacity:.55}.rcg .h30 .bgl .t{font-size:14px;font-weight:700;margin-bottom:4px}.rcg .h30 .bgl .s{font-size:9px;color:var(--g-mute,#6b7280);margin-bottom:14px}.rcg .h30 .bgl .r{height:44px;border-bottom:1px solid var(--g-line,#e6e8ed);display:flex;align-items:center;gap:12px;font-size:9px}.rcg .h30 .bgl .r i{display:block;height:8px;border-radius:4px;background:var(--g-hi,#e9ebef)}
.rcg .h30 .dim{position:absolute;inset:0;background:rgba(17,19,24,.42)}
.rcg .h30 .md{position:absolute;left:60px;top:24px;width:680px;height:552px;background:var(--g-bg,#fff);border-radius:12px;box-shadow:0 30px 70px -30px rgba(0,0,0,.5);padding:18px}
.rcg .h30 .md .tt{display:flex;align-items:center;gap:6px;height:20px;font-size:14px;font-weight:700;letter-spacing:-.01em}.rcg .h30 .md .tt .ic{width:14px;height:14px;color:var(--blue)}.rcg .h30 .md .x{position:absolute;right:18px;top:18px;width:14px;height:14px;color:var(--g-mute,#6b7280)}
.rcg .h30 .md .sb{font-size:9px;line-height:12px;color:var(--g-mute,#6b7280);height:24px;margin:6px 0 12px;max-width:600px}
.rcg .h30 .lb{font-size:9.5px;font-weight:600;height:12px;line-height:12px;margin-bottom:6px}.rcg .h30 .lb i{font-style:normal;font-weight:400;color:var(--g-mute,#6b7280)}
.rcg .h30 .cr{display:flex;gap:6px;height:22px;margin-bottom:6px}.rcg .h30 .cr+.cr{margin-bottom:12px}
.rcg .h30 .cg{height:22px;border:1px solid var(--g-line,#e6e8ed);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:500;color:var(--g-ink,#111318);white-space:nowrap;background:var(--g-bg,#fff)}
.rcg .h30 .cg.g1{animation:aiG1 var(--t) step-end infinite}.rcg .h30 .cg.s1{animation:aiS1 var(--t) step-end infinite}.rcg .h30 .cg.s2{animation:aiS2 var(--t) step-end infinite}
@keyframes aiG1{0%,7.14%{background:var(--g-bg,#fff);border-color:var(--g-line,#e6e8ed);color:var(--g-ink,#111318)}7.15%,100%{background:var(--blue);border-color:var(--blue);color:#fff}}
@keyframes aiS1{0%,11.43%{background:var(--g-bg,#fff);border-color:var(--g-line,#e6e8ed)}11.44%,100%{background:var(--g-bluetint,rgba(27,100,243,.07));border-color:var(--blue)}}
@keyframes aiS2{0%,15%{background:var(--g-bg,#fff);border-color:var(--g-line,#e6e8ed)}15.01%,100%{background:var(--g-bluetint,rgba(27,100,243,.07));border-color:var(--blue)}}
.rcg .h30 .ta{height:48px;border:1px solid var(--g-line,#e6e8ed);border-radius:6px;padding:7px 8px;font-size:8.8px;line-height:12px;display:grid;align-content:start;background:var(--g-bg,#fff);margin-bottom:10px;position:relative;animation:aiTa var(--t) step-end infinite}
@keyframes aiTa{0%,17.86%{border-color:var(--g-line,#e6e8ed);box-shadow:none}17.87%,51.43%{border-color:var(--blue);box-shadow:0 0 0 2px var(--g-bluetint,rgba(27,100,243,.12))}51.44%,100%{border-color:var(--g-line,#e6e8ed);box-shadow:none}}
.rcg .h30 .ta .ph{position:absolute;left:8px;top:7px;color:var(--g-mute2,#9aa0ab);animation:aiPh var(--t) step-end infinite}@keyframes aiPh{0%,18.93%{opacity:1}18.94%,100%{opacity:0}}
.rcg .h30 .ta span{display:block;white-space:nowrap;overflow:hidden;clip-path:inset(0 100% 0 0)}
.rcg .h30 .ta .l1{animation:aiT1 var(--t) steps(110,end) infinite}.rcg .h30 .ta .l2{animation:aiT2 var(--t) steps(112,end) infinite}.rcg .h30 .ta .l3{animation:aiT3 var(--t) steps(56,end) infinite}
@keyframes aiT1{0%,18.93%{clip-path:inset(0 100% 0 0)}26.07%,100%{clip-path:inset(0 0 0 0)}}
@keyframes aiT2{0%,26.07%{clip-path:inset(0 100% 0 0)}33.21%,100%{clip-path:inset(0 0 0 0)}}
@keyframes aiT3{0%,33.21%{clip-path:inset(0 100% 0 0)}37.5%,100%{clip-path:inset(0 0 0 0)}}
.rcg .h30 .tgr{display:flex;align-items:center;gap:8px;height:18px;font-size:9.5px;font-weight:600;margin-bottom:8px}
.rcg .h30 .tgr .tg{animation:aiTg var(--t) step-end infinite}.rcg .h30 .tgr .tg::after{animation:aiTgk var(--t) cubic-bezier(.2,.8,.2,1) infinite}
@keyframes aiTg{0%,42.14%{background:var(--g-mute3,#d1d5db)}42.15%,100%{background:var(--blue)}}@keyframes aiTgk{0%,42.14%{transform:none}43.4%,100%{transform:translateX(11px)}}
.rcg .h30 .off{max-height:0;overflow:hidden;margin-bottom:0;animation:aiOff var(--t) cubic-bezier(.2,.8,.2,1) infinite}
@keyframes aiOff{0%,42.14%{max-height:0;margin-bottom:0;opacity:0}43.6%{max-height:72px;margin-bottom:10px;opacity:0}45.2%,100%{max-height:72px;margin-bottom:10px;opacity:1}}
.rcg .h30 .in{height:24px;border:1px solid var(--g-line,#e6e8ed);border-radius:6px;padding:0 8px;display:flex;align-items:center;font-size:9px;background:var(--g-bg,#fff);white-space:nowrap;overflow:hidden}.rcg .h30 .in .ic{margin-right:5px;color:var(--g-mute,#6b7280)}.rcg .h30 .in.sel::after{content:"";margin-left:auto;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.rcg .h30 .in.mu{color:var(--g-mute2,#9aa0ab)}
.rcg .h30 .two{display:grid;grid-template-columns:150px 1fr;gap:8px;margin-top:6px}
.rcg .h30 .hint{font-size:8px;color:var(--g-mute,#6b7280);margin-top:4px}
.rcg .h30 .ftr{position:absolute;left:18px;right:18px;bottom:18px;height:26px;display:flex;align-items:center;gap:8px}.rcg .h30 .ftr .lk{font-size:9.5px;font-weight:600;color:var(--g-ink2,#3a3f4b);margin-right:auto}.rcg .h30 .ftr .btn{height:26px;font-size:9.5px;padding:0 12px}.rcg .h30 .b-go{width:124px;justify-content:center}.rcg .h30 .b-go .sw{justify-items:center}
.rcg .h30 .b-go .a{animation:aiBa var(--t) step-end infinite}.rcg .h30 .b-go .b{display:flex;align-items:center;gap:4px;animation:aiBb var(--t) step-end infinite}
@keyframes aiBa{0%,51.43%{opacity:1}51.44%,100%{opacity:0}}@keyframes aiBb{0%,51.43%{opacity:0}51.44%,100%{opacity:1}}
.rcg .h30 .dots{display:inline-flex;gap:2px}.rcg .h30 .dots i{width:3px;height:3px;border-radius:50%;background:#fff;animation:hgblink 1s ease-in-out infinite}.rcg .h30 .dots i:nth-child(2){animation-delay:.2s}.rcg .h30 .dots i:nth-child(3){animation-delay:.4s}
.rcg .h30 .pz::after{content:"";position:absolute;inset:-3px;border-radius:8px;border:1.5px solid var(--blue);opacity:0;pointer-events:none}.rcg .h30 .b-go::after{animation:aiPz var(--t) ease-out infinite}
@keyframes aiPz{0%,51.43%{opacity:0;transform:scale(1)}52.1%{opacity:1}54.4%,100%{opacity:0;transform:scale(1.25)}}
/* form ↔ result crossfade */
.rcg .h30 .m1{animation:aiM1 var(--t) ease-in-out infinite}.rcg .h30 .m2{opacity:0;animation:aiM2 var(--t) ease-in-out infinite}
@keyframes aiM1{0%,57.14%{opacity:1;transform:none}58.2%,100%{opacity:0;transform:scale(.985)}}
@keyframes aiM2{0%,58.2%{opacity:0;transform:scale(1.015)}59.3%,100%{opacity:1;transform:none}}
.rcg .h30 .m2 .sec2{margin-top:14px}.rcg .h30 .m2 .k{font:400 9px/14px inherit;font-family:inherit;letter-spacing:0;text-transform:none;color:var(--g-mute,#6b7280);margin-bottom:2px}.rcg .h30 .m2 .k i{font-style:normal;color:var(--g-mute2,#9aa0ab)}.rcg .h30 .m2 .v{font-size:10.5px;line-height:14px;color:var(--g-ink,#111318)}
.rcg .h30 .m2 .eml{display:grid;grid-template-columns:96px 1fr;gap:6px 12px;margin-top:4px}.rcg .h30 .m2 .eml .k{margin:0;line-height:14px}.rcg .h30 .m2 .eml .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rcg .h30 .m2 .eml .v.w{white-space:normal}
.rcg .h30 .m2 .two2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.rcg .h30 .m2 .r{opacity:0;transform:translateY(4px)}
.rcg .h30 .m2 .r1{animation:aiR1 var(--t) ease-out infinite}.rcg .h30 .m2 .r2{animation:aiR2 var(--t) ease-out infinite}.rcg .h30 .m2 .r3{animation:aiR3 var(--t) ease-out infinite}.rcg .h30 .m2 .r4{animation:aiR4 var(--t) ease-out infinite}.rcg .h30 .m2 .r5{animation:aiR5 var(--t) ease-out infinite}.rcg .h30 .m2 .r6{animation:aiR6 var(--t) ease-out infinite}.rcg .h30 .m2 .r7{animation:aiR7 var(--t) ease-out infinite}.rcg .h30 .m2 .r8{animation:aiR8 var(--t) ease-out infinite}.rcg .h30 .m2 .r9{animation:aiR9 var(--t) ease-out infinite}.rcg .h30 .m2 .r10{animation:aiR10 var(--t) ease-out infinite}.rcg .h30 .m2 .r11{animation:aiR11 var(--t) ease-out infinite}.rcg .h30 .m2 .r12{animation:aiR12 var(--t) ease-out infinite}.rcg .h30 .m2 .r13{animation:aiR13 var(--t) ease-out infinite}.rcg .h30 .m2 .r14{animation:aiR14 var(--t) ease-out infinite}
@keyframes aiR1{0%,59.3%{opacity:0;transform:translateY(4px)}60.2%,100%{opacity:1;transform:none}}
@keyframes aiR2{0%,60.3%{opacity:0;transform:translateY(4px)}61.2%,100%{opacity:1;transform:none}}
@keyframes aiR3{0%,61.3%{opacity:0;transform:translateY(4px)}62.2%,100%{opacity:1;transform:none}}
@keyframes aiR4{0%,62.3%{opacity:0;transform:translateY(4px)}63.2%,100%{opacity:1;transform:none}}
@keyframes aiR5{0%,63.3%{opacity:0;transform:translateY(4px)}64.2%,100%{opacity:1;transform:none}}
@keyframes aiR6{0%,64.3%{opacity:0;transform:translateY(4px)}65.2%,100%{opacity:1;transform:none}}
@keyframes aiR7{0%,65.3%{opacity:0;transform:translateY(4px)}66.2%,100%{opacity:1;transform:none}}
@keyframes aiR8{0%,66.3%{opacity:0;transform:translateY(4px)}67.2%,100%{opacity:1;transform:none}}
@keyframes aiR9{0%,67.3%{opacity:0;transform:translateY(4px)}68.2%,100%{opacity:1;transform:none}}
@keyframes aiR10{0%,68.3%{opacity:0;transform:translateY(4px)}69.2%,100%{opacity:1;transform:none}}
@keyframes aiR11{0%,69.3%{opacity:0;transform:translateY(4px)}70.2%,100%{opacity:1;transform:none}}
@keyframes aiR12{0%,70.3%{opacity:0;transform:translateY(4px)}71.2%,100%{opacity:1;transform:none}}
@keyframes aiR13{0%,71.3%{opacity:0;transform:translateY(4px)}72.2%,100%{opacity:1;transform:none}}
@keyframes aiR14{0%,72.3%{opacity:0;transform:translateY(4px)}73.2%,100%{opacity:1;transform:none}}
.rcg .h30 .cur{animation:aiCur var(--t) cubic-bezier(.3,.7,.3,1) infinite}
@keyframes aiCur{0%,2%{opacity:0;left:400px;top:420px}6.4%{opacity:1;left:325px;top:159px}7.14%{left:325px;top:159px}7.6%{left:323px;top:157px}8.2%{left:325px;top:159px}10.7%{left:111px;top:211px}11.43%{left:111px;top:211px}11.9%{left:109px;top:209px}12.5%{left:111px;top:211px}14.3%{left:344px;top:211px}15%{left:344px;top:211px}15.5%{left:342px;top:209px}16.1%{left:344px;top:211px}17.3%{left:92px;top:292px}17.86%{left:92px;top:292px}18.3%{left:90px;top:290px}18.9%{left:92px;top:292px}20%{opacity:1;left:120px;top:310px}21%,40.4%{opacity:0;left:140px;top:330px}41%{opacity:1;left:120px;top:340px}42.14%{left:88px;top:347px}42.6%{left:86px;top:345px}43.2%{left:88px;top:347px}46%{left:300px;top:430px}50.7%{left:677px;top:543px}51.43%{left:677px;top:543px}51.9%{left:675px;top:541px}52.5%{left:677px;top:543px}54%{opacity:1;left:677px;top:543px}55.5%,100%{opacity:0;left:690px;top:560px}}
@media (prefers-reduced-motion:reduce){.rcg .h30 *,.rcg .h30 *::before,.rcg .h30 *::after{animation:none!important}.rcg .h30 .cur,.rcg .h30 .m1{display:none}.rcg .h30 .m2,.rcg .h30 .m2 .r{opacity:1;transform:none}}