.picker-side[data-astro-cid-dz554crl]{border:2px solid var(--line);background:var(--surface-2);min-width:0;color:var(--muted);border-radius:1.5rem;flex-direction:column;align-items:center;gap:.55rem;padding:.95rem .5rem .85rem;transition:border-color .18s,background-color .18s,box-shadow .18s;display:flex}.picker-side[data-astro-cid-dz554crl]:hover{border-color:var(--line-2)}.picker-side[data-astro-cid-dz554crl][aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent)}.picker-side[data-astro-cid-dz554crl] .keycap[data-astro-cid-dz554crl]{letter-spacing:.16em;white-space:nowrap;min-width:0;max-width:100%;padding:.6rem clamp(.7rem,2vw,1.2rem);font-size:clamp(1.15rem,.8rem + 1.2vw,1.6rem)}.picker-side[data-astro-cid-dz554crl] .keycap[data-astro-cid-dz554crl][data-long]{letter-spacing:.06em;font-size:clamp(.85rem,.6rem + 1.1vw,1.45rem)}@media (width>=640px){.picker-side[data-astro-cid-dz554crl]{gap:.45rem;padding:.8rem 1rem .75rem}}.how-mock[data-astro-cid-hahnwogd]{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}.how-step--lead[data-astro-cid-hahnwogd] .how-mock[data-astro-cid-hahnwogd]{box-shadow:var(--shadow-accent)}.how-num[data-astro-cid-hahnwogd]{transition:color .3s}.how-step[data-astro-cid-hahnwogd]:is(:hover,.is-playing) .how-num[data-astro-cid-hahnwogd]{color:var(--color-image,var(--image))}.how-step[data-astro-cid-hahnwogd]:is(:hover,.is-playing) .how-mock[data-astro-cid-hahnwogd]{box-shadow:var(--shadow-lg);transform:translateY(-6px)}.how-step--lead[data-astro-cid-hahnwogd]:is(:hover,.is-playing) .how-mock[data-astro-cid-hahnwogd]{box-shadow:0 10px 24px -8px color-mix(in srgb, var(--image-fill) 45%, transparent), 0 34px 60px -24px color-mix(in srgb, var(--image-fill) 60%, transparent);transform:translateY(-14px)}.how-drop[data-astro-cid-hahnwogd],.how-plus[data-astro-cid-hahnwogd],.how-file[data-astro-cid-hahnwogd]{transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,background-color .3s}[data-astro-cid-hahnwogd][data-step=add]:is(:hover,.is-playing) .how-drop[data-astro-cid-hahnwogd]{border-style:solid;border-color:var(--image);background-color:var(--image-soft)}[data-astro-cid-hahnwogd][data-step=add]:is(:hover,.is-playing) .how-plus[data-astro-cid-hahnwogd]{transform:translateY(-4px)scale(1.08)}[data-astro-cid-hahnwogd][data-step=add]:is(:hover,.is-playing) .how-file[data-astro-cid-hahnwogd]{border-color:var(--line-2);transform:translate(4px)}[data-astro-cid-hahnwogd][data-step=add]:is(:hover,.is-playing) .how-file[data-astro-cid-hahnwogd]:nth-of-type(3){transition-delay:80ms}[data-astro-cid-hahnwogd][data-step=add]:is(:hover,.is-playing) .how-dot[data-astro-cid-hahnwogd]{animation:1.2s ease-out infinite how-ping}@keyframes how-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent)}to{box-shadow:0 0 0 7px #0000}}.how-want[data-astro-cid-hahnwogd],.how-size[data-astro-cid-hahnwogd],.how-badge[data-astro-cid-hahnwogd]{vertical-align:bottom;display:inline-grid;overflow:hidden}.how-want[data-astro-cid-hahnwogd]>span[data-astro-cid-hahnwogd],.how-size[data-astro-cid-hahnwogd]>span[data-astro-cid-hahnwogd],.how-badge[data-astro-cid-hahnwogd]>span[data-astro-cid-hahnwogd]{grid-area:1/1;transition:transform .45s cubic-bezier(.3,1.3,.5,1),opacity .3s}.how-want[data-astro-cid-hahnwogd]>span[data-astro-cid-hahnwogd]:last-child,.how-size[data-astro-cid-hahnwogd]>span[data-astro-cid-hahnwogd]:last-child,.how-badge[data-astro-cid-hahnwogd]>span[data-astro-cid-hahnwogd]:last-child{opacity:0;transform:translateY(110%)}[data-astro-cid-hahnwogd][data-step=pick]:is(:hover,.is-playing) [data-astro-cid-hahnwogd]:is(.how-want,.how-size,.how-badge)>span[data-astro-cid-hahnwogd]:first-child{opacity:0;transform:translateY(-110%)}[data-astro-cid-hahnwogd][data-step=pick]:is(:hover,.is-playing) [data-astro-cid-hahnwogd]:is(.how-want,.how-size,.how-badge)>span[data-astro-cid-hahnwogd]:last-child{opacity:1;transform:none}[data-astro-cid-hahnwogd][data-step=pick]:is(:hover,.is-playing) .how-size[data-astro-cid-hahnwogd]>span[data-astro-cid-hahnwogd]{transition-delay:.25s}[data-astro-cid-hahnwogd][data-step=pick]:is(:hover,.is-playing) .how-badge[data-astro-cid-hahnwogd]>span[data-astro-cid-hahnwogd]{transition-delay:.35s}.how-chip[data-astro-cid-hahnwogd]{transition:background-color .3s,color .3s,transform .3s}.how-chip[data-astro-cid-hahnwogd][data-fmt=JPG]{color:var(--image-fill);background:#fff}[data-astro-cid-hahnwogd][data-step=pick]:is(:hover,.is-playing) .how-chip[data-astro-cid-hahnwogd][data-fmt=JPG]{color:#fff;background:0 0}[data-astro-cid-hahnwogd][data-step=pick]:is(:hover,.is-playing) .how-chip[data-astro-cid-hahnwogd][data-fmt=WEBP]{color:var(--image-fill);background:#fff;transform:translateY(-2px)}.how-fill[data-astro-cid-hahnwogd]{width:62%;transition:width .7s cubic-bezier(.2,.8,.2,1) .1s}[data-astro-cid-hahnwogd][data-step=pick]:is(:hover,.is-playing) .how-fill[data-astro-cid-hahnwogd]{width:40%}.how-arrow[data-astro-cid-hahnwogd]{transition:transform .4s cubic-bezier(.3,1.5,.5,1);display:inline-flex}[data-astro-cid-hahnwogd][data-step=pick]:is(:hover,.is-playing) .how-arrow[data-astro-cid-hahnwogd]{transform:translate(4px)}.how-result[data-astro-cid-hahnwogd]:after{content:"";background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ok) 16%, transparent) 60%, transparent);pointer-events:none;position:absolute;inset:0;transform:translate(-100%)}[data-astro-cid-hahnwogd][data-step=save]:is(:hover,.is-playing) .how-result[data-astro-cid-hahnwogd]:after{animation:.9s forwards how-sweep}[data-astro-cid-hahnwogd][data-step=save]:is(:hover,.is-playing) .how-result[data-astro-cid-hahnwogd]:nth-of-type(3):after{animation-delay:.18s}@keyframes how-sweep{to{transform:translate(100%)}}.how-save[data-astro-cid-hahnwogd]{transition:background-color .3s,transform .2s;display:inline-grid}.how-save[data-astro-cid-hahnwogd]>span[data-astro-cid-hahnwogd]{grid-area:1/1;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .25s;display:flex}.how-save-done[data-astro-cid-hahnwogd]{opacity:0;transform:scale(.3)}[data-astro-cid-hahnwogd][data-step=save]:is(:hover,.is-playing) .how-save[data-astro-cid-hahnwogd]{background-color:var(--ok);transition-delay:.35s;transform:translateY(1px)}[data-astro-cid-hahnwogd][data-step=save]:is(:hover,.is-playing) .how-result[data-astro-cid-hahnwogd]:nth-of-type(3) .how-save[data-astro-cid-hahnwogd]{transition-delay:.55s}[data-astro-cid-hahnwogd][data-step=save]:is(:hover,.is-playing) .how-save-icon[data-astro-cid-hahnwogd]{opacity:0;transform:translateY(8px)}[data-astro-cid-hahnwogd][data-step=save]:is(:hover,.is-playing) .how-save-done[data-astro-cid-hahnwogd]{opacity:1;transition-delay:.4s;transform:none}[data-astro-cid-hahnwogd][data-step=save]:is(:hover,.is-playing) .how-result[data-astro-cid-hahnwogd]:nth-of-type(3) .how-save[data-astro-cid-hahnwogd]>span[data-astro-cid-hahnwogd]{transition-delay:.6s}.how-zero[data-astro-cid-hahnwogd]{transition:transform .35s cubic-bezier(.3,1.8,.5,1) .7s;display:inline-block}[data-astro-cid-hahnwogd][data-step=save]:is(:hover,.is-playing) .how-zero[data-astro-cid-hahnwogd]{transform:scale(1.25)}@media (hover:none){.how-step[data-astro-cid-hahnwogd]:hover .how-mock[data-astro-cid-hahnwogd]{transform:none}}@media (prefers-reduced-motion:reduce){.how-mock[data-astro-cid-hahnwogd],.how-mock[data-astro-cid-hahnwogd] [data-astro-cid-hahnwogd]{transition:none!important;animation:none!important}.how-step[data-astro-cid-hahnwogd]:is(:hover,.is-playing) .how-mock[data-astro-cid-hahnwogd]{transform:none}}