/* Peel, Sitepeel's mascot (public/peel-mascot.js; character bible, 2026-10-25). Flat fills, a
   lavender peeled corner like the logo's, short round limbs, no blur or glow.

   Every moving part is a full-size HTML layer (.pm-l) holding one slice of the drawing (viewBox
   0 0 128 128). Poses are custom properties per pose, applied with transform transitions; faces
   and props fade by opacity; loops run as Web Animations. All of it is compositor work. */
.pm{
  --pm-body:#F1ECF8;--pm-outline:transparent;--pm-outline-w:0;--pm-ink:#1D1626;--pm-limb:#F1ECF8;--pm-limb-w:4.4;
  --pm-flap-a:#D9BEFF;--pm-flap-b:#A46DF0;--pm-flap-line:transparent;--pm-back:#E2D9EE;--pm-edge:#CFC5DE;--pm-serial:#9045E8;
  --pm-shadow:rgba(0,0,0,.35);--pm-cheek:#F7B9D2;--pm-prop:#FFFFFF;--pm-art:#F4F4F6;--pm-thick:1;
  --bx:0;--by:0;--rot:0deg;--al:0deg;--fl:0deg;--ar:0deg;--fr:0deg;--ll:0deg;--lr:0deg;--ex:0;--ey:0;--flap:1;
  display:inline-block;position:relative;flex:none;width:var(--pm-size,96px);height:var(--pm-size,96px);line-height:0;vertical-align:middle;-webkit-tap-highlight-color:transparent}
.pm-full{cursor:pointer}
.pm .pm-l{position:absolute;inset:0}
.pm .pm-l>svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}

/* Colorways: one shape, eight contexts. 'auto' is default (white), light in the light theme.
   Peel is always white on the site (owner, Oct 26); 'night' only when asked for by name. */
