:root{--playground-top-offset:72px;--playground-app-height-offset:var(--playground-top-offset);--playground-inset:16px;--playground-section-space:24px;--playground-control-height:32px}.site-nav{background:var(--color-bg)}html body{flex-direction:column;min-height:100dvh;display:flex}body.playground-body{--color-ink-muted:hsl(var(--hsl-ink) / .75)}main{flex:1;min-height:0;display:flex}main.playground-page{flex-direction:column}#app{min-height:calc(100vh - var(--playground-app-height-offset));min-height:calc(100dvh - var(--playground-app-height-offset));width:100%;max-width:var(--content-width);padding-top:var(--playground-top-offset);box-sizing:border-box;flex:1;justify-content:center;align-items:stretch;margin-inline:auto;display:flex}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media (width<=640px){:root{--playground-top-offset:calc(84px + env(safe-area-inset-top,0px))}html body{padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}}@media (width<=640px),(pointer:coarse){:root{--playground-control-height:44px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}