.home-playground{padding-block:38px 48px;position:relative;z-index:1}
.home-playground-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.home-playground-heading h2{margin:8px 0;font-size:clamp(28px,3.5vw,42px);color:#302342;text-shadow:none!important}
.home-playground-heading p,.home-playground-caption{color:#665371;line-height:1.6}
.home-playground-heading p{margin:0}.home-playground-heading>a{flex-shrink:0}
.home-playground-stage{position:relative;min-height:650px;border-radius:24px;background:#fcf6ec}
.home-playground-stage iframe{display:block;width:100%;border:0;border-radius:20px;position:relative;background:transparent}
.home-playground-loading{position:absolute;top:120px;left:20px;right:20px;text-align:center;color:#665371}
.home-playground-stage.is-ready .home-playground-loading{display:none}
.home-playground-caption{font-size:13px;margin:20px 0 0}.home-playground-caption a{font-weight:800;white-space:nowrap}
html.embedded-playground{background:transparent}
.embedded-playground body{padding:4px;background:transparent}
.embedded-playground .playground{max-width:none;margin:0}
.embedded-playground .playground-nav,.embedded-playground header,.embedded-playground .size-note,.embedded-playground footer{display:none}
.embedded-playground .desktop{height:520px}
.embedded-playground .toolbar{flex-wrap:wrap;margin-bottom:16px}
.embedded-playground .controls{gap:12px;margin:20px 0}
.embedded-playground .explanation{margin-bottom:0;padding:16px 20px}
@media(max-width:700px){
 .home-playground-heading{align-items:flex-start;flex-direction:column;gap:16px}
 .home-playground{padding-block:28px 36px}
 .embedded-playground .desktop{height:480px}
 .embedded-playground .toolbar{gap:10px}
 .embedded-playground .packs{width:100%}
 .embedded-playground .toolbar button{padding:10px;font-size:12px}
 .embedded-playground .controls{justify-content:flex-start}
 .embedded-playground .explanation{padding:16px;font-size:13px}
}

/* Hero placement trial: the same interactive dock beside the introduction. */
#interactive-dock{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:32px}
.hero-playground{min-width:0;padding:0;align-self:center}
.hero-playground .home-playground-heading{margin-bottom:12px}
.hero-playground .home-playground-heading h2{font-size:25px;margin:0 0 6px}
.hero-playground .home-playground-heading p{font-size:13px}
.hero-playground .home-playground-stage{min-height:0;background:transparent}
.hero-playground .home-playground-caption{margin:12px 0 0;text-align:center;font-size:12px}
.hero-embed .desktop{height:460px}
.hero-embed .sample-window{display:none}
.hero-embed .desktop-note{font-size:13px;max-width:170px;top:48px;right:18px}
.hero-embed .explanation{display:none}
.hero-embed .controls{gap:10px;margin:14px 0 4px;font-size:11px}
.hero-embed .controls button,.hero-embed .controls select{font-size:11px;padding:8px}
.hero-embed .toolbar{gap:8px;margin-bottom:10px;flex-wrap:wrap}
.hero-embed .toolbar button{font-size:11px;padding:9px}
.hero-embed .packs{width:auto;flex:1;flex-wrap:wrap}
@media(max-width:1000px){#interactive-dock{grid-template-columns:1fr}.hero-playground{width:100%;max-width:700px;margin:20px auto 0}}
@media(max-width:520px){.hero-embed .desktop{height:400px}.hero-embed .packs{width:100%;flex-basis:100%}.hero-playground .home-playground-heading{gap:0}.hero-embed .controls{flex-wrap:wrap}}

#interactive-dock .hero-copy h1{font-size:clamp(42px,4vw,58px)!important}
.hero-embed{overflow:hidden}

/* Give the playable hero more room than the original artwork slot. */
#main #interactive-dock{max-width:1440px;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:36px}
.hero-embed .desktop{height:540px}
@media(min-width:1600px){#main #interactive-dock{width:min(1440px,calc(100% - 500px))}}
@media(max-width:1100px){#main #interactive-dock{grid-template-columns:1fr}.hero-playground{max-width:none}}
@media(max-width:520px){.hero-embed .desktop{height:440px}}