.sbf-slate{--chalk:color-mix(in srgb, var(--cloud) 82%, transparent);--rv:0;padding-top:clamp(52px,5vw,70px);position:relative}.sbf-sticks{height:clamp(52px,5vw,70px);position:absolute;top:0;left:0;right:0}.sbf-arm,.sbf-base{background:var(--ink);height:calc(50% - 2px);box-shadow:inset 0 0 0 1.5px var(--chalk);border-radius:4px 4px 2px 2px;position:absolute;left:0;right:0;overflow:hidden}.sbf-arm>b,.sbf-base>b{background:repeating-linear-gradient(118deg, var(--cloud) 0 28px, var(--ink) 28px 56px);position:absolute;inset:0}.sbf-base{bottom:0}.sbf-base>b{background-position:-14px 0}.sbf-arm{transform-origin:14px 100%;box-shadow:inset 0 0 0 1.5px var(--chalk), 0 10px 18px -8px #0009;top:2px;rotate:0deg}.sbf-slate[data-anim=true] .sbf-arm{rotate:calc(-12deg - var(--rv) * 12deg);transition:rotate .5s cubic-bezier(.2,.8,.2,1)}.sbf-slate[data-anim=true][data-clap=true] .sbf-arm{transition:rotate .16s cubic-bezier(.7,0,1,.6);rotate:0deg}@media (max-width:767px){.sbf-slate[data-anim=true] .sbf-arm{rotate:calc(-5deg - var(--rv) * 7deg)}}.sbf-slate[data-anim=true][data-clap=true]:hover .sbf-arm{transition:rotate .45s cubic-bezier(.34,1.56,.64,1);rotate:-7deg}.sbf-hinge{background:var(--cloud);width:14px;height:14px;box-shadow:0 0 0 3px var(--ink), inset 0 0 0 3px color-mix(in srgb, var(--stone) 70%, var(--ink));z-index:2;border-radius:50%;position:absolute;top:calc(50% - 7px);left:6px}.sbf-board{background:color-mix(in srgb, var(--ink) 88%, #000);box-shadow:inset 0 0 0 1.5px var(--chalk), 0 30px 60px -30px #000c;border-radius:4px 4px 8px 8px;flex-direction:column;display:flex;position:relative;overflow:hidden}.sbf-board:before{content:"";pointer-events:none;mix-blend-mode:screen;background:radial-gradient(120% 70% at 20% 0,#fff1da12,#0000 60%);position:absolute;inset:0}.sbf-slate[data-anim=true][data-clap=true] .sbf-board{animation:.32s cubic-bezier(.3,0,.2,1) .12s sbf-hit}@keyframes sbf-hit{0%{translate:0}35%{translate:0 3px}to{translate:0}}.sbf-light{z-index:2;pointer-events:none;opacity:0;background:radial-gradient(circle 190px at var(--lx,50%) var(--ly,50%), #fff1da29, #fff1da0d 45%, transparent 75%);mix-blend-mode:screen;transition:opacity .4s;position:absolute;inset:0}.sbf-slate:hover .sbf-light{opacity:1}.sbf-flash{z-index:3;pointer-events:none;opacity:0;background:radial-gradient(closest-side,#fff,#fff1dab3 45%,#0000);border-radius:14px;position:absolute;inset:-14px}.sbf-slate[data-anim=true][data-clap=true] .sbf-flash{animation:.5s ease-out .12s sbf-flash}@keyframes sbf-flash{0%{opacity:.75}to{opacity:0}}.sbf-take{animation:.5s cubic-bezier(.2,.8,.2,1) sbf-take;display:inline-block}@keyframes sbf-take{0%{opacity:0;translate:0 60%}}.sbf-mail{background:linear-gradient(var(--accent), var(--accent)) 0 100% / 0% 2px no-repeat;transition:background-size .5s steps(8,end),color .3s}.sbf-mail:hover,.sbf-mail:focus-visible{background-size:100% 2px}@media (prefers-reduced-motion:reduce){.sbf-slate .sbf-arm,.sbf-slate[data-anim=true] .sbf-arm{transition:none;rotate:0deg}.sbf-board,.sbf-flash,.sbf-take{animation:none!important}}