.gpg-demo{background:var(--page);width:100%;height:100vh;color:var(--ink);font-family:var(--font-archivo), system-ui, sans-serif;flex-direction:column;display:flex;position:relative;overflow:hidden auto}.gpg-demo a{color:var(--ink)}.gpg-demo h1,.gpg-demo h2,.gpg-demo h3{letter-spacing:normal;font-family:inherit}.gpg-demo label{font-weight:400;font-size:inherit;flex-direction:row;gap:0;display:block}.gpg-demo input,.gpg-demo textarea,.gpg-demo select{box-sizing:border-box;background:0 0;border:none;border-radius:0;width:auto;padding:0;line-height:normal}.gpg-demo input:focus,.gpg-demo textarea:focus,.gpg-demo select:focus{box-shadow:none}.gpg-demo button{font:inherit}.gpg-demo :focus-visible{outline:2px solid var(--pink);outline-offset:2px}.gpg-demo .mono{font-family:var(--font-jbmono), monospace}.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}@keyframes gpg-demo-pane{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.demo-pane{animation:.3s ease-out gpg-demo-pane}@keyframes gpg-demo-stamp{0%{opacity:0;transform:scale(2.4)rotate(-16deg)}60%{opacity:1;transform:scale(.94)rotate(-9deg)}to{opacity:1;transform:scale(1)rotate(-10deg)}}.demo-stamp{animation:.5s cubic-bezier(.2,.9,.3,1) both gpg-demo-stamp}@keyframes gpg-demo-note{0%{opacity:0;transform:translateY(14px)rotate(-2deg)}to{opacity:1;transform:rotate(-2deg)}}.demo-note{animation:.35s ease-out both gpg-demo-note}.demo-nav{transition:background .2s}.demo-nav:hover{background:#f7eedf0f}.demo-row{transition:opacity .25s,background .25s}@media (prefers-reduced-motion:reduce){.demo-pane,.demo-stamp,.demo-note{animation:none!important}}.gpg-demo-body{flex-wrap:wrap;flex:1;align-items:stretch;display:flex}.gpg-demo-sidebar{box-sizing:border-box;background:var(--ink);max-width:100%;height:calc(100vh - 52px);min-height:640px;color:var(--cream);flex-direction:column;flex:236px;align-self:flex-start;gap:22px;padding:22px 14px;display:flex;position:sticky;top:52px;overflow-y:auto}.gpg-demo-main{min-width:0;padding:clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) var(--main-pad-bottom,clamp(24px, 3vw, 40px));box-sizing:border-box;flex-direction:column;flex:999 560px;gap:26px;display:flex;position:relative}.gpg-demo-mobile-toggle{display:none}.gpg-demo-sidebar-nav,.gpg-demo-sidebar-bottom{display:flex}@media (max-width:860px){.gpg-demo-body{flex-direction:column}.gpg-demo-sidebar{flex-flow:wrap;align-items:center;width:100%;height:auto;min-height:0;position:static;overflow:visible}.gpg-demo-sidebar-nav,.gpg-demo-sidebar-bottom{width:100%;display:none}.gpg-demo-sidebar.menu-open .gpg-demo-sidebar-nav,.gpg-demo-sidebar.menu-open .gpg-demo-sidebar-bottom{display:flex}.gpg-demo-mobile-toggle{margin-left:auto;display:inline-flex}.gpg-demo-brand-row{width:auto}}