/* Zıpır props (.pr-*) and product mock screens (.ui-*). Needs clay.css + mascot.css. */

/* ---------- brand illustrations ---------- */
.pr{display:block;width:100%;height:auto;overflow:visible}
.pr-picto{display:block;height:auto;overflow:visible}
.pr-zp{overflow:visible}
.pr-letter .zp-shadow,.pr-sleep .zp-shadow{display:none}
.pr-sleep .zp-zzz{display:none}
.pr-wob{transform-box:fill-box;transform-origin:50% 100%;animation:pr-wob 5s ease-in-out infinite}
.pr-leaf{transform-box:fill-box;transform-origin:100% 100%;animation:pr-leaf 3.4s ease-in-out infinite}
.pr-twinkle{transform-box:fill-box;transform-origin:center;animation:pr-tw 2.6s ease-in-out infinite}
.pr-gear{transform-box:fill-box;transform-origin:center;animation:pr-spin 5s linear infinite}
.pr-gear.rev{animation-direction:reverse;animation-duration:3.4s}
.pr-belt{animation:pr-belt .9s linear infinite}
.pr-slide{animation:pr-slide 4.2s ease-in-out infinite}
.pr-sheet{transform-box:fill-box;transform-origin:center;animation:pr-fall 2.4s cubic-bezier(.5,0,.8,.5) infinite;animation-delay:var(--d,0s);opacity:0}
.pr-blink{animation:pr-blink 1.2s steps(1) infinite}
.pr-puff{transform-box:fill-box;transform-origin:center;animation:pr-puff 2.6s ease-out infinite;animation-delay:var(--d,0s);opacity:0}
.pr-prog{transform-box:fill-box;transform-origin:0 50%;animation:pr-prog var(--dur,4.2s) linear infinite}
.pr-stamp{animation:pr-stamp 3.2s cubic-bezier(.55,0,.45,1) infinite}
.pr-ink{transform-box:fill-box;transform-origin:center;animation:pr-ink 3.2s ease infinite}
.pr-check{transform-box:fill-box;transform-origin:center;animation:pr-check 3.2s var(--spring) infinite}
.pr-ant{transform-box:fill-box;transform-origin:50% 100%;animation:pr-ant 3s ease-in-out infinite}
.pr-pulse{transform-box:fill-box;transform-origin:center;animation:pr-pulse 1.6s ease-in-out infinite}
.pr-flick{opacity:0;animation:pr-flick 3.4s steps(1) infinite}
.pr-draw{animation:pr-draw 4s linear infinite}
.pr-lens{animation:pr-lens 6s ease-in-out infinite alternate}
.pr-lens-in{animation:pr-lens-in 6s ease-in-out infinite alternate}
.pr-glint{animation:pr-glint 2.8s ease-in-out infinite}
.pr-ul{transform-box:fill-box;transform-origin:0 50%;animation:pr-ul 3.2s ease-in-out infinite}
.pr-pop{animation:pr-pop 3.2s cubic-bezier(.34,1.56,.64,1) infinite}
.pr-float{transform-box:fill-box;transform-origin:center;animation:pr-float 2.8s ease-out infinite;animation-delay:var(--d,0s);opacity:0}
.pr-breathe{transform-box:fill-box;transform-origin:50% 100%;animation:pr-breathe 4s ease-in-out infinite}
.pr-z{animation:pr-zf 3.6s ease-in-out infinite;animation-delay:var(--d,0s);opacity:0}
.pr-picto-arrow{animation:pr-nudge 1.2s ease-in-out infinite}
.pr-picto-tv{animation:pr-tvpop 1.2s var(--spring) .3s both}
@keyframes pr-wob{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes pr-leaf{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}
@keyframes pr-tw{0%,100%{transform:scale(.3) rotate(0);opacity:.15}50%{transform:scale(1) rotate(45deg);opacity:1}}
@keyframes pr-spin{to{transform:rotate(360deg)}}
@keyframes pr-belt{to{stroke-dashoffset:-32}}
@keyframes pr-slide{0%{transform:translateX(0);opacity:0}10%{transform:translateX(0);opacity:1}22%{transform:translateX(0)}82%{transform:translateX(122px);opacity:1}83%,100%{transform:translateX(122px);opacity:0}}
@keyframes pr-fall{0%{transform:translateY(-10px) rotate(var(--r,0deg));opacity:0}15%{opacity:1}100%{transform:translateY(70px) rotate(0);opacity:1}}
@keyframes pr-blink{0%{opacity:1}50%{opacity:.2}}
@keyframes pr-puff{0%{transform:translateY(0) scale(.4);opacity:0}20%{opacity:.8}100%{transform:translateY(-46px) scale(1.2);opacity:0}}
@keyframes pr-prog{0%{transform:scaleX(.02)}100%{transform:scaleX(1)}}
@keyframes pr-stamp{0%,8%{transform:translateY(-92px)}28%{transform:translateY(0)}32%{transform:translateY(4px)}36%{transform:translateY(0)}56%,100%{transform:translateY(-92px)}}
@keyframes pr-ink{0%,29%{opacity:0;transform:scale(1.3)}34%{opacity:1;transform:scale(1)}88%{opacity:1}100%{opacity:0}}
@keyframes pr-check{0%,36%{opacity:0;transform:scale(0)}46%{opacity:1;transform:scale(1)}88%{opacity:1}100%{opacity:0;transform:scale(0)}}
@keyframes pr-ant{0%,100%{transform:rotate(calc(var(--rot,4deg) * -1))}50%{transform:rotate(var(--rot,4deg))}}
@keyframes pr-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes pr-flick{0%{opacity:0}10%{opacity:.13}12%{opacity:0}47%{opacity:.07}49%{opacity:0}80%{opacity:.15}81%{opacity:0}}
@keyframes pr-draw{0%{stroke-dashoffset:1;opacity:1}70%{stroke-dashoffset:0;opacity:1}92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pr-lens{from{transform:translateX(-84px)}to{transform:translateX(84px)}}
@keyframes pr-lens-in{from{transform:translateX(126px)}to{transform:translateX(-126px)}}
@keyframes pr-glint{0%{transform:translateX(-130px);opacity:0}30%{opacity:1}70%{opacity:1}100%{transform:translateX(130px);opacity:0}}
@keyframes pr-ul{0%{transform:scaleX(0)}45%,80%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes pr-pop{0%{transform:translateY(80px)}22%{transform:translateY(-14px)}32%{transform:translateY(0)}78%{transform:translateY(0)}95%,100%{transform:translateY(80px)}}
@keyframes pr-float{0%,28%{opacity:0;transform:translateY(14px) scale(.5)}50%{opacity:1}100%{opacity:0;transform:translateY(-58px) scale(1.2)}}
@keyframes pr-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,1.055)}}
@keyframes pr-zf{0%{opacity:0;transform:translate(0,14px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(22px,-44px) scale(1.2)}}
@keyframes pr-nudge{0%,100%{transform:none}50%{transform:translateX(5px)}}
@keyframes pr-tvpop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pr,.pr *,.pr-picto,.pr-picto *{animation:none!important}.pr-sheet,.pr-puff,.pr-float,.pr-z,.pr-flick{opacity:0}.pr-slide{transform:translateX(30px);opacity:1}.pr-stamp{transform:translateY(0)}}

