.playground{--spacing-42:6rem}@supports (padding:clamp(6rem,10vh,10.5rem)){.playground{--spacing-42:clamp(6rem,10vh,10.5rem)}}.mb-56{margin-bottom:calc(var(--spacing-1) * 56)}.playground .hr-h,.playground .hr-v{display:block}.playground .hr-h{background:var(--color-gray-300);height:1px}.playground .hr-v{background:var(--color-gray-300);width:1px}.playground .columns{--columns:24;--gap:0;--rows:0;grid-template-columns:repeat(var(--columns),1fr);grid-template-rows:repeat(var(--rows),auto)}.playground-header-title h1{margin-bottom:var(--spacing-6)}@media screen and (min-width:50rem){.playground-header-title{align-items:flex-end;display:flex;justify-content:space-between}.playground-header-title h1{margin-bottom:0}}.playground-header-menu a{display:block;padding:var(--spacing-2px);position:relative;white-space:nowrap}.playground-header-menu a[aria-current]:before{background:var(--color-gray-300);content:"";height:1px;left:calc(var(--spacing-12) * -1);position:absolute;top:50%;width:var(--spacing-8)}.playground-header-menu a[aria-current]:after{background:var(--color-light);border:1px solid var(--color-gray-300);border-radius:50%;content:"";height:10px;left:-1.25rem;margin-top:-4px;position:absolute;top:50%;width:10px}.playground-header-layout{grid-gap:var(--spacing-12);display:grid;grid-template-columns:auto 12rem;margin:0 auto;max-width:110rem}.playground-header-figure{position:relative;z-index:1}.playground-header-figure-wrapper{background:var(--color-light);box-shadow:var(--shadow-2xl);display:block;overflow:hidden;transition:all .2s}.playground-header-figure-wrapper.loading{box-shadow:none}.playground-header-figure-wrapper img{transition:all .3s}.playground-header-figure-wrapper.loading img{opacity:0}@media screen and (max-width:50rem){.playground-header-menu a[aria-current]:before{background:none;border-left:1px solid var(--color-gray-300);border-top:1px solid var(--color-gray-300);height:16rem;left:calc(var(--spacing-6) * -1);width:1rem}.playground-header-menu a[aria-current]:after{left:-1rem}.playground-header-layout{grid-gap:0;grid-template-columns:1fr}.playground-header-menu{grid-row:1;margin-bottom:var(--spacing-3);margin-left:var(--container-padding)}.playground-header-menu ul{grid-column-gap:var(--spacing-3);display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));padding:0 var(--spacing-6)}}@media screen and (min-width:50rem){.playground-header-figure-wrapper{border-bottom-right-radius:var(--spacing-2);border-top-right-radius:var(--spacing-2)}}@media screen and (min-width:110.1rem){.playground-header-figure-wrapper{border-radius:var(--spacing-2)}}.playground-filesystem-header{padding:var(--spacing-42) 0 var(--spacing-12) var(--spacing-6)}.playground-filesystem .hr-indent{margin-left:4.75rem}.playground-filesystem-folders{margin-left:-.5rem}.playground-filesystem .filesystem{--border:var(--color-gray-300);--icon-aqua:var(--color-aqua-500);--icon-blue:var(--color-blue-500);--icon-green:var(--color-green-500);--icon-orange:var(--color-orange-500);--icon-purple:var(--color-purple-500);--icon-red:var(--color-red-500);--icon-yellow:var(--color-yellow-500);background:none;color:currentColor;overflow:hidden;padding:0;pointer-events:none}.playground-filesystem .hr-end{grid-column:1/-1}@media screen and (max-width:64rem){.playground-filesystem-header{border-left:1px solid var(--color-gray-300)}}@media screen and (min-width:40rem){.playground-filesystem .hr-end{grid-column:1/17}}@media screen and (min-width:64rem){.playground-filesystem .hr-end{grid-column:10/17}.playground-filesystem-layout{display:grid;grid-template-columns:repeat(24,1fr)}.playground-filesystem-files{grid-column:10/-1;grid-row:1;padding-top:var(--spacing-42);position:relative}.playground-filesystem-files:before{background:var(--color-gray-300);content:"";height:var(--spacing-42);position:absolute;top:0;width:1px}.playground-filesystem-header{grid-column:1/10;padding:var(--spacing-42) 0 var(--spacing-12)}}.playground-backend-header{justify-self:end;padding-bottom:var(--spacing-42);padding-top:var(--spacing-42)}.playground-backend-logos .hr-h{width:3rem}.playground-backend-logos svg{height:3rem;max-width:100%;width:auto}.playground-backend .hr-end{grid-column:1/-1}@media screen and (max-width:40rem){.playground-backend-header{padding-bottom:var(--spacing-12)}.playground-backend-header,.playground-backend-logos{border-right:1px solid var(--color-gray-300);grid-column:1/-1;padding-right:var(--spacing-6)}.playground-backend-logos{justify-self:flex-end;padding-bottom:var(--spacing-42)}.playground-backend-logos hr{display:none}}@media screen and (min-width:40rem){.playground-backend-logos{border-left:1px solid var(--color-gray-300);grid-column:17/-1}.playground-backend-header{grid-column:1/15}.playground-backend .hr-end{grid-column:1/17}}@media screen and (min-width:45rem){.playground-backend .hr-end{grid-column:12/17}}.playground-medium .dots{align-items:center;display:flex}.playground-medium .dots i{background:var(--color-gray-300);border-radius:50%;height:10px;margin-right:4px;width:10px}.playground-medium-header{padding-bottom:var(--spacing-42);padding-top:var(--spacing-42)}.playground-medium-browser header{border-bottom:1px solid var(--color-light)}.playground-medium-browser .columns{--gap:var(--spacing-3);--columns:12;grid-template-columns:repeat(var(--columns),1fr)}.playground-medium-browser .columns>*{--span-sm:var(--span)}.playground-medium-browser-body .text-2xs{font-size:9px}.playground-medium-browser-body .text-3xs{font-size:7px}.playground-medium-browser-body .btn{font-family:var(--font-sans);font-size:8px;padding:2px 6px;pointer-events:none}.playground-medium-browser-gallery{grid-gap:var(--spacing-1);align-self:flex-start;display:grid;grid-template-columns:repeat(4,1fr)}.playground-medium-browser-gallery :first-child{grid-column:1/-1}.playground-medium-phone>div{border:6px solid #fff}.playground-medium-phone>div:after{background:#fff;border-radius:6rem;content:"";height:6px;left:50%;margin-left:-1rem;position:absolute;top:.75rem;width:2rem;z-index:1}.playground-medium-phone header{background:linear-gradient(transparent,rgba(0,0,0,.5));bottom:0;font-size:9px;left:0;padding:var(--spacing-24) var(--spacing-2) var(--spacing-2) var(--spacing-2);position:absolute;right:0;white-space:nowrap;z-index:1}.playground-medium-api .toolbar{display:none}.playground-medium-api pre code{font-size:var(--text-xs)}.playground-medium .hr-h.hr-end{display:none}@media screen and (max-width:45rem){.playground-medium .hr-h,.playground-medium .hr-v{display:none}.playground-medium .hr-v.hr-main{display:block;grid-column:1;grid-row:1/5;height:100%}.playground-medium-header{grid-column:1/-1;grid-row:1;padding-bottom:var(--spacing-12);padding-left:var(--spacing-6);padding-top:var(--spacing-42)}.playground-medium-browser{grid-column:1/-1;grid-row:2;margin-left:var(--spacing-6)}.playground-medium-phone{grid-column:1/10}.playground-medium-api,.playground-medium-phone{grid-row:3;margin-left:var(--spacing-6);margin-top:var(--spacing-6)}.playground-medium-api{grid-column:10/-1}.playground-medium-api pre{line-height:var(--leading-tight);padding:var(--spacing-3)}.playground-medium-api pre code{font-size:7px}}@media screen and (min-width:32rem){.playground-medium-api pre code{font-size:10px}}@media screen and (min-width:45rem){.playground-medium .hr-main{grid-column:12;grid-row:1;height:100%}.playground-medium-header{grid-column:14/-1;grid-row:1}.playground-medium-browser{align-self:center;grid-column:1/11;grid-row:1}.playground-medium-phone{grid-column:13/17}.playground-medium-api{grid-column:18/-1}.playground-medium-api pre code{font-size:11px}}@media screen and (min-width:60rem){.playground-medium-phone header{font-size:var(--text-sm);padding:var(--spacing-24) var(--spacing-3) var(--spacing-3) var(--spacing-3)}}@media screen and (max-width:60rem){.playground-medium .hr-end{display:block}}.playground-audience .columns{--columns:1}.playground-audience-header{padding-bottom:var(--spacing-12);padding-top:var(--spacing-42)}.playground-audience-links a{display:block}.playground-audience-links a:after,.playground-audience-links a:before{content:"";position:absolute}.playground-audience-links a:after{background:var(--color-light);border:1px solid var(--color-gray-300);border-radius:50%;height:10px;width:10px}@media screen and (max-width:60rem){.playground-audience .hr-v{display:none}.playground-audience-header{border-left:1px solid var(--color-gray-300);padding-left:var(--spacing-6)}.playground-audience-links a{padding-bottom:var(--spacing-6);padding-left:var(--spacing-12);position:relative}.playground-audience-links a:before{border-bottom:1px solid var(--color-gray-300);border-left:1px solid var(--color-gray-300);height:6rem;left:0;top:-5.45rem;width:var(--spacing-6)}.playground-audience-links a:after{left:var(--spacing-6);top:.25rem}}@media screen and (min-width:60rem){.playground-audience .columns{--columns:24}.playground-audience-header{grid-column:1/8}.playground-audience-links a{border-top:1px solid var(--color-gray-300);padding-top:var(--spacing-12);position:relative}.playground-audience-links a:last-child{border-top:0}.playground-audience-links a>*{margin-left:-.625rem}.playground-audience-links a:before{background:var(--color-gray-300);height:var(--spacing-8);top:0;width:1px}.playground-audience-links a:after{left:-4px;top:var(--spacing-8)}.playground-audience-links a:first-child{grid-column:3/9}.playground-audience-links a:nth-child(2){grid-column:9/15}.playground-audience-links a:nth-child(3){grid-column:15/21}.playground-audience-links a:nth-child(4){grid-column:21/24}}