.playground-intro{padding-top:clamp(1.5rem,4vw,4.4rem);padding-bottom:var(--space-40)}.playground-intro .page-heading{margin-bottom:var(--space-12)}.playground-intro .lede{max-width:58rem}.playground-grid{gap:var(--space-40);padding-bottom:var(--space-80);grid-template-columns:1fr 1fr;display:grid}.play-card{gap:var(--space-20);color:inherit;flex-direction:column;display:flex}.play-card[data-demo]{cursor:pointer}.play-card .placeholder{--cover-inset:#e8e4de;--cover-inset-width:5px;aspect-ratio:16/9;box-sizing:border-box;width:100%;height:auto;padding:var(--cover-inset-width);transition:transform var(--transition), box-shadow var(--transition);justify-content:stretch;align-items:stretch;display:flex;position:relative;overflow:hidden;background:var(--cover-inset)!important}.play-card .placeholder img,.play-card .placeholder video,.play-card-media{object-fit:cover;background:0 0;border-radius:0;width:100%;height:100%;display:block}.play-card[data-demo]:hover .placeholder{transform:translateY(-4px);box-shadow:0 10px 30px -10px #00000014}.launch-pill{display:none}@media (hover:none),(width<=768px){.launch-pill{z-index:2;-webkit-backdrop-filter:blur(4px);color:var(--color-accent);letter-spacing:.01em;pointer-events:none;white-space:nowrap;background:#fefdfbeb;border:1px solid #0000000f;border-radius:9999px;align-items:center;gap:.25rem;padding:4px 10px;font-size:.75rem;font-weight:600;display:inline-flex;position:absolute;bottom:12px;right:12px;box-shadow:0 2px 8px #0000001f}}.card-title-row{align-items:end;gap:var(--space-12);display:flex}.code-link{color:var(--color-text);transition:color var(--transition);font-size:.875rem;font-weight:600}.play-card-copy{gap:var(--space-8);flex-direction:column;display:flex}.play-card h2{font-size:var(--text-title);font-weight:700}.play-card p{font-size:var(--text-body);font-weight:500;line-height:1.4}.play-card[data-demo]:hover h2{color:var(--color-accent)}.demo-modal{z-index:1000;opacity:0;visibility:hidden;pointer-events:none;justify-content:center;align-items:center;padding:clamp(1rem,3vw,2.5rem);transition:opacity .2s cubic-bezier(.16,1,.3,1),visibility .2s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;inset:0}.demo-modal.is-active{opacity:1;visibility:visible;pointer-events:auto}.demo-modal-backdrop{-webkit-backdrop-filter:blur(8px);will-change:opacity, backdrop-filter;background:#141212a6;position:absolute;inset:0;-webkit-transform:translate(0,0);transform:translate(0,0)}.demo-modal-window{background:var(--color-bg);border-radius:var(--radius-card);border:1px solid #0000001a;flex-direction:column;width:100%;max-width:1100px;height:90vh;max-height:820px;transition:transform .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden;transform:scale(.96)translateY(12px);box-shadow:0 25px 50px -12px #00000059}.demo-modal.is-active .demo-modal-window{transform:scale(1)translateY(0)}.demo-modal-header{background:var(--color-cream);border-bottom:1px solid #00000014;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex}.demo-modal-title h3{font-family:var(--font-display);color:var(--color-accent);margin:0;font-size:1.25rem;font-weight:700}.demo-modal-title p{color:var(--color-text);opacity:.75;margin:0;font-size:.85rem;line-height:1.2}.demo-modal-actions{align-items:center;gap:.5rem;display:flex}.modal-btn{color:var(--color-text);border-radius:var(--radius-btn);background:0 0;border:1px solid #0000001f;align-items:center;padding:6px 12px;font-size:.85rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-text-short{display:none}.modal-btn:hover{color:var(--color-accent);border-color:var(--color-accent);background:#0000000a}.modal-close-btn{cursor:pointer;width:36px;height:36px;color:var(--color-text);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;margin-left:.25rem;transition:background .2s,transform .2s;display:flex}.modal-close-btn:hover{background:#0000000f;transform:scale(1.05)}.demo-modal-body{background:#fff;flex:1;width:100%;position:relative;overflow:hidden}.demo-modal-body iframe{border:none;width:100%;height:100%;display:block}.modal-loader{background:var(--color-bg);color:var(--color-text);z-index:5;flex-direction:column;justify-content:center;align-items:center;gap:1rem;font-size:.9rem;display:flex;position:absolute;inset:0}.spinner{border:3px solid #a1390026;border-top-color:var(--color-accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=800px){.playground-grid{grid-template-columns:1fr}.demo-modal-window{height:94vh}.demo-modal-header{gap:.5rem;padding:.65rem .85rem}.demo-modal-title{flex:1;min-width:0}.demo-modal-title h3{white-space:nowrap;text-overflow:ellipsis;font-size:1.1rem;overflow:hidden}.demo-modal-title p{display:none}.demo-modal-actions{flex-shrink:0;gap:.35rem}.btn-text-full{display:none}.btn-text-short{display:inline}.modal-btn{padding:5px 8px;font-size:.78rem}.modal-close-btn{width:32px;height:32px;margin-left:0}}