/* (c) 2026 Pretty Paperwork Network. All rights reserved. Not licensed for copying, redistribution or AI training. */
/* PPN Chat SketchBun (sketchbun.js). The Cafe floor as paper cutouts: theme tokens, the site's ink line and hard drop, no filters.
   Only the dress code keeps fixed colors. */
.hd-w{position:absolute;inset:0}
.hd[data-w=sketchbun]{background:var(--paper)}
.sb-bg{position:absolute;inset:-12px;overflow:hidden;transform:translate(calc(var(--px)*-20px),calc(var(--py)*-12px))}
.sb-wall{position:absolute;left:0;right:0;top:0;height:40%;background:var(--perf),color-mix(in srgb,var(--title-b) 14%,var(--paper));background-size:22px 22px,auto;border-bottom:4px solid var(--ink)}
.sb-floor{position:absolute;left:0;right:0;top:40%;bottom:0;background:repeating-conic-gradient(color-mix(in srgb,var(--accent) 9%,var(--paper)) 0 25%,var(--paper) 0 50%) 0 0/64px 64px}
.sb-awn{position:absolute;left:0;top:-6px;display:block}
.sb-p{position:absolute;transform:translate(-50%,-100%);overflow:visible;width:auto}
.sb-dr>*{fill:var(--ink);stroke:var(--ink)}
.sb-boat{transform:translate(70px,62px);animation:sb-bt 19s ease-in-out infinite alternate}.sb-boat.b{transform:translate(180px,84px);animation:sb-bt2 27s ease-in-out infinite alternate}
@keyframes sb-bt{to{transform:translate(150px,44px) rotate(-4deg)}}@keyframes sb-bt2{to{transform:translate(104px,70px) rotate(5deg)}}
/* paper in the air */
.sb-air{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.sb-air i{position:absolute;top:-14px;width:9px;height:12px;box-shadow:0 0 0 1.5px var(--ink);animation:sb-fall var(--d) linear var(--l) infinite}
@keyframes sb-fall{to{transform:translate(-50px,105vh) rotate(380deg)}}
.sb-pln{position:absolute;left:0;top:0;width:40px;animation:sb-fly 24s ease-in-out infinite alternate}
@keyframes sb-fly{0%{translate:8vw 30vh}40%{translate:36vw 12vh}70%{translate:62vw 26vh}100%{translate:84vw 10vh}}
/* the percolator: table, pot, steam. Anyone speaking kicks the steam */
.sb-fire{position:absolute;width:0;height:0;--s:150px}
.sb-fire .sb-p{left:0;top:0;height:var(--s)}
.sb-glow{position:absolute;left:calc(var(--s)*-.78);top:calc(var(--s)*-.13);width:calc(var(--s)*1.56);height:calc(var(--s)*.34);border-radius:50%;background:var(--ink);opacity:.14}
.sb-fl{position:absolute;left:calc(var(--s)*-.18);top:calc(var(--s)*-1.4);width:calc(var(--s)*.4);height:calc(var(--s)*.48);transform-origin:50% 100%;animation:sb-fl 2.4s ease-in-out infinite alternate}
.sb-fl .f{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sb-fl .f1{animation:hd-f .9s steps(1) infinite}.sb-fl .f0{animation:hd-f0 .9s steps(1) infinite}
@keyframes sb-fl{from{transform:translateY(3%) scale(.94)}to{transform:translateY(-5%) scale(1.04)}}
.sb-fire.kick .sb-fl{animation:sb-kick .6s var(--spring,ease-out)}@keyframes sb-kick{40%{transform:translateY(-16%) scale(1.34)}}
/* bunnies: the room's ink, a hard ground shadow, their own motions */
[data-w=sketchbun] .su .fig{filter:none}
[data-w=sketchbun] .su .shd{background:var(--ink);opacity:.2;top:calc(var(--h)*-.06)}
[data-w=sketchbun] .su.in .fig{animation:sb-in .5s var(--spring,ease-out) both}@keyframes sb-in{0%{opacity:0;transform:translateY(-30%) scale(.8,1.2)}60%{transform:scale(1.08,.9)}100%{opacity:1}}
[data-w=sketchbun] .su.talk .fig{animation:sb-talk .5s var(--spring,ease-out)}@keyframes sb-talk{0%{transform:none}35%{transform:translateY(-16%) scale(.96,1.08)}70%{transform:scale(1.08,.92)}100%{transform:none}}
.su.m-rock .fig{animation:sb-rock var(--t) ease-in-out var(--dl) infinite alternate}@keyframes sb-rock{from{transform:rotate(-2deg)}to{transform:rotate(3deg)}}
.su.m-still .fig{animation:hd-breathe var(--t) ease-in-out var(--dl) infinite}
.su.m-sing .fig{animation:sb-sing var(--t) ease-in-out var(--dl) infinite}@keyframes sb-sing{50%{transform:scale(.96,1.05) translateY(-3%)}}
.su.m-tip .fig{animation:sb-tip var(--t) ease-in-out var(--dl) infinite}@keyframes sb-tip{60%{transform:rotate(-3deg)}}
.su.m-snooze .fig{animation:sb-snz var(--t) ease-in-out var(--dl) infinite}@keyframes sb-snz{50%{transform:scale(1.03,1.05)}}
/* the boil: the two drawings swap 6 to 8 times a second, each bunny on its own clock. --b is one full cycle, two swaps. Shorter is jitterier.
   The swap runs on opacity at the svg, so the compositor does it. Reduced motion stops everything in holo.css and hides .f1 */
[data-w=sketchbun] .su{--b:.3s}
[data-w=sketchbun] .su .f0{animation:sb-bf0 var(--b) steps(1) var(--dl) infinite}[data-w=sketchbun] .su .f1{animation:sb-bf1 var(--b) steps(1) var(--dl) infinite}
@keyframes sb-bf0{0%,49.9%{opacity:1}50%,100%{opacity:0}}@keyframes sb-bf1{0%,49.9%{opacity:0}50%,100%{opacity:1}}
[data-suit=domino]{--b:.29s}[data-suit=nap]{--b:.33s}[data-suit=sunny]{--b:.26s}[data-suit=toast]{--b:.31s}[data-suit=ink]{--b:.32s}[data-suit=shade]{--b:.3s}[data-suit=clay]{--b:.28s}[data-suit=lop]{--b:.33s}[data-suit=bass]{--b:.25s}[data-suit=puddle]{--b:.27s}
/* the two held poses inside each drawing, at the bunny's tempo with a long hold */
[data-w=sketchbun] .sb-a1{opacity:0}
[data-w=sketchbun] .sb-a0{animation:hd-f0 var(--t) steps(1) var(--dl) infinite}[data-w=sketchbun] .sb-a1{animation:hd-f var(--t) steps(1) var(--dl) infinite}
/* body motions step like stop motion. Entrances and talking stay on their spring */
[data-w=sketchbun] .su:not(.in):not(.talk) .fig{animation-timing-function:steps(3,end)}
/* seasonal props boil too, a little slower: these are static drawings inside bigger svgs */
.sb-b1{opacity:0}
[data-w=sketchbun] .sb-b0{animation:sb-bf0 .5s steps(1) infinite}[data-w=sketchbun] .sb-b1{animation:sb-bf1 .5s steps(1) infinite}
.sb-str{position:absolute;left:0;top:48px;display:block}
/* plates in the site's own style */
[data-w=sketchbun] .su .np{background:var(--paper);color:var(--ink);box-shadow:0 0 0 2px var(--ink),2px 2px 0 2px var(--ink);border-radius:8px}
[data-w=sketchbun] .su.talk .np{background:var(--accent);color:var(--accent-ink,#fff)}
[data-w=sketchbun] .su.talk .np i{background:var(--paper);color:var(--ink)}
[data-w=sketchbun] .hd-top{background:var(--paper);color:var(--ink);box-shadow:0 0 0 2.5px var(--ink),3px 3px 0 2.5px var(--ink);top:50px}
[data-w=sketchbun] .hb-b{box-shadow:0 0 0 3px var(--ink),4px 5px 0 3px var(--ink)}
/* BigBun: pops up from the floor, under the speech bubbles, and never takes a click */
.sb-pop{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:4;pointer-events:none;overflow:hidden;animation:sb-up .34s var(--spring,ease-out) both}
.sb-pop.go{animation:sb-out .32s ease-in both}
@keyframes sb-up{from{transform:translateY(102%)}}@keyframes sb-out{to{transform:translateY(102%)}}
.sb-pop .sb-ib{left:50%;top:auto;bottom:-3%;height:88%;transform:translateX(-50%)}
.sb-pop .sb-bag{left:calc(50% + 2%);top:0;height:30%;transform:rotate(168deg);transform-origin:50% 60%;animation:sb-pour .5s ease-in-out infinite alternate}
@keyframes sb-pour{to{transform:rotate(156deg)}}
.sb-pl{position:absolute;left:49%;top:24%;width:8px;height:12px;border-radius:50%;background:#4a2e20;box-shadow:0 0 0 1.5px var(--ink);animation:sb-drop .5s ease-in infinite}
.sb-pl.b{left:52%;animation-delay:-.17s}.sb-pl.c{left:47%;animation-delay:-.34s}
@keyframes sb-drop{from{transform:translateY(0)}to{transform:translateY(24vh) rotate(160deg)}}
@media (max-width:760px){[data-w=sketchbun] .su .np{font-size:10px}.sb-floor{background-size:44px 44px}}