.c-playground-item{padding:var(--margin);background-color:var(--color-bg-4);border-radius:var(--border-radius);margin-bottom:var(--margin);font-size:var(--font-size-sm);line-height:1.4;cursor:pointer;transition:all var(--transition-time) linear}.c-playground-item:last-child{margin-bottom:0}.c-playground-item strong{display:block}.c-playground-item p{display:none;margin:0;opacity:.75;transition:all var(--transition-time) linear}.c-playground-item.active{background-color:var(--color-primary)}.c-playground-item.active p,.c-playground-item:hover p,.c-playground-item:active p{opacity:1}.c-playground-footer{position:relative;height:100%;background-color:var(--color-bg-3);backdrop-filter:blur(8px);border-radius:calc(var(--margin) + var(--border-radius));border-top-right-radius:0;border-bottom-right-radius:0;padding:.5rem}.c-playground-footer.app{border-radius:0}.c-playground-footer .spacer{padding:.5rem}.c-playground-footer .form-control{margin:0}.c-playground-footer .c-button-container{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:4px;padding:4px 4px 2px;margin-bottom:-2px;border-radius:14px;background-color:var(--color-bg-3)}.c-playground-footer .c-button-container .btn{height:initial;padding:3px}.c-playground-footer section>span{display:none;margin-bottom:.5rem;font-size:var(--font-size-xs);line-height:1}.c-playground-footer section input[type=text]{font-family:var(--font-family-monospace);font-weight:500}.c-playground-footer section>small{display:inline-block;font-size:var(--font-size-xs);line-height:1.4}.c-playground-footer section .btn-primary{min-width:93px}@media screen and (max-width: 576px){.c-playground-footer{height:auto;border-radius:var(--border-radius);margin-bottom:1rem}.c-playground-footer.app{border-radius:var(--border-radius)}}.c-playground-callout{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);background-color:hsla(var(--hue-p),16%,16%,.25);backdrop-filter:blur(3px);display:flex;align-items:center;padding:1rem;border-radius:calc(1rem + var(--input-radius))}.c-playground-callout .btn svg{min-width:24px}.c-playground-callout .btn-primary{margin-left:1rem;white-space:pre}@media screen and (max-width: 576px){.c-playground-callout{left:0;bottom:0;width:100%;transform:translate(0);padding:.5rem;border-radius:var(--input-radius);flex-wrap:wrap;border-top-left-radius:0;border-top-right-radius:0}.c-playground-callout .btn-switch{width:100%}.c-playground-callout .btn-primary{margin-top:.5rem;margin-left:0}}.c-playground{--height: 540px;--sidebar-width: 240px;position:relative;margin-bottom:4rem;display:grid;grid-template-columns:var(--sidebar-width) var(--sidebar-width) 1fr;height:var(--height);overflow:hidden}.c-playground__sidebar{position:relative;height:100%;background-color:var(--color-bg-2);backdrop-filter:blur(8px);border-top-right-radius:0;border-bottom-right-radius:0}.c-playground__sidebar>header{position:absolute;top:0;left:0;width:100%;height:74px;padding:.5rem;padding-bottom:0}.c-playground__sidebar>header .form-control{margin-bottom:0}.c-playground__sidebar>header article{width:100%;overflow-x:auto;white-space:nowrap;padding:var(--margin-sm) 0}.c-playground__sidebar>header article::-webkit-scrollbar{height:4px}.c-playground__sidebar>header article::-webkit-scrollbar-thumb{background:hsl(var(--hue-p),6%,18%);border-radius:0}.c-playground__sidebar>header article::-webkit-scrollbar-thumb:hover{background:hsl(var(--hue-p),6%,18%)}.c-playground__sidebar>header article::-webkit-scrollbar-track{background:transparent}.c-playground__sidebar>header .form-control{background-color:var(--color-bg-1)}.c-playground__sidebar>header span{display:inline-block;padding:4px 6px;font-size:var(--font-size-xs);font-weight:500;line-height:1;border-radius:var(--border-radius-sm);background-color:var(--color-bg-4);user-select:none;cursor:pointer}.c-playground__sidebar>header span:not(:last-child){margin-right:var(--margin-sm)}.c-playground__sidebar>header span:hover,.c-playground__sidebar>header span:active,.c-playground__sidebar>header span.active{background-color:var(--color-primary)}.c-playground__sidebar>main{position:absolute;bottom:0;left:0;width:100%;height:calc(100% - 74px);padding:.5rem;overflow-y:auto}.c-playground__sidebar>main::-webkit-scrollbar{width:10px}.c-playground__sidebar>main::-webkit-scrollbar-thumb{background:hsl(var(--hue-p),6%,18%);border-radius:0}.c-playground__sidebar>main::-webkit-scrollbar-thumb:hover{background:hsl(var(--hue-p),6%,18%)}.c-playground__sidebar>main::-webkit-scrollbar-track{background:transparent}.c-playground__main{height:var(--height);position:relative;display:flex;justify-content:center;align-items:center;overflow-y:auto;background-color:#ff0004;background-image:url(_data_image/svg_xml,_3Csvg_viewBox=_0_0_1746_1746_xmlns=_http_//www.w3.org/2000/svg_3E_3Cfilter_id=_noiseFilter_3E_3CfeTurbulence_type=_fractalNoise_baseFrequency=_0.8_numOctaves=_2_stitchTiles=_stitch_/_3E_3C/beb46f8167.8)'/%3E%3C/svg%3E"),radial-gradient(circle at 0% 99%,hsl(11,100%,50%) 0%,transparent 67%),radial-gradient(circle at 46% 94%,hsl(177,100%,50%) 0%,transparent 81%),radial-gradient(circle at 89% 8%,hsl(304,100%,9%) 0%,transparent 150%),radial-gradient(circle at 89% 8%,hsl(206,100%,9%) 0%,transparent 150%),radial-gradient(circle at 93% 95%,hsl(236,100%,23%) 0%,transparent 66%),radial-gradient(circle at 89% 8%,hsl(0,100%,99%) 0%,transparent 150%),radial-gradient(circle at 89% 8%,hsl(55,94%,54%) 0%,transparent 150%);background-blend-mode:overlay,normal,normal,normal,normal,normal,normal,normal;box-shadow:inset 16px 0 128px 16px #1414151a,inset 0 0 1025px 4px #1011110d}.c-playground__main::-webkit-scrollbar{width:10px}.c-playground__main::-webkit-scrollbar-thumb{background:hsl(var(--hue-p),6%,22%);border-radius:0}.c-playground__main::-webkit-scrollbar-thumb:hover{background:hsl(var(--hue-p),6%,22%)}.c-playground__main::-webkit-scrollbar-track{background:transparent}.c-playground__main .c-code{max-width:500px;margin-bottom:0;background-color:var(--color-bg-3)}.c-playground__main .c-card{width:400px;margin-bottom:0}.c-playground.app{border-radius:0;height:calc(100vh - 56px);margin-bottom:0}.c-playground.app .c-playground__main{height:100%}@media screen and (max-width: 576px){.c-playground{display:block;height:auto;border-radius:0}.c-playground__sidebar{height:204px;border-radius:var(--border-radius)}.c-playground__main{margin-top:1rem;display:block;padding:3rem 2rem;padding-bottom:calc(146px + 3rem);height:auto;border-radius:var(--border-radius)}.c-playground__main .c-card{width:100%;margin-bottom:0}.c-playground__main .c-code{width:100%;height:auto}.c-playground .c-playground-blurb{display:none}}