.playground-hero{text-align:center;min-height:50vh;padding:var(--space-2xl) var(--space-lg);justify-content:center;align-items:center;display:flex;position:relative}.playground-hero-content{max-width:700px}.playground-hero h1{margin-bottom:var(--space-md);font-size:clamp(2.5rem,6vw,4.5rem)}.playground-hero-desc{color:var(--text-secondary);max-width:580px;margin:0 auto;font-size:1.1rem;line-height:1.7}.playground-mobile-fallback{display:none}@media (max-width:768px){.playground-mobile-fallback{padding:var(--space-2xl) var(--space-lg);justify-content:center;align-items:center;display:flex}.mobile-fallback-inner{text-align:center;max-width:400px;padding:var(--space-xl);background:var(--bg-card);border:1px solid var(--border-subtle);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}.mobile-fallback-icon{margin-bottom:var(--space-md);font-size:3rem;display:block}.mobile-fallback-inner h2{margin-bottom:var(--space-sm);font-size:1.4rem}.mobile-fallback-inner p{color:var(--text-secondary);font-size:.95rem;line-height:1.6}.playground-hero{min-height:40vh;padding:var(--space-xl) var(--space-md)}.playground-hero h1{font-size:2rem}}
.playground-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:1200px;margin:0 auto;display:grid}.playground-card{background:var(--bg-card);border:1px solid var(--border-subtle);padding:var(--space-xl) var(--space-lg);text-align:left;cursor:pointer;transition:all var(--transition-base);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));font-family:var(--font-primary);color:var(--text-primary);gap:var(--space-sm);flex-direction:column;display:flex;position:relative}.playground-card:before{content:"";clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));background:linear-gradient(135deg, var(--border-glow), transparent 50%);-webkit-mask-composite:xor;pointer-events:none;opacity:0;transition:opacity var(--transition-base);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.playground-card:hover{background:var(--bg-card-hover);border-color:var(--border-glow);transform:translateY(-6px)}.playground-card:hover:before{opacity:1}.playground-card-cyan:hover{box-shadow:0 8px 40px #00f0ff26}.playground-card-pink:hover{box-shadow:0 8px 40px #ff003c26}.playground-card-yellow:hover{box-shadow:0 8px 40px #fcee0a1f}.playground-card-icon{margin-bottom:var(--space-xs);font-size:2.5rem;display:block}.playground-card-title{font-size:1.25rem;font-weight:700}.playground-card-feature{letter-spacing:.1em;text-transform:uppercase;font-size:.7rem}.playground-card-desc{color:var(--text-secondary);flex:1;font-size:.9rem;line-height:1.5}.playground-card-cta{color:var(--cyan);letter-spacing:.08em;text-transform:uppercase;margin-top:var(--space-sm);transition:color var(--transition-fast);font-size:.75rem}.playground-card:hover .playground-card-cta{text-shadow:var(--glow-cyan)}.playground-modal-overlay{z-index:10000;-webkit-backdrop-filter:blur(8px);padding:var(--space-lg);background:#000000d9;justify-content:center;align-items:center;animation:.25s ease-out modal-fade-in;display:flex;position:fixed;inset:0}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}.playground-modal{background:var(--bg-secondary);border:1px solid var(--border-glow);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));flex-direction:column;width:100%;max-width:900px;max-height:85vh;animation:.3s ease-out modal-slide-up;display:flex;overflow:hidden}@keyframes modal-slide-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.playground-modal-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border-subtle);background:#00f0ff08;justify-content:space-between;align-items:center;display:flex}.playground-modal-header h3{color:var(--cyan);text-shadow:var(--glow-cyan);letter-spacing:.08em;text-transform:uppercase;font-size:1rem}.playground-modal-close{border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;width:36px;height:36px;transition:all var(--transition-fast);font-size:1.1rem;font-family:var(--font-primary);background:0 0;justify-content:center;align-items:center;display:flex}.playground-modal-close:hover{color:var(--pink);border-color:var(--pink);text-shadow:var(--glow-pink)}.playground-modal-body{padding:var(--space-xl);flex:1;justify-content:center;align-items:center;min-height:400px;display:flex;overflow-y:auto}.playground-coming-soon{text-align:center;padding:var(--space-xl)}.coming-soon-icon{margin-bottom:var(--space-lg);font-size:4rem;display:block}.playground-coming-soon .font-mono{margin-bottom:var(--space-sm);font-size:1.1rem}.coming-soon-sub{color:var(--text-muted);font-size:.9rem}@media (max-width:768px){.playground-section{display:none}}