.playground-page{--pg-ink:#182236;--pg-muted:#5f6b80;--pg-line:#d6dce6;background:#eef0f4;color:var(--pg-ink);min-height:calc(100svh - var(--site-header-height,72px));display:flex;flex-direction:column}
.playground-intro{padding:30px 2.4% 22px}

.playground-intro h1{font-size:var(--text-display);font-weight:500;line-height:1.08;letter-spacing:var(--track-display);margin:0}.playground-intro h1 em{font-style:normal;color:#3f58e6}

.playground-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:0 2.4% 30px;flex:1;align-content:start}
.playground-tile{min-width:0;background:#fff;border:1px solid var(--pg-line);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;transform-origin:0 0;transition:box-shadow .2s ease,border-color .2s ease,translate .2s ease}
.playground-tile:not(.playground-is-expanded):hover{border-color:#b9c3d6;box-shadow:0 14px 34px #1822361a;translate:0 -2px}
.playground-tile-heading{display:flex;align-items:center;gap:16px;padding:18px 20px 16px;border-bottom:1px solid #e6eaf1;background:#fff}
.playground-tile-name{min-width:0;flex:1}
.playground-tile-heading h2{font-size:20px;font-weight:500;line-height:1.15;letter-spacing:-.02em;margin:0}
.playground-tile-number{font:var(--text-small) var(--font-mono);letter-spacing:.4px;color:#8793a8;font-weight:400}
.playground-tile-caption{font-size:14px;line-height:1.45;color:var(--pg-muted);margin:6px 0 0}
.playground-expanded-brand{display:none;border-right:1px solid #d6dce8;padding-right:18px}
.playground-expanded-brand img{display:block;width:74px;height:auto}
.playground-expand{flex:none;display:flex;align-items:center;gap:9px;border:1px solid #d8deeb;background:#fff;border-radius:999px;color:#2f49d8;padding:9px 15px;font:13px var(--mono);cursor:pointer;touch-action:manipulation}
.playground-expand b{font:var(--text-read)/1 var(--font-sans);font-weight:400}
.playground-expand:hover{background:#2f49d8;border-color:#2f49d8;color:#fff}
.playground-expand:focus-visible{outline:2px solid #3656ed;outline-offset:3px}
/* The app is laid out 1280 pixels wide and scaled to the tile. */
.playground-tile-body{position:relative;aspect-ratio:1280/800;overflow:hidden;background:#f4f5f8}
.playground-app{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0;transform:scale(var(--tile-scale,.3));pointer-events:none;overflow:hidden}
.playground-app>*{height:100%!important;min-height:100%!important;box-sizing:border-box}



.playground-unavailable{padding:24px;font-size:14px;line-height:1.6;color:#7c6681}
/* The open demo takes the whole window, with a persistent way back. */
.playground-tile.playground-is-expanded{position:fixed;inset:0;z-index:1000;border:0;border-radius:0;cursor:auto;box-shadow:none;translate:none}
.playground-tile.playground-is-moving{z-index:1001;will-change:transform}
.playground-is-expanded>.playground-tile-heading{flex:none;padding:10px max(20px,env(safe-area-inset-left));padding-top:max(10px,env(safe-area-inset-top));min-height:56px;box-sizing:border-box}
.playground-is-expanded .playground-expanded-brand{display:block}
.playground-is-expanded .playground-tile-caption{display:none}
.playground-is-expanded .playground-tile-heading h2{font:14px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#3a4660}
.playground-is-expanded .playground-tile-number{font-size:14px;color:#3a4660}
.playground-is-expanded>.playground-tile-body{aspect-ratio:auto;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:transparent}
.playground-is-expanded .playground-app{position:static;width:100%;height:100%;transform:none;pointer-events:auto;overflow:visible}
.playground-is-expanded .playground-app>*{height:auto!important;min-height:100%!important}
/* The builder fills the open window exactly: its prompt stays docked at the bottom and its panes scroll inside. */
.playground-is-expanded .playground-app>.appbuild-page{height:100%!important;min-height:0!important}
.playground-has-expanded #main{transform:none!important;animation:none!important}
.playground-has-expanded .demo-header,.playground-has-expanded .site-experiments-nav{pointer-events:none}
@media(max-width:1000px){.playground-grid{grid-template-columns:1fr;max-width:640px;margin:0 auto;width:100%;box-sizing:border-box}.playground-intro{display:block}}
@media(prefers-reduced-motion:reduce){.playground-tile{transition:none!important}}
.playground-tile-holder{min-width:0;border-radius:16px}