.pu-page{overflow-x:clip}.pu-stage{margin-top:64px}.pu-flow{margin-top:clamp(72px,8vw,120px)}.pu-demo{--pu-move:cubic-bezier(.77, 0, .175, 1);--pu-arrive:cubic-bezier(.23, 1, .32, 1)}.pu-demo .pub-app__canvas{background:var(--endorr-paper);min-height:520px}.pu-art{aspect-ratio:1;width:min(100%,440px);position:relative;overflow:clip}.pu-layer{width:100%;height:100%;display:block;position:absolute;inset:0}.pu-coarse{clip-path:inset(0)}.pu-mid,.pu-crisp{clip-path:inset(0 100% 0 0)}.pu-mid-in{clip-path:inset(0)}.pu-demo[data-phase=done] .pu-coarse,.pu-demo[data-phase=done] .pu-mid-in{clip-path:inset(0 0 0 100%)}.pu-demo[data-phase=done] .pu-mid,.pu-demo[data-phase=done] .pu-crisp{clip-path:inset(0)}.pu-scan{opacity:0;pointer-events:none;position:absolute;inset:0}.pu-scan>i{background:var(--endorr-black);width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;left:0}.pu-scan:before{content:"";background:linear-gradient(90deg,#0b0f1400,#0b0f141a);width:12%;position:absolute;top:0;bottom:0;left:-12%}@property --pu-n{syntax:"<integer>";inherits:false;initial-value:142}.pu-dpi{--pu-n:142;counter-reset:pu-n var(--pu-n)}.pu-dpi:before{content:counter(pu-n)}.pu-demo[data-phase=done] .pu-dpi{--pu-n:300}.pu-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.pu-readout{font-variant-numeric:tabular-nums;background:#fff;border-radius:4px;padding:4px 10px;font-size:12px;transition:background-color .3s,color .3s;position:absolute;bottom:12px;left:14px;box-shadow:0 0 0 1px #0b0f1414}.pu-panelwrap{flex-direction:column;gap:12px;display:flex}.pu-bar{background:var(--endorr-paper);border-radius:2px;height:4px;overflow:hidden}.pu-bar>span{background:var(--endorr-black);transform-origin:0;border-radius:2px;height:100%;display:block}.pu-demo .pub-primary{transition:transform .16s ease-out}.pu-demo .pub-primary[data-pressed=true]{transform:scale(.97)}.pu-demo[data-live=true][data-phase=work] .pu-coarse{animation:2.8s linear .3s both pu-hide}.pu-demo[data-live=true][data-phase=work] .pu-mid{animation:2.8s linear .3s both pu-reveal}.pu-demo[data-live=true][data-phase=work] .pu-mid-in{animation:2.8s linear .75s both pu-hide}.pu-demo[data-live=true][data-phase=work] .pu-crisp{animation:2.8s linear .75s both pu-reveal}.pu-demo[data-live=true][data-phase=work] .pu-scan{animation:2.8s linear .3s forwards pu-scan}.pu-demo[data-live=true][data-phase=work] .pu-dpi{animation:3.25s linear .3s both pu-count}.pu-demo[data-live=true][data-phase=work] .pu-bar>span{animation:3.6s linear both pu-bar}.pu-demo[data-live=true][data-phase=work] .pu-state,.pu-demo[data-live=true][data-phase=done] .pu-state{animation:pu-rise .4s var(--pu-arrive) both}.pu-demo[data-playing=false] *{animation-play-state:paused!important}@keyframes pu-hide{0%{clip-path:inset(0)}to{clip-path:inset(0 0 0 100%)}}@keyframes pu-reveal{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes pu-scan{0%{opacity:1;transform:translate(0)}94%{opacity:1}to{opacity:0;transform:translate(100%)}}@keyframes pu-count{0%{--pu-n:142}to{--pu-n:300}}@keyframes pu-bar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes pu-rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.pu-readout b{font-weight:600}.pu-readout[data-ok=true]{background:var(--status-ok-tint);color:#1a6b32;box-shadow:none}.pu-undo{border:1px solid var(--grey-200);background:#fff;border-radius:8px;align-self:flex-start;padding:6px 12px;font-size:13px;font-weight:500}@media (max-width:1000px){.pu-demo .pub-app__canvas{min-height:0}}@media (max-width:560px){.pu-demo .pub-steps{display:none}}.pu-field{border:1px solid var(--grey-200);border-radius:8px;justify-content:space-between;align-items:center;padding:9px 12px;font-size:14px;display:flex}.pu-field span{color:#545b62}.pu-field b{font-variant-numeric:tabular-nums;font-weight:600}.pu-note{color:#545b62;margin:0;font-size:13px}.pu-thumbs{background:var(--endorr-paper);color:#545b62;border-radius:6px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding:10px;display:grid}.pu-thumbs svg{width:100%;height:auto;display:block}.pu-applied{display:flex}@media (prefers-reduced-motion:reduce){.pu-demo *,.pu-demo :before{transition:none!important;animation:none!important}}