/* ---------- product screens (design size 1440x900, 1em = 16px) ---------- */
.ui-frame{position:relative;width:100%;aspect-ratio:16/10;container-type:inline-size;border-radius:clamp(8px,1.3vw,18px);overflow:hidden;background:#1C1C1A;box-shadow:0 0 0 1px rgba(0,0,0,.25),var(--lift)}
.ui-win{width:100%;height:100%;display:flex;flex-direction:column;font-size:calc(100cqw / 90);line-height:1.4;font-family:var(--body);color:var(--ink)}
.ui-win *{box-sizing:border-box}
.ui-win h1{font:400 2.1em/1.05 var(--display);letter-spacing:0}
.ui-win h2{font:700 1.15em/1.2 var(--body);letter-spacing:0}
.ui-win h3{font:700 .9em/1.2 var(--body);letter-spacing:0;margin-top:.3em}
.ui-win p{margin:0}
.ui-bar{height:2.9em;flex:none;background:#1C1C1A;display:flex;align-items:center;gap:.6em;padding:0 1.2em;position:relative}
.ui-bar>i{width:.85em;height:.85em;border-radius:50%;display:block}
.ui-url{position:absolute;left:50%;transform:translateX(-50%);background:#2B2B28;color:#A8A79F;font-size:.82em;padding:.3em 2em;border-radius:1em;display:flex;align-items:center;gap:.6em}
.ui-url b{width:.7em;height:.7em;border-radius:50%;background:#34D1A0;display:block}
.ui-body{flex:1;display:flex;min-height:0;background:var(--putty)}
.ui-side{width:13.5em;flex:none;background:#EDE2CD;padding:1.4em 1em;display:flex;flex-direction:column;gap:1.4em}
.ui-logo{display:flex;align-items:center;gap:.4em;font-family:var(--display);font-size:1.7em;color:var(--green);line-height:1}
.ui-logo-m{width:1.2em;height:1.4em;flex:none}
.ui-side nav{display:grid;gap:.3em}
.ui-side nav a{display:flex;align-items:center;gap:.7em;padding:.65em .8em;border-radius:.8em;font-weight:600;font-size:.95em;color:var(--ink-2)}
.ui-side nav a i{width:1em;height:1em;border-radius:.3em;display:block}
.ui-side nav a.on{background:var(--paper);color:var(--ink);box-shadow:inset 0 -.15em 0 rgba(60,40,15,.08)}
.ui-plan{margin-top:auto;background:var(--paper);border-radius:1em;padding:.9em;display:grid;gap:.35em;font-size:.8em}
.ui-plan span{color:var(--ink-2)}
.ui-plan em{display:block;height:.5em;border-radius:1em;background:var(--line);overflow:hidden}.ui-plan u{display:block;height:100%;background:var(--green);text-decoration:none}
.ui-main{flex:1;min-width:0;padding:2em 2.6em 1.8em;display:flex;flex-direction:column;gap:1.2em;overflow:hidden}
.ui-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1em}
.ui-win .ui-sub{color:var(--ink-2);font-size:.9em;margin-top:.3em;font-weight:500}
.ui-steps{display:flex;gap:.6em;font-size:.85em;font-weight:600;color:var(--ink-2);flex:none}
.ui-steps span{display:flex;align-items:center;gap:.5em;padding:.35em .9em .35em .35em;border-radius:2em;background:rgba(0,0,0,.05)}
.ui-steps b{width:1.8em;height:1.8em;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.9em}
.ui-steps .on{background:var(--ink);color:var(--paper)}.ui-steps .on b{background:var(--green);color:#fff}.ui-steps .done b{background:var(--green);color:#fff}
.ui-drop{border:.17em dashed #C9B88F;border-radius:1.4em;background:rgba(255,251,243,.6);padding:1.5em;display:grid;gap:.9em;justify-items:center}
.ui-file{display:flex;align-items:center;gap:1.1em;background:var(--paper);border-radius:1.1em;padding:.9em 1.2em;box-shadow:var(--lift);width:min(100%,40em)}
.ui-pdf{width:3em;height:3.6em;border-radius:.5em;background:linear-gradient(#fff,#EFE6D2);border:.12em solid #D8C9A8;position:relative;flex:none}
.ui-pdf b{position:absolute;left:-.35em;bottom:.5em;background:#F0604A;color:#fff;font-size:.62em;padding:.25em .55em;border-radius:.4em;font-weight:800}
.ui-fm strong{display:block;font-size:1.1em}.ui-fm span{font-size:.82em;color:var(--ink-2)}
.ui-ok{margin-left:auto;color:var(--green-deep);font-weight:700;font-size:.85em;background:#D8F5E8;padding:.35em .9em;border-radius:2em;white-space:nowrap}
.ui-x{font-style:normal;text-decoration:none;color:var(--ink-2);font-size:1.5em;line-height:1;margin-left:.1em}
.ui-hint{font-size:.85em;color:var(--ink-2)}.ui-hint a{color:var(--green-deep);font-weight:700;text-decoration:underline}
.ui-fields{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:1em}
.ui-fields label span{display:block;font-size:.8em;font-weight:700;margin-bottom:.4em;color:#3a463f}
.ui-in{height:2.9em;border-radius:.9em;background:var(--paper);box-shadow:inset 0 .15em .35em rgba(60,40,15,.14);padding:0 1em;display:flex;align-items:center;font-weight:500;font-size:.95em}
.ui-in.sel::after{content:"";margin-left:auto;width:.5em;height:.5em;border-right:.17em solid var(--ink);border-bottom:.17em solid var(--ink);transform:rotate(45deg) translate(-.1em,-.1em)}
.ui-label{font-size:.85em;font-weight:700;margin-bottom:-.5em}
.ui-chips{display:flex;flex-wrap:wrap;gap:.7em}
.ui-chip{display:flex;align-items:center;gap:.6em;padding:.6em 1em;border-radius:1em;background:var(--paper);font-weight:600;font-size:.9em;box-shadow:inset 0 -.18em 0 rgba(60,40,15,.08)}
.ui-chip i{width:1em;height:1em;border-radius:.3em;display:block}
.ui-chip.on{background:var(--ink);color:var(--paper);box-shadow:inset 0 -.18em 0 rgba(0,0,0,.35)}
.ui-chip s{text-decoration:none;width:1.4em;height:1.4em;border-radius:50%;background:var(--green);display:grid;place-items:center;font-size:.8em;margin-left:.2em}
.ui-cta{display:flex;align-items:center;gap:1.4em;margin-top:auto}
.ui-cta p{font-size:.85em;color:var(--ink-2);max-width:30em}
.ui-btn{height:3.4em;padding:0 1.8em;border-radius:1.1em;background:var(--ink);color:var(--paper);font-weight:700;display:inline-flex;align-items:center;gap:.7em;flex:none;box-shadow:inset 0 -.28em 0 rgba(0,0,0,.35),0 .8em 1.4em -.9em rgba(22,38,30,.7);white-space:nowrap}
.ui-btn.go{background:var(--green);color:#fff}
.ui-btn.sm{height:2.6em;padding:0 1.2em;font-size:.9em;border-radius:.9em}
.ui-btn.light{background:var(--paper);color:var(--ink);box-shadow:inset 0 -.2em 0 rgba(60,40,15,.1),var(--lift)}
.ui-btn.wide{width:100%;justify-content:center}
.ui-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1em}
.ui-stats div{background:var(--paper);border-radius:1em;padding:.8em 1em;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.7em;box-shadow:inset 0 -.18em 0 rgba(60,40,15,.07)}
.ui-stats i{grid-row:span 2;width:2.6em;height:2.6em;border-radius:.8em;display:block;box-shadow:inset 0 -.3em .5em -.2em rgba(40,20,0,.2)}
.ui-stats strong{font:400 1.5em/1 var(--display)}.ui-stats span{font-size:.78em;color:var(--ink-2);font-weight:500}
/* storyboard */
.ui-colh{display:grid;grid-template-columns:1fr 1.25fr;gap:1.2em;font-size:.76em;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;position:relative;margin-bottom:-.5em}
.ui-count{position:absolute;right:0;top:-.5em;font-style:normal;text-transform:none;letter-spacing:0;font-size:1.15em;color:var(--ink);background:#D8F5E8;padding:.2em .9em;border-radius:2em}
.ui-count b{color:var(--green-deep)}
.ui-rows{flex:1;min-height:0;display:grid;grid-template-rows:repeat(4,1fr);gap:.8em}
.ui-row{display:grid;grid-template-columns:1fr 1.25fr;gap:1.2em;min-height:0}
.ui-sc{background:var(--paper);border-radius:1.1em;padding:.8em 1em .8em .8em;display:flex;align-items:center;gap:1em;box-shadow:inset 0 -.2em 0 rgba(60,40,15,.07)}
.ui-th{width:8em;height:4.6em;border-radius:.8em;position:relative;overflow:hidden;flex:none;box-shadow:inset 0 -.4em .8em -.3em rgba(40,20,0,.18)}
.ui-th i{position:absolute;bottom:.7em;width:1.6em;height:.7em;border-radius:.3em;background:rgba(255,255,255,.7)}
.ui-th i:nth-child(1){left:.7em}.ui-th i:nth-child(2){left:3em;bottom:.9em}.ui-th i:nth-child(3){left:5.3em;bottom:1.1em}
.ui-th b{position:absolute;top:.4em;left:.5em;background:var(--ink);color:#fff;border-radius:.5em;font-size:.75em;padding:.1em .55em}
.ui-st strong{display:block;font-size:.98em;line-height:1.25}.ui-st span{font-size:.8em;color:var(--ink-2)}
.ui-ck{margin-left:auto;display:flex;align-items:center;gap:.5em;font-weight:700;font-size:.85em;white-space:nowrap}
.ui-ck u{text-decoration:none;width:1.7em;height:1.7em;border-radius:.5em;background:#EDE2CD;box-shadow:inset 0 .12em .25em rgba(60,40,15,.2);display:grid;place-items:center;color:#fff;font-size:.95em}
.ui-ck.on u{background:var(--green)}
.ui-src{background:rgba(255,255,255,.7);border-radius:1.1em;padding:.7em 1.1em;display:flex;flex-direction:column;justify-content:center;gap:.25em;overflow:hidden}
.ui-src small{font-size:.7em;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
.ui-src p{font-family:var(--serif);font-size:.88em;line-height:1.42}
.ui-src mark{background:#FFE27A;color:inherit;padding:.05em .15em;border-radius:.2em}
.ui-bottom{display:flex;justify-content:space-between;align-items:center;gap:1.4em}
.ui-bottom p{font-size:.85em;color:var(--ink-2)}
.ui-bottom .ui-btn{height:3.8em;font-size:1.08em}
/* review + edit */
.ui-split{flex:1;min-height:0;display:flex;gap:2.2em}
.ui-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.1em}
.ui-claims{width:21em;flex:none;background:var(--paper);border-radius:1.4em;padding:1.3em;display:flex;flex-direction:column;gap:.7em;box-shadow:inset 0 -.2em 0 rgba(60,40,15,.07)}
.ui-pill{padding:.4em 1em;border-radius:2em;background:#EDE2CD;font-weight:700;font-size:.8em;white-space:nowrap}
.ui-pill.good{background:#D8F5E8;color:var(--green-deep)}
.ui-player{position:relative;border-radius:1.2em;overflow:hidden;background:#0d1512;box-shadow:var(--lift)}
.ui-ctl{display:flex;align-items:center;gap:1em;padding:.9em 1.2em;background:#16261E;color:#fff}
.ui-play{width:2.4em;height:2.4em;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
.ui-play i{display:block;width:0;height:0;border-left:.75em solid #fff;border-top:.48em solid transparent;border-bottom:.48em solid transparent;margin-left:.2em}
.ui-tl{flex:1;position:relative}
.ui-bar2{height:.55em;border-radius:1em;background:rgba(255,255,255,.18);position:relative}
.ui-bar2 u{display:block;height:100%;border-radius:1em;background:#34D1A0}
.ui-bar2 b{position:absolute;top:50%;width:1.3em;height:1.3em;border-radius:50%;background:#fff;margin:-.65em 0 0 -.65em;box-shadow:0 .1em .4em rgba(0,0,0,.4)}
.ui-ticks s{position:absolute;top:-.2em;width:.15em;height:.95em;background:rgba(255,255,255,.4);border-radius:1px}
.ui-time{font-size:.85em;font-variant-numeric:tabular-nums;opacity:.85;white-space:nowrap}
.ui-meta{display:flex;justify-content:space-between;align-items:center;gap:1em}
.ui-acts{display:flex;gap:.7em}
.ui-cite{display:flex;align-items:center;gap:.6em;background:#FFF1BF;border-radius:2em;padding:.5em 1.1em .5em .6em;font-weight:700;font-size:.9em;box-shadow:inset 0 0 0 .12em #F6C549}
.ui-cite b{width:1.1em;height:1.1em;border-radius:.35em;background:#F6C549;display:block}
.ui-claims .ui-sub{margin-top:-.4em;margin-bottom:.3em}
.ui-claim{display:flex;gap:.8em;padding:.65em .8em;border-radius:.9em;align-items:flex-start}
.ui-claim time{font-weight:700;font-size:.8em;color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:.15em}
.ui-claim p{font-size:.84em;font-weight:600;line-height:1.3}.ui-claim small{font-size:.72em;color:var(--ink-2)}
.ui-claim.on{background:#FFF1BF;box-shadow:inset 0 0 0 .13em #F6C549}
.ui-check{margin-top:auto;display:flex;gap:.6em;align-items:center;background:#D8F5E8;color:var(--green-deep);font-weight:700;border-radius:.9em;padding:.7em .9em;font-size:.85em}
.ui-check i{font-style:normal;width:1.6em;height:1.6em;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:.85em;flex:none}
.ui-bubble{position:absolute;left:35%;top:15%;display:flex;gap:.7em;background:#fff;border-radius:1.1em;padding:.8em 1em;box-shadow:var(--lift);font-size:.92em;max-width:15em;z-index:3}
.ui-bubble::before{content:"";position:absolute;left:-.5em;top:1.2em;width:1em;height:1em;background:#fff;transform:rotate(45deg);border-radius:.2em}
.ui-bubble .av{flex:none;min-width:2em;height:2em;padding:0 .5em;border-radius:1em;background:#E0352B;color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8em}
.ui-bubble b{display:block;font-size:.8em;color:var(--ink-2)}
.ui-ba{display:flex;align-items:center;gap:1em;flex-wrap:nowrap}
.ui-bt{width:13em;flex:none}.ui-bt small{display:block;font-size:.75em;font-weight:700;color:var(--ink-2);margin-bottom:.3em;text-transform:uppercase;letter-spacing:.05em}
.ui-bt .ui-scene{border-radius:.7em;box-shadow:var(--lift)}
.ui-arrow{font-size:1.6em;color:var(--green-deep);font-weight:700}
.ui-note{flex:1;display:flex;gap:.8em;align-items:center;background:#D8F5E8;border-radius:1.1em;padding:.9em 1.1em;font-size:.88em;color:var(--ink)}
.ui-note i{font-style:normal;flex:none;width:2em;height:2em;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}
.ui-note b{display:block;color:var(--green-deep)}.ui-note span{font-size:.9em;color:var(--ink-2)}
.ui-box{background:#fff;border-radius:.9em;padding:.7em .9em;box-shadow:inset 0 .13em .3em rgba(60,40,15,.14)}
.ui-box small{display:block;font-size:.7em;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}.ui-box p{font-weight:600;font-size:.95em}
.ui-hist{display:grid;gap:.5em}
.ui-hist div{padding:.6em .8em;border-radius:.8em;background:#F4ECDD;font-size:.82em;font-weight:600}
.ui-hist b{color:var(--green-deep);margin-right:.5em;font-variant-numeric:tabular-nums}.ui-hist span{display:block;color:var(--ink-2);font-size:.88em;font-weight:500}
.ui-hist .mute{opacity:.7}
.ui-guard{margin-top:auto;font-size:.76em;color:var(--ink-2);border-top:.1em solid var(--line);padding-top:.7em;line-height:1.35}
/* the lesson frame (a clay scene, sized with its own container units) */
.ui-scene{position:relative;aspect-ratio:16/9;container-type:inline-size;overflow:hidden;background:#F4ECDD}
.ui-sc-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 40% 25%,#FFFBF3 0,#F8EFDD 45%,#EADFC6 100%)}
.ui-ped{position:absolute;width:15cqw;height:4cqw;border-radius:1.4cqw;background:linear-gradient(#D8F5E8,#9FDEC2 55%,#6CBE9E);box-shadow:0 1.1cqw 1.4cqw rgba(60,40,15,.22)}
.ui-ped::before{content:"";position:absolute;left:0;right:0;top:-1cqw;height:2.4cqw;border-radius:50%;background:#D8F5E8}
.ui-num{position:absolute;width:3cqw;text-align:center;font:400 2.6cqw/1 var(--display);color:#08734F;z-index:2}
.ui-man{position:absolute;left:11.5cqw;bottom:18cqw;width:8cqw;height:14cqw;z-index:2}
.ui-man i{position:absolute;display:block}
.ui-man .coat{left:0;bottom:0;width:8cqw;height:7.4cqw;border-radius:3.4cqw 3.4cqw 1cqw 1cqw;background:linear-gradient(#F1ECFF,#CFC2F4)}
.ui-man .collar{left:2.4cqw;bottom:5.6cqw;width:3.2cqw;height:1.6cqw;border-radius:50%;background:#B9A8EE}
.ui-man .head{left:1.2cqw;bottom:6.2cqw;width:5.6cqw;height:5.6cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FBE3C9,#F1C198);display:flex;gap:1.5cqw;align-items:center;justify-content:center;padding-top:.8cqw}
.ui-man .head b{display:block;width:.8cqw;height:1cqw;border-radius:50%;background:#16261E}
.ui-man .dome{left:.9cqw;bottom:10.3cqw;width:6.2cqw;height:3.2cqw;border-radius:3.1cqw 3.1cqw .3cqw .3cqw;box-shadow:inset 0 -.5cqw .6cqw rgba(0,0,0,.18),inset 0 .5cqw .6cqw rgba(255,255,255,.3)}
.ui-man .brim{left:4.4cqw;bottom:10.3cqw;width:4.2cqw;height:1cqw;border-radius:.6cqw;box-shadow:inset 0 -.3cqw .4cqw rgba(0,0,0,.2)}
.ui-ring{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.ui-ring ellipse{fill:none;stroke:#E0352B;stroke-width:.9;stroke-linecap:round;transform:rotate(-8deg);transform-origin:15.9px 26.5px}
.ui-sc-cap{position:absolute;left:50%;bottom:3cqw;transform:translateX(-50%);max-width:84%;background:rgba(22,38,30,.92);color:#FFFBF3;font:600 2.1cqw/1.3 var(--body);padding:.7cqw 1.7cqw;border-radius:1.3cqw;text-align:center;z-index:5}
@media (prefers-reduced-motion:reduce){.ui-logo-m *{animation:none!important}}