:root{--codesandbox-gap-xs:clamp(4px,1vw,8px);--codesandbox-gap-sm:clamp(8px,2vw,12px);--codesandbox-gap-md:clamp(12px,3vw,16px);--codesandbox-gap-lg:clamp(16px,4vw,24px);--codesandbox-padding-xs:clamp(6px,1.5vw,10px);--codesandbox-padding-sm:clamp(8px,2vw,16px);--codesandbox-padding-md:clamp(12px,3vw,24px);--codesandbox-padding-lg:clamp(16px,4vw,32px);--codesandbox-grid-min-width:clamp(120px,20vw,200px);--codesandbox-variant-grid-min:clamp(140px,25vw,220px);--codesandbox-input-width-narrow:clamp(80px,15vw,120px);--codesandbox-input-width-wide:clamp(120px,25vw,180px);--codesandbox-breakpoint-sm:480px;--codesandbox-breakpoint-md:768px;--codesandbox-breakpoint-lg:1024px;--codesandbox-min-height:clamp(200px,30vh,400px);--codesandbox-max-height:clamp(400px,60vh,800px)}.codesandbox-container{font-size:clamp(12px,2.5vw,14px);line-height:1.5;container-type:inline-size}.codesandbox-variant-matrix,.codesandbox-controls{container-type:inline-size}@supports (container-type:inline-size){@container (min-width:768px){.codesandbox-variant-matrix{grid-template-columns:repeat(auto-fit,minmax(var(--codesandbox-variant-grid-min),1fr))}.codesandbox-controls{gap:var(--codesandbox-gap-md);grid-template-columns:repeat(2,1fr)}}@container (min-width:1024px){.codesandbox-variant-matrix{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.codesandbox-controls{grid-template-columns:repeat(3,1fr)}}}@supports not (container-type:inline-size){@media (min-width:768px){.codesandbox-variant-matrix{grid-template-columns:repeat(auto-fit,minmax(var(--codesandbox-variant-grid-min),1fr))}.codesandbox-controls{gap:var(--codesandbox-gap-md);grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.codesandbox-variant-matrix{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.codesandbox-controls{grid-template-columns:repeat(3,1fr)}}}@media (hover:none) and (pointer:coarse){.codesandbox-container{--codesandbox-button-min-height:44px;--codesandbox-input-min-height:44px}.codesandbox-container button,.codesandbox-container input,.codesandbox-container select{min-height:var(--codesandbox-button-min-height);padding:var(--codesandbox-padding-sm)}}@media (min-resolution:192dpi){.codesandbox-container{font-size:clamp(11px,2.3vw,13px)}}@media print{.codesandbox-container{--codesandbox-gap-sm:8px;--codesandbox-gap-md:12px;--codesandbox-padding-sm:8px;--codesandbox-padding-md:12px}.codesandbox-container .codesandbox-controls,.codesandbox-container .codesandbox-toolbar{display:none}}@media (prefers-reduced-motion:reduce){.codesandbox-container *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}