@layer reset,base,components,custom;@layer routes{.kit-play-desktop__container{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100dvh;display:flex;position:relative}.kit-play-desktop__details{top:16rem;left:var(--spacing-x-site);z-index:2;background-color:var(--kit-play-color-card);border:1px solid var(--kit-play-color-card-border);border-radius:2rem;flex-direction:column;align-items:flex-start;gap:1.5rem;width:min(32rem,100vw - 4rem);min-height:64rem;max-height:calc(100dvh - 11rem);padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;overflow:hidden;box-shadow:0 0 15px -3px #0000001a}.kit-play-desktop__details--collapsed{gap:0;width:8rem;min-height:0}.kit-play-desktop__details .btn{border:none}.kit-play-desktop__details-toggle{flex-shrink:0;align-self:flex-start}.kit-play-desktop__details-content::-webkit-scrollbar{width:.5rem}.kit-play-desktop__details-content::-webkit-scrollbar-track{background:oklch(22% .02 275.8/.1);border-radius:.25rem}.kit-play-desktop__details-content::-webkit-scrollbar-thumb{background:oklch(37.6% .02 275.8);border-radius:.25rem}.kit-play-desktop__details-content::-webkit-scrollbar-thumb:hover{background:oklch(41.5% .02 275.8)}.kit-play-desktop__details-content{opacity:1;flex-direction:column;align-self:stretch;gap:1.5rem;max-height:60rem;transition:opacity .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1),margin-top .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden auto}.kit-play-desktop__details--collapsed .kit-play-desktop__details-content{opacity:0;pointer-events:none;max-height:0;margin-top:0;overflow:hidden}.kit-play-desktop__details-logo{object-fit:contain;width:100%;max-width:18rem;height:auto;position:relative;left:50%;transform:translate(-50%)}.kit-play-desktop__details-copy{flex-direction:column;gap:.75rem;display:flex}.kit-play-desktop__details-title{color:var(--kit-play-color-main);font-size:var(--text-lg);font-weight:600;line-height:1.375}.kit-play-desktop__details-description{color:color-mix(in srgb, var(--kit-play-color-card-foreground) 78%, transparent);font-size:var(--text-sm);line-height:1.625}.kit-play-desktop__stage{flex-shrink:0;justify-content:center;align-items:center;width:100%;min-width:0;display:flex;position:relative}.kit-play-desktop__stage--menu-active .kit-play-desktop__pads{transform:translateX(calc(var(--kit-play-desktop-pads-shift) * -1))}.kit-play-desktop__pads{width:clamp(var(--n-w-mod-unit) * 6, 92rem, 50%);will-change:transform;flex-shrink:0;justify-content:center;align-items:center;padding:10rem;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;transform:translate(0)}.kit-play-desktop__pads--menu-active{transform:translateX(calc(var(--kit-play-desktop-pads-shift) * -1))}.kit-play-desktop__pads-container{grid-template-columns:repeat(4,1fr);gap:1.5rem;width:100%;display:grid}.kit-play-desktop__info-description{display:none}.kit-play-desktop__pad{--box-shadow-size:12px;aspect-ratio:1;background-color:var(--kit-play-color-main);border:1px solid var(--kit-play-color-border);-webkit-user-select:none;user-select:none;touch-action:none;border-radius:1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1),box-shadow .6s ease-out;position:relative;overflow:hidden}.kit-play-desktop__pad .ripple{background-color:color-mix(in srgb, var(--kit-play-color-main), #ffffff80)}@media (width>=700px){.kit-play-desktop__pad{cursor:pointer;-webkit-user-select:auto;user-select:auto}.kit-play-desktop__pad:hover{background-color:var(--kit-play-color-main-hover)}}.kit-play-desktop__pad--active{box-shadow:0 0 var(--box-shadow-size) var(--kit-play-color-main-hover);transition:box-shadow .3s ease-out}.kit-play-desktop__pad--pressed{background-color:var(--kit-play-color-main-hover);transform:scale(.98)}.kit-play-desktop__pad--toggled:after{z-index:10;aspect-ratio:1;background:conic-gradient(from 0deg, transparent 0deg, transparent calc(var(--progress,0) * 3.6deg), #fffc calc(var(--progress,0) * 3.6deg), #fffc 360deg);-webkit-backdrop-filter:brightness(150%);backdrop-filter:brightness(150%);content:"";border-radius:50%;width:2.5rem;position:absolute;top:1rem;right:1rem;-webkit-mask:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='progress-mask'%3E%3Crect width='20' height='20' fill='white'/%3E%3Ccircle cx='10' cy='10' r='7' fill='black'/%3E%3C/mask%3E%3Crect width='20' height='20' fill='black' mask='url(%23progress-mask)'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='progress-mask'%3E%3Crect width='20' height='20' fill='white'/%3E%3Ccircle cx='10' cy='10' r='7' fill='black'/%3E%3C/mask%3E%3Crect width='20' height='20' fill='black' mask='url(%23progress-mask)'/%3E%3C/svg%3E") 50%/contain no-repeat}@media (width<=1236px){.kit-play-mobile__container{width:100%;height:calc(100dvh - 8rem);min-height:calc(100dvh - 8rem);padding:var(--spacing-x-site);flex-direction:column;justify-content:flex-start;align-items:center;gap:1rem;padding-top:1rem;display:flex;overflow:hidden}.kit-play-mobile__banner{opacity:1;flex:none;align-items:center;width:100%;max-height:16rem;margin-top:12rem;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),margin-top .3s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.kit-play-mobile__banner--hidden{opacity:0;pointer-events:none;max-height:0;margin-top:0}}@media (width<=1236px) and (width>=700px) and (width<=1019px){.kit-play-mobile__banner{max-height:20rem}}@media (width<=1236px){.kit-play-mobile__banner-surface{background-color:var(--kit-play-color-card);border:1px solid var(--kit-play-color-card-border);background:linear-gradient(180deg, oklch(18% .019 274.6/0) 0%, oklch(18% .019 274.6/.35) 100%), var(--kit-play-color-card);border-radius:2rem;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.75rem;min-height:8.5rem;padding:1rem 1.25rem;display:flex}}@media (width<=1236px) and (width>=700px) and (width<=1019px){.kit-play-mobile__banner-surface{min-height:16rem}}@media (width<=1236px){.kit-play-mobile__banner-logo{object-fit:contain;width:auto;max-width:min(16rem,50vw);max-height:10rem}}@media (width<=1236px) and (width>=700px) and (width<=1019px){.kit-play-mobile__banner-logo{max-height:12rem}}@media (width<=1236px){.kit-play-mobile__pads{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;padding:.5rem;display:flex}.kit-play-mobile__pads-container{--max-grid-size:100%;--translation-value:0rem;width:100%;max-width:56rem;max-width:min(100%, var(--max-grid-size));max-height:min(100%, var(--max-grid-size));will-change:transform, max-width, max-height;grid-template-columns:repeat(4,1fr);gap:1rem;transition:max-width .3s cubic-bezier(.4,0,.2,1),max-height .3s cubic-bezier(.4,0,.2,1);display:grid;position:relative}}@media (width<=1236px) and (width>=1020px){.kit-play-mobile__pads-container{max-width:86rem}}@media (width<=1236px){.kit-play-mobile__pads-container--active{transform:translateY(var(--translation-value))}}@media (width<=1236px) and (width>=480px){.kit-play-mobile__pads-container{margin-top:-10vw}}@media (width<=1236px) and (width>=701px){.kit-play-mobile__pads-container{gap:1.25rem;margin-top:-5vw}}@media (width<=1236px) and (width>=1021px){.kit-play-mobile__pads-container{margin-top:0}}@media (width<=1236px){.kit-play-mobile__pad{--box-shadow-size:12px;aspect-ratio:1;background-color:var(--kit-play-color-main);border:1px solid var(--kit-play-color-border);-webkit-user-select:none;user-select:none;touch-action:none;border-radius:1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1),box-shadow .6s ease-out;position:relative;overflow:hidden}.kit-play-mobile__pad .ripple{background-color:color-mix(in srgb, var(--kit-play-color-main), #ffffff80)}}@media (width<=1236px) and (width>=700px){.kit-play-mobile__pad{cursor:pointer;-webkit-user-select:auto;user-select:auto}.kit-play-mobile__pad:hover{background-color:var(--kit-play-color-main-hover)}}@media (width<=1236px){.kit-play-mobile__pad--active{box-shadow:0 0 var(--box-shadow-size) var(--kit-play-color-main-hover);transition:box-shadow .3s ease-out}.kit-play-mobile__pad--pressed{background-color:var(--kit-play-color-main-hover);transform:scale(.98)}.kit-play-mobile__pad--toggled:after{z-index:10;aspect-ratio:1;background:conic-gradient(from 0deg, transparent 0deg, transparent calc(var(--progress,0) * 3.6deg), #fffc calc(var(--progress,0) * 3.6deg), #fffc 360deg);-webkit-backdrop-filter:brightness(150%);backdrop-filter:brightness(150%);content:"";border-radius:50%;width:2.5rem;position:absolute;top:1rem;right:1rem;-webkit-mask:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='progress-mask'%3E%3Crect width='20' height='20' fill='white'/%3E%3Ccircle cx='10' cy='10' r='7' fill='black'/%3E%3C/mask%3E%3Crect width='20' height='20' fill='black' mask='url(%23progress-mask)'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='progress-mask'%3E%3Crect width='20' height='20' fill='white'/%3E%3Ccircle cx='10' cy='10' r='7' fill='black'/%3E%3C/mask%3E%3Crect width='20' height='20' fill='black' mask='url(%23progress-mask)'/%3E%3C/svg%3E") 50%/contain no-repeat}}.kit-play-main{--kit-play-menu-width:min(calc(100vw - 18rem), 40vw);--kit-play-menu-shift-ratio:.5;--kit-play-desktop-pads-shift:clamp(24rem, calc(var(--kit-play-menu-width) * var(--kit-play-menu-shift-ratio)), 40rem);background-color:var(--kit-play-color-background);height:100dvh;padding-top:0;overflow:hidden}.kit-play-nav{z-index:340;width:100%;height:7rem;padding-block:1rem;padding-inline:var(--spacing-x-site);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#0a0a14 25%,#0000);align-items:center;display:flex;position:fixed;top:0}.kit-play-nav__container{width:100%;max-width:var(--n-container-max-width);justify-content:space-between;align-items:center;gap:3rem;margin-inline:auto;display:flex}.kit-play-nav__left{text-wrap:nowrap;flex-wrap:nowrap;align-items:center;gap:3rem;display:flex}.kit-play-nav__info{gap:.5ch;display:flex}.kit-play-nav__info strong{font-weight:600}}@layer overrides;
