.playground {
  padding: clamp(78px,9vw,140px) var(--gutter,5vw);
  background: #ffe8e2;
  color: #672236;
  overflow: hidden;
}
.playground .playground-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; max-width:1440px; margin:0 auto 46px; }
.playground .playground-heading .eyebrow { display:block; margin-bottom:22px; color:#a15365; font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.14em; }
.playground .playground-heading h2 { font-family:'Gummy Display',ui-rounded,'Arial Rounded MT Bold',sans-serif; font-size:clamp(40px,5.4vw,80px); line-height:1.03; font-weight:600; letter-spacing:-.04em; }
.playground .playground-heading > p { max-width:300px; color:#a05c68; font-size:clamp(13px,1.2vw,16px); line-height:1.7; padding-bottom:5px; }
.playground .jelly-lab { position:relative; max-width:1440px; margin:auto; border-radius:36px; overflow:hidden; color:#713448; background:#fff1e8; border:1px solid #fff9; box-shadow:inset 0 2px 2px #fffc,0 20px 70px -50px #b94c6980; isolation:isolate; }
.playground .jelly-lab::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 28% 5%,#fff 0%,#fff0 50%),radial-gradient(ellipse at 90% 105%,#f7bfae66 0%,#fff0 65%); pointer-events:none; }
.playground .lab-caption { position:absolute; inset:28px 32px auto; z-index:2; display:flex; justify-content:space-between; gap:14px; color:#a86772; font-size:9px; font-weight:650; letter-spacing:.13em; pointer-events:none; }
.playground .jelly-stage { position:relative; width:100%; height:clamp(360px,43vw,560px); overflow:hidden; contain:layout paint; }
.playground .jelly-stage::before { content:'a very good idea.\A a very soft landing.'; position:absolute; left:50%; top:39%; transform:translate(-50%,-50%); width:90%; text-align:center; color:#b56b6c21; font-family:'Gummy Display',ui-rounded,'Arial Rounded MT Bold',sans-serif; font-size:clamp(35px,5.2vw,76px); font-weight:550; letter-spacing:-.045em; line-height:1.08; white-space:pre-line; pointer-events:none; }
.playground .jelly { position:absolute; inset:0 auto auto 0; width:var(--jelly-size,150px); height:var(--jelly-size,150px); padding:0; border:0; border-radius:30%; background:none; box-shadow:none; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; transform-origin:center 65%; will-change:transform; -webkit-tap-highlight-color:transparent; filter:drop-shadow(1px 14px 7px #89233a22) drop-shadow(0 4px 2px #69212612); }
.playground .jelly-shape { display:block; width:100%; height:100%; overflow:visible; pointer-events:none; }
.playground .jelly::before,.playground .jelly::after { content:none; }
.playground .jelly.is-held { cursor:grabbing; z-index:3; filter:drop-shadow(3px 25px 14px #89233a28) drop-shadow(0 4px 2px #6921260d); }
.playground .jelly:focus-visible { outline:3px solid #8d2451; outline-offset:5px; z-index:3; }
.playground .lab-toolbar { position:relative; z-index:4; display:flex; align-items:center; gap:8px; min-height:80px; padding:16px 26px; border-top:1px solid #bb64721b; background:#ffffff4d; }
.playground .lab-toolbar button { padding:13px 19px; border:1px solid #df9eaa48; border-radius:999px; color:#8b3f53; background:#fff9f1; font-size:12px; line-height:1.2; font-weight:550; transition:background .2s,transform .2s; box-shadow:inset 0 2px 1px #fffc; }
.playground .lab-toolbar button:first-child { color:#fff8f4; background:linear-gradient(#be446d,#a22b54); border-color:#8d224a30; box-shadow:inset 0 1px 2px #f6a0ba,0 3px 0 #7f204418; }
.playground .lab-toolbar button:hover { background:#fff; transform:translateY(-1px); }
.playground .lab-toolbar button:first-child:hover { background:linear-gradient(#ce527b,#ad315b); }
.playground .lab-toolbar button:focus-visible { outline:3px solid #8d2451; outline-offset:3px; }
.playground #jellyStatus { margin-left:auto; color:#a26a76; font-size:10px; line-height:1.5; text-align:right; }
.playground .jelly-hint { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.playground .playground-disclosure { max-width:1440px; margin:20px auto 0; color:#ae7883; font-size:11px; line-height:1.6; }
@media(max-width:700px) {
 .playground .playground-heading { align-items:flex-start; flex-direction:column; gap:24px; margin-bottom:30px; }
 .playground .lab-caption { inset:22px 18px auto; font-size:7px; letter-spacing:.075em; }
 .playground .lab-toolbar { flex-wrap:wrap; padding:14px; gap:6px; }
 .playground .lab-toolbar button { padding:11px 12px; font-size:10px; }
 .playground #jellyStatus { flex-basis:100%; text-align:left; min-height:14px; margin:4px 0 0 3px; }
 .playground .jelly-lab { border-radius:24px; }
 .playground .jelly-stage { height:380px; }
}
@media(prefers-reduced-motion:reduce) { .playground .jelly { will-change:auto; } .playground .lab-toolbar button { transition:none; } }