.pm[data-colorway=light],[data-theme=light] .pm[data-colorway=auto]{--pm-body:#FFFFFF;--pm-outline:#1D1626;--pm-outline-w:2.2;--pm-limb:#1D1626;--pm-limb-w:3.2;--pm-flap-line:#1D1626;--pm-back:#EFE9F7;--pm-edge:#D9D0E6;--pm-shadow:rgba(16,9,31,.12)}
.pm[data-colorway=line]{--pm-body:transparent;--pm-outline:var(--pm-art);--pm-outline-w:2.2;--pm-ink:var(--pm-art);--pm-limb:var(--pm-art);--pm-limb-w:3;--pm-flap-line:var(--pm-art);--pm-back:transparent;--pm-edge:var(--pm-art);--pm-serial:var(--pm-art);--pm-shadow:transparent;--pm-cheek:transparent;--pm-prop:transparent}
[data-theme=light] .pm[data-colorway=line]{--pm-art:#1D1626}
.pm[data-colorway=halftone]{--pm-outline:#B58DF4;--pm-outline-w:1.6;--pm-ink:#C9A8F5;--pm-limb:#B58DF4;--pm-limb-w:3.6;--pm-flap-a:#C9A8F5;--pm-flap-b:#9C6CE8;--pm-back:#2A2234;--pm-edge:#B58DF4}
.pm[data-colorway=night]{--pm-body:#2B2833;--pm-ink:#B58DF4;--pm-limb:#4D4757;--pm-flap-a:#8A5CD6;--pm-flap-b:#4E2A8C;--pm-back:#24212B;--pm-edge:#1E1B24;--pm-shadow:rgba(0,0,0,.5);--pm-cheek:#6B4A86;--pm-prop:#2B2833}
.pm[data-colorway=mint]{--pm-flap-a:#C3F0D2;--pm-flap-b:#5FBF83}
.pm[data-colorway=amber]{--pm-flap-a:#FFE2B8;--pm-flap-b:#E8964A}
.pm[data-colorway=mono]{--pm-body:#1D1626;--pm-ink:#FFFFFF;--pm-limb:#1D1626;--pm-flap-a:#CFCFD6;--pm-flap-b:#8F8F9A;--pm-back:#2A2433;--pm-edge:#120D18;--pm-shadow:rgba(16,9,31,.14);--pm-cheek:#6E6874}
/* Strokes thicken as Peel shrinks. */
.pm-mid{--pm-thick:1.28}

/* Where each part turns (set per proportion by the script). */
.pm-pose,.pm-lean,.pm-tilt,.pm-sway{transform-origin:var(--o-feet)}
.pm-breathe,.pm-deep{transform-origin:var(--o-breath)}
.pm-shadow,.pm-shadow-t,.pm-shadow-j{transform-origin:50% 93.75%}
.pm-arm-l,.pm-arm-l-osc{transform-origin:var(--o-shoulder-l)}.pm-fore-l{transform-origin:var(--o-elbow-l)}
.pm-arm-r,.pm-arm-r-osc,.pm-arm-r-ev{transform-origin:var(--o-shoulder-r)}.pm-fore-r,.pm-fore-r-osc,.pm-fore-r-ev{transform-origin:var(--o-elbow-r)}
.pm-leg-l{transform-origin:var(--o-hip-l)}.pm-leg-r,.pm-leg-r-osc{transform-origin:var(--o-hip-r)}
.pm-flap,.pm-flap-osc,.pm-flap-ev{transform-origin:var(--o-fold)}
.pm-blink,.pm-eyes-osc{transform-origin:var(--o-eyes)}
.pm-needle{transform-origin:var(--o-needle)}
.pm-bit{transform-origin:var(--o-bit)}
.pm .pm-icon{transform-origin:50% 92%}.pm .pm-icon-eyes{transform-origin:50% 37.5%}

/* Poses. */
.pm-pose{transform:translate(calc(var(--bx) * .78125%),calc(var(--by) * .78125%)) rotate(var(--rot))}
.pm-arm-l{transform:rotate(var(--al))}.pm-fore-l{transform:rotate(var(--fl))}
.pm-arm-r{transform:rotate(var(--ar))}.pm-fore-r{transform:rotate(var(--fr))}
.pm-leg-l{transform:rotate(var(--ll))}.pm-leg-r{transform:rotate(var(--lr))}
.pm-eyes{transform:translate(calc(var(--ex) * .78125%),calc(var(--ey) * .78125%))}
.pm-flap{transform:rotate(45deg) scaleX(var(--flap)) rotate(-45deg)}
.pm-pose,.pm-arm-l,.pm-fore-l,.pm-arm-r,.pm-fore-r,.pm-leg-l,.pm-leg-r,.pm-eyes,.pm-flap{transition:transform .6s cubic-bezier(.33,.75,.3,1)}
.pm-look,.pm-lean{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pm[data-pose=up]{--ar:-106deg;--al:106deg}
.pm[data-pose=wink]{--ar:-106deg}
.pm[data-pose=out]{--ar:-62deg;--al:62deg}
.pm[data-pose=wave]{--ar:-60deg;--fr:-62deg;--rot:-2deg}
.pm[data-pose=peel]{--ar:30deg;--fr:46deg;--ex:2;--ey:2;--rot:3deg}
.pm[data-pose=search]{--ar:-62deg;--fr:-12deg;--ex:2.6;--ey:.2;--rot:3deg}
.pm[data-pose=think]{--ar:-96deg;--fr:-82deg;--ex:-1.6;--ey:-2.4;--rot:-3deg}
.pm[data-pose=celebrate]{--ar:-128deg;--al:128deg;--fr:-14deg;--fl:14deg}
.pm[data-pose=sad]{--ar:22deg;--al:-22deg;--ey:2;--by:2.5;--flap:.7}
.pm[data-pose=locked]{--bx:-8;--ar:-66deg;--fr:-36deg;--ex:2.6;--ey:-.5;--rot:2deg}
.pm[data-pose=timer]{--ar:-30deg;--fr:-78deg;--ex:2.2;--ey:-2}
.pm[data-pose=sleep]{--ar:10deg;--al:-10deg;--rot:6deg;--by:2;--flap:.85}
.pm[data-pose=point]{--ar:-56deg;--al:6deg;--ex:2.7;--rot:-2deg}

/* The drawing. */
.pm-shadow ellipse{fill:var(--pm-shadow)}
.pm-body-path{fill:var(--pm-body);stroke:var(--pm-outline);stroke-width:var(--pm-outline-w);stroke-linejoin:round}
.pm[data-colorway=halftone] .pm-body-path{fill:var(--pm-ht)}
.pm-body pattern path{fill:none;stroke:#B58DF4;stroke-width:.6;opacity:.75}
.pm-flap-back path,.pm-flap-icon{stroke:var(--pm-flap-line);stroke-width:1.4;stroke-linejoin:round}
.pm[data-colorway=line] :is(.pm-flap-back path,.pm-flap-icon){fill:none}
.pm-flap-front{opacity:0}
.pm-flap-front path{fill:var(--pm-body);stroke:var(--pm-outline);stroke-width:var(--pm-outline-w);stroke-linejoin:round}
.pm-stop-a{stop-color:var(--pm-flap-a)}.pm-stop-b{stop-color:var(--pm-flap-b)}
.pm .pm-line{fill:none;stroke:var(--pm-limb);stroke-width:calc(var(--pm-limb-w) * var(--pm-thick));stroke-linecap:round;stroke-linejoin:round}
.pm .pm-stroke{fill:none;stroke:var(--pm-ink);stroke-width:calc(2.4 * var(--pm-thick));stroke-linecap:round;stroke-linejoin:round}
.pm :is(.pm-e-oval,.pm-e-big,.pm-e-heart) *,.pm .pm-e-wink ellipse,.pm .pm-fill,.pm-icon-eyes :is(ellipse,rect){fill:var(--pm-ink)}
.pm .pm-icon-mouth{stroke-width:4.4}
.pm-cheeks{fill:var(--pm-cheek)}
.pm-prop-line{fill:none;stroke:var(--pm-limb);stroke-width:calc(2.6 * var(--pm-thick));stroke-linecap:round}
.pm-glass-lens{fill:rgba(255,255,255,.28);stroke:var(--pm-limb);stroke-width:calc(2.2 * var(--pm-thick))}
.pm-glass-glint{fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;opacity:.9}
.pm-watch-face{fill:var(--pm-prop);stroke:var(--pm-limb);stroke-width:calc(2 * var(--pm-thick))}
.pm-needle path{fill:none;stroke:#9045E8;stroke-width:1.6;stroke-linecap:round}
.pm-door-frame{fill:none;stroke:var(--pm-limb);stroke-width:1.8}
.pm-door-panel{fill:#EFE6FD;stroke:#1D1626;stroke-width:1}
.pm-door-knob{fill:#1D1626}
.pm-lock-shackle{fill:none;stroke:#1D1626;stroke-width:1.8}
.pm-lock-body{fill:#B58DF4;stroke:#1D1626;stroke-width:1.2}
.pm-dot circle{fill:var(--pm-body);stroke:var(--pm-limb);stroke-width:1.2}
.pm-z text{fill:var(--pm-limb);font-family:ui-monospace,"Geist Mono",monospace;font-weight:700}
/* The back and the paper's edges (only while turning). */
.pm-back-path{fill:var(--pm-back);stroke:var(--pm-outline);stroke-width:var(--pm-outline-w);stroke-linejoin:round}
.pm-back-curl{fill:var(--pm-body);stroke:var(--pm-outline);stroke-width:var(--pm-outline-w);stroke-linejoin:round}
.pm-serial{fill:var(--pm-serial);font:600 7.4px ui-monospace,"Geist Mono",monospace;text-anchor:middle;letter-spacing:.04em}
.pm-barcode rect{fill:var(--pm-serial)}
.pm-edge-strip{fill:var(--pm-edge)}
.pm-side-curl{fill:var(--pm-flap-b)}

/* Faces: only the eyes, brows and mouth change. */
.pm .pm-e,.pm .pm-b,.pm .pm-m,.pm-cheeks{opacity:0;transition:opacity .16s}
.pm[data-face=neutral] :is(.pm-e-oval,.pm-m-smile),
.pm[data-face=happy] :is(.pm-e-happy,.pm-m-grin),
.pm[data-face=curious] :is(.pm-e-oval,.pm-b-arch,.pm-m-o),
.pm[data-face=focused] :is(.pm-e-flat,.pm-b-flat,.pm-m-flat),
.pm[data-face=wink] :is(.pm-e-wink,.pm-m-smile),
.pm[data-face=surprised] :is(.pm-e-big,.pm-m-big),
.pm[data-face=sleepy] :is(.pm-e-closed,.pm-m-small),
.pm[data-face=smug] :is(.pm-e-flat,.pm-m-smirk),
.pm[data-face=worried] :is(.pm-e-oval,.pm-b-worried,.pm-m-wavy),
.pm[data-face=determined] :is(.pm-e-oval,.pm-b-angry,.pm-m-firm),
.pm[data-face=love] :is(.pm-e-heart,.pm-m-smile),
.pm[data-face=dizzy] :is(.pm-e-x,.pm-m-wavy){opacity:1}
.pm[data-face=happy] .pm-cheeks{opacity:.7}.pm[data-face=love] .pm-cheeks{opacity:.85}

/* Props for some poses. */
.pm-glass,.pm-watch,.pm-needle,.pm-door,.pm-dots,.pm-zzz,.pm-confetti{opacity:0;transition:opacity .3s}
.pm[data-pose=search] .pm-glass,.pm[data-pose=timer] :is(.pm-watch,.pm-needle),.pm[data-pose=locked] .pm-door,.pm[data-pose=think] .pm-dots,.pm[data-pose=sleep] .pm-zzz,.pm[data-pose=celebrate] .pm-confetti{opacity:1}
.pm-dot,.pm-z,.pm-bit{opacity:0}
.pm[data-pose=think] .pm-dot{animation:pm-dot 2.4s ease-in-out infinite}
.pm[data-pose=think] .pm-dot:nth-child(2){animation-delay:.3s}.pm[data-pose=think] .pm-dot:nth-child(3){animation-delay:.6s}
.pm[data-pose=sleep] .pm-z{animation:pm-z 2.7s ease-in-out infinite}
.pm[data-pose=sleep] .pm-z:nth-child(2){animation-delay:.9s}.pm[data-pose=sleep] .pm-z:nth-child(3){animation-delay:1.8s}
.pm[data-pose=timer] .pm-needle{animation:pm-spin 2.4s linear infinite}
.pm[data-pose=celebrate] .pm-bit{animation:pm-pop 1.5s cubic-bezier(.2,.8,.2,1) infinite}
.pm-bit:nth-child(1){--pm-to:translate(-23.4%,-17.2%) rotate(-40deg)}
.pm-bit:nth-child(2){--pm-to:translate(-10.9%,-23.4%) rotate(25deg);animation-delay:.2s!important}
.pm-bit:nth-child(3){--pm-to:translate(3.1%,-26.6%) rotate(-15deg);animation-delay:.45s!important}
.pm-bit:nth-child(4){--pm-to:translate(15.6%,-21.9%) rotate(40deg);animation-delay:.1s!important}
.pm-bit:nth-child(5){--pm-to:translate(25%,-14.1%) rotate(-30deg);animation-delay:.35s!important}
.pm-bit:nth-child(6){--pm-to:translate(-3.1%,-18.8%) rotate(60deg);animation-delay:.6s!important}
@keyframes pm-spin{to{transform:rotate(360deg)}}
@keyframes pm-dot{0%,15%{opacity:0;transform:translateY(2.3%)}35%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-1.6%)}}
@keyframes pm-z{0%{opacity:0;transform:translate(0,3.1%)}25%,60%{opacity:1}100%{opacity:0;transform:translate(4.7%,-6.3%)}}
@keyframes pm-pop{0%{opacity:0;transform:none}15%{opacity:1}70%{opacity:1;transform:var(--pm-to)}100%{opacity:0;transform:var(--pm-to) translateY(7.8%)}}

/* The turnaround: real 3D, switched on only while Peel turns. */
.pm-back,.pm-edge,.pm-edge-x{display:none}
.pm-back{transform:rotateY(180deg)}
.pm-edge-l{transform-origin:var(--o-edge-l);transform:rotateY(-90deg)}
.pm-edge-r{transform-origin:var(--o-edge-r);transform:rotateY(90deg)}
.pm-edge-x{transform:rotateY(-90deg);opacity:0}
.pm-turning .pm-deep{perspective:520px}
.pm-turning .pm-turn{transform-style:preserve-3d}
.pm-turning :is(.pm-front,.pm-back,.pm-edge){backface-visibility:hidden}
.pm-turning :is(.pm-back,.pm-edge,.pm-edge-x){display:block}

/* Off screen: the props' own motion waits too (the script pauses the rest). */
.pm-paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .pm .pm-l,.pm .pm-l *{transition:none!important;animation:none!important}
  .pm[data-pose=think] .pm-dot,.pm[data-pose=sleep] .pm-z{opacity:1}
  .pm[data-pose=celebrate] .pm-bit{opacity:1;transform:var(--pm-to)}
  .pm-full{cursor:default}
}