/* Blitchka hero loop (v29): one art piece in the empty side of the charcoal hero panel.
   A work stack -> B big K wobble -> C Kartka in a phone -> D tool orbit -> back to A. Decorative only (aria-hidden).
   JS off or prefers-reduced-motion: the still work stack (A). Placement = the approved samples. */
.hero-panel{position:relative}
.hero-art{position:absolute;z-index:3;pointer-events:none;inset-inline-end:0;bottom:24px;width:112px;height:186px;container-type:size}
[dir=rtl] .hero-art{bottom:auto;top:108px;height:132px;width:104px}
@media(min-width:600px) and (max-width:959px){.hero-art{width:200px}}
@media(min-width:960px){.hero-art,[dir=rtl] .hero-art{top:26px;bottom:26px;height:auto;width:min(560px,46%);inset-inline-end:10px}}
.mo .hero-art{animation:ha-in .8s cubic-bezier(.2,.7,.2,1) .95s both}
@keyframes ha-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-art,.hero-art *{animation:none!important;transition:none!important}}
.hl-s{position:absolute;inset:0}
.hl-b,.hl-c,.hl-d,.hl-tap,.hl-rip{visibility:hidden;opacity:0}
/* A: fanned stack of real work */
.ha-card{position:absolute;left:50%;top:50%;margin:0;width:min(74cqw,50cqh);aspect-ratio:3/4;background:#fff;padding:4%;box-sizing:border-box;border-radius:3px;
 box-shadow:0 14px 30px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.25);transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));will-change:transform}
