.hz .hz-dev-side-demo{position:fixed;right:0;bottom:clamp(32px,12vh,120px);z-index:30;display:flex;align-items:center;border:1px solid transparent;border-right:0;border-radius:12px 0 0 12px;color:var(--navy);background:linear-gradient(155deg,#f3f8ff,#f4fae9) padding-box,var(--grad) border-box;box-shadow:0 5px 24px #22345b1f}.hz .hz-dev-side-demo[data-expanded=false]{border:0;background:transparent;box-shadow:none}.hz .hz-dev-side-demo :is(a,button){display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--blue);cursor:pointer;transition:background-color .2s ease,transform .2s cubic-bezier(.16,1,.3,1),color .2s ease,box-shadow .2s ease}.hz-side-links{display:flex;flex-direction:column;padding:5px;gap:3px}.hz-side-links[hidden]{display:none}.hz .hz-dev-side-demo .hz-side-toggle{width:26px;height:44px;padding:3px;flex-shrink:0;border:1px solid transparent;border-right:0;border-radius:10px 0 0 10px;background:linear-gradient(150deg,#e3efff,#e8f7cc) padding-box,var(--grad) border-box;transition:background .2s ease,transform .22s cubic-bezier(.16,1,.3,1),box-shadow .2s ease}.hz .hz-dev-side-demo .hz-side-toggle:hover{transform:translate(-3px);box-shadow:-2px 0 10px #22345b24}.hz .hz-dev-side-demo .hz-side-toggle:active{transform:scale(.9) translate(-2px)}.hz .hz-dev-side-demo .hz-side-toggle svg{width:16px;height:16px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}.hz .hz-dev-side-demo .hz-side-toggle:hover svg{transform:scale(1.15)}.hz .hz-dev-side-demo .hz-side-toggle:active svg{transform:scale(.85)}@keyframes hzSideSlideIn{0%{opacity:0;transform:translate(14px) scale(.9)}60%{transform:translate(-2px) scale(1.02)}to{opacity:1;transform:translate(0) scale(1)}}.hz .hz-dev-side-demo[data-expanded=true] .hz-side-links :is(a,button){animation:hzSideSlideIn .24s cubic-bezier(.16,1,.3,1) both}.hz .hz-dev-side-demo[data-expanded=true] .hz-side-links :is(a,button):nth-child(1){animation-delay:.02s}.hz .hz-dev-side-demo[data-expanded=true] .hz-side-links :is(a,button):nth-child(2){animation-delay:.05s}.hz .hz-dev-side-demo[data-expanded=true] .hz-side-links :is(a,button):nth-child(3){animation-delay:.08s}.hz .hz-dev-side-demo[data-expanded=true] .hz-side-links :is(a,button):nth-child(4){animation-delay:.11s}.hz .hz-dev-side-demo[data-expanded=true] .hz-side-toggle{position:absolute;right:100%}.hz .hz-dev-side-demo svg{width:21px;height:21px;flex-shrink:0}.hz .hz-dev-side-demo button:disabled{opacity:.4;cursor:default}.hz .hz-dev-side-demo :is(a,button):focus-visible{outline:2px solid var(--blue);outline-offset:-2px}@media (hover: hover) and (prefers-reduced-motion: no-preference){.hz .hz-dev-side-demo :is(a,button:enabled):hover{color:var(--green-ink)}.hz .hz-dev-side-demo .hz-side-links :is(a,button:enabled):hover{background:#fff;transform:scale(1.1) translate(-2px);box-shadow:0 4px 12px #22345b14}.hz .hz-dev-side-demo .hz-side-links :is(a,button:enabled):active{transform:scale(.92)}}.hz:has(.hz-publish-bar,.hz-editor) .hz-dev-side-demo,body:has(.hz-publish-dock) .hz-dev-side-demo{display:none}@media (max-width: 800px),(max-height: 600px){.hz .hz-dev-side-demo{bottom:calc(16px + env(safe-area-inset-bottom,0px));flex-direction:column-reverse}.hz .hz-dev-side-demo[data-expanded=false]{border-radius:12px 0 0 12px}.hz .hz-dev-side-demo .hz-side-toggle{width:44px}.hz .hz-dev-side-demo[data-expanded=true] .hz-side-toggle{position:static;border:0;border-radius:10px}}@media (prefers-reduced-motion: reduce){.hz .hz-dev-side-demo :is(a,button){transition:none}}