.playground-page{background:var(--base-100);min-height:100vh;padding-top:120px;position:relative;overflow:hidden}.playground-header{text-align:center;margin-bottom:4rem}.playground-header h1{text-transform:uppercase;color:var(--base-500);margin-bottom:1rem;font-family:Big Shoulders Display;font-size:5rem;font-weight:900;line-height:1}.playground-header p{color:var(--base-400);opacity:.7;max-width:600px;margin:0 auto;font-family:PP Neue Montreal;font-size:1.1rem}.playground-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:2rem;padding-bottom:4rem;display:grid}.playground-overlay{pointer-events:auto;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0006;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.playground-overlay-inner{text-align:center;background:#e3e3dbe6;border-radius:1rem;max-width:540px;padding:2rem;box-shadow:0 28px 80px #00000059}.playground-overlay-inner p.sm{margin-bottom:.75rem}.playground-overlay-inner h2{margin-bottom:1.25rem}@media (max-width:768px){.playground-header h1{font-size:3.5rem}.playground-grid{grid-template-columns:1fr}.playground-overlay-inner{margin:0 1.5rem;padding:2rem 1.75rem}}
.playground-item{background:#f2f2f2;border:none;border-radius:.5em;flex-direction:column;height:370px;padding:.5em;transition:transform .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008}.playground-item:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.playground-item-preview{background:#e5e5e5;border-bottom:1px solid #00000008;border-radius:.5em;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.playground-item-preview iframe.playground-item-iframe{border:none;width:100%;height:100%;display:block}.playground-item-info{background:#f2f2f2;flex-direction:column;justify-content:center;padding:1rem 0 0;display:flex}.playground-item:hover .playground-item-info{background:#f2f2f2}.playground-item-info h3{color:#1a1a1a;letter-spacing:-.01em;margin:0 0 .25rem;font-family:PP Neue Montreal,sans-serif;font-size:.95rem;font-weight:500}.playground-item-description{color:#666;margin:0 0 .25rem;font-family:PP Neue Montreal,sans-serif;font-size:.8rem;line-height:1.5}.playground-item-tag{color:#666;text-transform:none;font-family:PP Neue Montreal,sans-serif;font-size:.75rem;font-weight:400}.playground-item-tags{flex-wrap:wrap;gap:.35rem;margin-top:.15rem;display:flex}.playground-item-tag.pill{letter-spacing:.02em;color:var(--base-400,#1a1a1a);white-space:nowrap;background:#ff6e1414;border:1px solid #ff6e142e;border-radius:100px;padding:.22rem .6rem;font-size:.68rem;font-weight:500;transition:background .2s,border-color .2s,color .2s;display:inline-block}.playground-item-link:hover .playground-item-tag.pill{color:var(--base-400,#1a1a1a);background:#ff6e141f;border-color:#ff6e1447}.playground-item-link{color:inherit;text-decoration:none;display:block}.playground-item.span-2{grid-column:span 2}@media (max-width:768px){.playground-item.span-2{grid-column:span 1}}