.ha-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px}
.ha-card.c3{--x:-14%;--y:-34%;--r:-11deg;z-index:1}
.ha-card.c2{--x:12%;--y:-2%;--r:5deg;z-index:2}
.ha-card.c1{--x:-6%;--y:30%;--r:-4deg;z-index:3}
.ha-card.hl-top::before{content:"";position:absolute;left:50%;top:-5%;width:38%;height:9%;background:#E43B40;transform:translateX(-50%) rotate(-3deg);opacity:.95;border-radius:1px}
@container (min-aspect-ratio:1/1){
 .ha-card{width:min(40cqw,64cqh)}
 .ha-card.c3{--x:-62%;--y:-2%;--r:-12deg}
 .ha-card.c2{--x:0%;--y:-6%;--r:-2deg}
 .ha-card.c1{--x:60%;--y:4%;--r:9deg}}
/* B: the red K from the logo (4 pieces + 2 faint echoes, each its own layer) */
.hl-kw{position:absolute;left:50%;top:50%;width:min(100cqw,84cqh);height:min(100cqw,84cqh);transform:translate(-50%,-50%)}
@container (min-aspect-ratio:1/1){.hl-kw{width:min(60cqw,92cqh);height:min(60cqw,92cqh)}}
.hl-kl{position:absolute;inset:0;will-change:transform}
.hl-kl svg{display:block;width:100%;height:100%;overflow:visible}
.hl-e1{opacity:.06}.hl-e2{opacity:.1}
/* C: Kartka in a phone (scripted demo, not the tool) */
.hp-dev{position:absolute;top:50%;left:50%;height:98cqh;max-width:96cqw;aspect-ratio:9/18.5;transform:translate(-50%,-50%);background:#0E0F11;border-radius:13cqh/6.5cqh;
 padding:2.6cqh 1.4cqh;box-sizing:border-box;box-shadow:0 0 0 1.5px #3A3F49,0 18px 36px rgba(0,0,0,.55)}
.hp-dev::before{content:"";position:absolute;top:1.2cqh;left:50%;width:22%;height:1.1cqh;border-radius:9px;background:#22252B;transform:translateX(-50%);z-index:2}
@container (min-aspect-ratio:1.4/1){.hp-dev{left:33%}}
.hp-scr{position:relative;width:100%;height:100%;border-radius:12%/5.8%;overflow:hidden;background:#E5E9EE;container-type:size;font-family:'Rubik','Heebo',sans-serif}
.hp-bar{position:relative;z-index:2;display:flex;align-items:center;gap:4cqw;background:#22252B;color:#FCFBFA;padding:9cqw 7cqw 5cqw;font:800 10.5cqw/1 'Tektur','Secular One',sans-serif;border-bottom:1.6cqw solid #111214}
.hp-bar img{width:13cqw;height:13cqw;border-radius:3.4cqw}
.hp-v{position:absolute;left:0;right:0;top:30cqw;bottom:0}
.hp-h{margin:4cqw 6cqw 3cqw;font:700 7.4cqw/1.1 'Rubik','Heebo',sans-serif;color:#22252B}
.hp-pick .hp-win{position:absolute;left:0;right:0;top:15cqw;bottom:0;overflow:hidden}
.hp-grid{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;padding:2cqw 6cqw 6cqw;will-change:transform}
.hp-grid i{display:block;aspect-ratio:150/194;border-radius:2.4cqw;background:#cfd4da center/cover no-repeat;box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.18);outline:0 solid #E43B40;outline-offset:1cqw}
.hp-edit{opacity:0;display:flex;flex-direction:column;padding:4cqw 6cqw 0}
.hp-cw{position:relative;flex:1 1 auto;min-height:0;display:flex;justify-content:center}
.hp-card{position:relative;height:100%;aspect-ratio:480/621;max-width:100%;overflow:hidden;border-radius:1.6cqw;box-shadow:0 2cqw 4cqw rgba(0,0,0,.28);background:#1d2340}
.hp-zm{position:absolute;inset:0;transform-origin:50% 75%}
.hp-zm img{position:absolute;display:block}
.hp-zm .hp-bg{inset:0;width:100%;height:100%}
.hp-ok{position:absolute;top:-3cqw;inset-inline-end:2cqw;width:16cqw;height:16cqw;border-radius:50%;background:#E43B40;color:#fff;display:grid;place-items:center;font:800 10cqw/1 'Rubik',sans-serif;box-shadow:0 1cqw 3cqw rgba(0,0,0,.35);transform:scale(0)}
.hp-f{margin:3.4cqw 0 0;font:600 5.6cqw/1 'Rubik','Heebo',sans-serif;color:#4b515b}
.hp-in{margin-top:1.6cqw;height:11cqw;display:flex;align-items:center;gap:.6cqw;padding:0 3cqw;border-radius:2.4cqw;background:#fff;border:.8cqw solid #c9ced6;font:600 6.4cqw/1 'Secular One','Heebo',sans-serif;color:#22252B;direction:rtl;white-space:nowrap;overflow:hidden}
.hp-in.on{border-color:#E43B40}
.hp-in u{display:inline-block;width:.8cqw;height:7cqw;background:#E43B40;opacity:0}
.hp-btns{display:flex;gap:2.4cqw;margin:3.4cqw 0 7cqw}
.hp-btns b{position:relative;flex:1.6;overflow:hidden;text-align:center;border-radius:99px;padding:3.6cqw 0;font:700 5cqw/1 'Rubik','Heebo',sans-serif;white-space:nowrap;background:#E43B40;color:#fff}
.hp-btns b+b{flex:.8;background:#22252B;color:#FCFBFA}
.hp-btns b s{position:absolute;inset:0;width:0;background:rgba(255,255,255,.3);text-decoration:none}
.hp-btns b em{position:relative;font-style:normal}
.hp-doc{position:absolute;top:50%;left:66%;height:66cqh;aspect-ratio:480/621;margin:0;background:#fff;padding:1.6cqh;box-sizing:border-box;border-radius:3px;box-shadow:0 14px 30px rgba(0,0,0,.55);opacity:0;display:none}
.hp-doc .hp-zm{inset:1.6cqh;transform:none}
.hp-doc span{position:absolute;bottom:-3.2cqh;inset-inline-start:-2.4cqh;background:#E43B40;color:#fff;font:800 4.8cqh/1 'Tektur','Rubik',sans-serif;padding:1.4cqh 2.2cqh;border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,.35)}
@container (min-aspect-ratio:1.4/1){.hp-doc{display:block}}
/* D: his Classic tool icons orbiting the red dot */
.ho{position:absolute;left:50%;top:50%;width:min(96cqw,96cqh);height:min(96cqw,96cqh);transform:translate(-50%,-50%)}
.ho::before{content:"";position:absolute;inset:13%;border-radius:50%;border:1.5px dashed rgba(252,251,250,.16);opacity:var(--rg,1)}
.ho i{position:absolute;left:0;top:0;display:block;border-radius:27%;background:#FCFBFA center/100% no-repeat;box-shadow:0 6px 14px rgba(0,0,0,.45);will-change:transform}
.ho-core{position:absolute;left:50%;top:50%;width:30%;height:30%;margin:-15% 0 0 -15%;overflow:visible}
/* the demo finger */
.hl-tap{position:absolute;left:0;top:0;z-index:9;border-radius:50%;background:rgba(252,251,250,.88);box-shadow:0 0 0 2px rgba(17,18,20,.28),0 3px 10px rgba(0,0,0,.5)}
.hl-rip{position:absolute;left:0;top:0;z-index:8;border-radius:50%;border:2px solid #FCFBFA}