.playground{max-width:1400px;margin:auto;padding:0 32px 100px}.pg-intro{min-height:447px;padding:175px 114px 90px;display:flex;align-items:center;gap:70px}.pg-intro h1{font-size:40px;line-height:1.3;letter-spacing:-.04em;max-width:680px}.pg-toolkit{width:352px;height:auto;flex-shrink:0;max-width:32%}.pg-gallery{display:grid;gap:40px}.pg-row{display:grid;gap:32px;grid-template-columns:424fr 880fr;align-items:start}.pg-row-2{grid-template-columns:473fr 326fr 473fr}.pg-row-3,.pg-row-6{grid-template-columns:1fr 1fr}.pg-row-4,.pg-row-8,.pg-row-11{grid-template-columns:repeat(3,minmax(0,1fr))}.pg-row-7{grid-template-columns:1fr}.pg-row-10{grid-template-columns:880fr 424fr}.pg-item{margin:0;min-width:0}.pg-media{position:relative;overflow:hidden;border-radius:40px;background:#dcd8d1;isolation:isolate}.pg-media>img,.pg-media>.pg-art{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.pg-item figcaption{font-size:16px;line-height:1.5;margin-top:12px;color:#666}.pg-stack{display:grid;gap:24px}.pg-stack figcaption{font-size:14px;margin-top:8px}.pg-media video{position:absolute;display:block;object-fit:cover}.pg-big-ideas{left:-1.903%;top:0;width:187.315%;height:100%}.pg-health{left:9%;top:8%;width:82%;height:84%;border-radius:10px}.pg-story-video{left:5.52%;top:40.73%;width:57.64%;height:52.9%;border-radius:16px}.pg-media>.pg-art:last-child{pointer-events:none}.pg-hand,.pg-badge,.pg-phone{opacity:0;transform-box:fill-box;transform-origin:center}.is-visible .pg-hand{animation:pg-hand-in 1.1s cubic-bezier(.2,.8,.25,1) both}.is-visible .pg-badge{animation:pg-badge-in .9s cubic-bezier(.2,.8,.2,1.2) both}.is-visible .badge-two{animation-delay:.18s}.is-visible .badge-three{animation-delay:.32s}.is-visible .badge-four{animation-delay:.45s}.is-visible .pg-phone{animation:pg-phone-in 1.2s cubic-bezier(.2,.75,.2,1) both}.pg-woman{transform-box:fill-box;transform-origin:50% 80%}.is-visible .pg-woman{animation:pg-breathe 7s ease-in-out infinite alternate}@keyframes pg-hand-in{from{opacity:0;transform:translateY(130px) rotate(7deg)}to{opacity:1;transform:none}}@keyframes pg-badge-in{from{opacity:0;scale:.65;translate:0 25px}to{opacity:1;scale:1;translate:0 0}}@keyframes pg-phone-in{from{opacity:0;translate:0 -35px}to{opacity:1;translate:0 0}}@keyframes pg-breathe{from{transform:rotate(-.35deg) translateY(1px)}to{transform:rotate(.45deg) translateY(-3px)}}
.voice-demo{height:100%;display:grid;place-items:center;container-type:inline-size}.voice-card{background:white;border-radius:16px;width:52%;padding:28px;color:#182337;box-shadow:0 3px 10px #00000005;font-family:Arial,sans-serif;font-size:clamp(11px,1.5cqw,16px);line-height:1.45}.voice-heading{display:flex;align-items:center;gap:8px;border-bottom:1px solid #edf0f5;padding-bottom:16px;margin-bottom:20px}.voice-heading strong{font-size:1.14em}.voice-heading span{color:#8993a2;font-size:.8em}.voice-card h2{font-size:1em;font-weight:600;margin-bottom:10px}.voice-card p{font-size:1em;margin:0 0 22px}.voice-card button{border:0;cursor:pointer;font-size:1em;border-radius:8px;padding:12px 16px;background:#f1f4f9;color:#273148}.voice-card button:hover{filter:brightness(.96)}.voice-card .record-btn{display:flex;align-items:center;gap:14px;width:100%;background:#f2f4f8;color:#737e8e;text-align:left}.mic-icon{background:#007dff;color:white;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:22px;flex-shrink:0}.recording .mic-icon{background:#f05263}.recording .mic-icon:before{content:'';height:12px;width:12px;background:white;border-radius:2px}.voice-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}.voice-card .send-btn{background:#087cff;color:white}.voice-wave{display:flex;align-items:center;gap:3px;height:36px;flex:1}.voice-wave i{height:var(--h);width:3px;background:#91a8ca;border-radius:5px}.recording .voice-wave i{animation:voice-wave .6s ease-in-out infinite alternate;animation-delay:var(--d)}@keyframes voice-wave{to{scale:1 .4}}.voice-time{font-variant-numeric:tabular-nums;color:#5e697a}.voice-review{display:flex;gap:14px;align-items:center}.voice-status{padding:22px 0;text-align:center;color:#6c7889}.voice-feedback{border-top:1px solid #eef0f5;padding-top:14px}.voice-feedback strong{display:block;font-size:.95em}.voice-feedback small{color:#9aa3b0}.voice-feedback p{margin:12px 0 0}.approved{color:#298557;background:#edf9f0;display:inline-block;padding:5px 8px;border-radius:6px;margin-top:14px;font-size:.85em}.voice-reset{margin-top:14px;font-size:.8em!important;padding:8px 12px!important}
@media(max-width:1100px){.pg-intro{padding:160px 5% 75px;min-height:380px;gap:35px}.pg-intro h1{font-size:34px}.pg-row{gap:20px}.pg-media{border-radius:28px}.pg-stack{gap:18px}.voice-card{padding:20px;width:62%}.pg-item figcaption{font-size:14px}}
@media(max-width:650px){.site-header{max-width:calc(100% - 16px);top:18px}.site-header a{font-size:13px;padding:10px 9px}.site-header nav{padding:4px}.site-header [data-work]:before{margin-right:4px}.playground{padding:0 18px 60px}.pg-intro{padding:125px 0 55px;min-height:0;display:block}.pg-intro h1{font-size:32px;max-width:500px}.pg-toolkit{max-width:100%;width:260px;margin-top:28px}.pg-gallery{gap:24px}.pg-row{grid-template-columns:1fr;gap:24px}.pg-stack{grid-template-columns:1fr 1fr;gap:14px}.pg-media{border-radius:24px}.pg-item figcaption{font-size:14px;margin-top:8px}.pg-stack figcaption{font-size:12px}.voice-card{width:70%;padding:18px;font-size:11px}.pg-row-10 .pg-item:first-child .pg-media{aspect-ratio:1/1.12!important}.voice-heading{margin-bottom:12px;padding-bottom:12px}.voice-card p{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.pg-hand,.pg-badge,.pg-phone{opacity:1;transform:none}.is-visible .pg-hand,.is-visible .pg-badge,.is-visible .pg-phone,.is-visible .pg-woman,.recording .voice-wave i{animation:none!important}}
.pg-intro{align-items:flex-end;gap:45px}.pg-intro h1{font-size:52px;font-weight:500;letter-spacing:-.03em}.pg-health{left:9.509%;top:7.128%;width:80.828%;height:92.872%;border-radius:25px 25px 0 0;object-fit:cover;object-position:top}.pg-row-10 .pg-media{overflow:hidden}.voice-card{max-height:94%;overflow:auto}.pg-toolkit{object-fit:contain}
@media(max-width:1100px){.pg-intro h1{font-size:40px}}
@media(max-width:650px){.pg-intro h1{font-size:32px}.pg-toolkit{margin-top:30px}.voice-card{width:80%}}
.pg-row-10 .pg-item:first-child .pg-media{background:#b7b7ff}.voice-card{padding:18px;border-radius:25px;font-size:clamp(9px,1.22cqw,13px);min-height:74.7%;width:51.82%;display:flex;flex-direction:column}.voice-heading{padding:0;border:0;margin-bottom:9px;gap:8px}.voice-heading strong{font-size:.85em;background:#b7b7ff;border-radius:20px;padding:6px 8px}.voice-heading strong:before{content:'🎙 ';font-size:1.3em}.voice-heading span{font-size:.8em}.voice-card h2{margin-bottom:6px}.voice-card p{margin-bottom:18px;line-height:1.35}.voice-card #voice-state{border-top:1px solid #eee;padding-top:17px;flex:1;display:flex;flex-direction:column}.voice-recorder{position:relative;background:#f0f0f3;border-radius:13px;min-height:220px;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column}.voice-recorder:after{content:'⚙';position:absolute;bottom:8px;right:9px;color:#a7aab6;font-size:19px}.voice-card .record-btn{width:auto;border-radius:40px;padding:5px 13px 5px 5px;gap:8px;background:#000;color:#fff;font-size:.8em}.mic-icon{background:white;color:black;width:36px;height:36px}.mic-icon svg{width:20px;height:20px}.voice-card .recording.record-btn{background:white;color:black;padding-right:24px;box-shadow:0 2px 10px #0001;gap:18px}.recording .mic-icon{background:#ff004c}.voice-time{color:inherit}.voice-review{background:white;border-radius:30px;padding:6px 18px 6px 6px;gap:12px;box-shadow:0 2px 10px #0001}.voice-review button{border-radius:50%;width:30px;height:30px;padding:0;background:#000;color:white}.voice-actions{position:absolute;bottom:22px;left:0;right:0;justify-content:center;gap:5px}.voice-actions button{padding:9px 14px;font-size:.8em;font-weight:600;background:#d8d8df}.voice-actions .send-btn{background:#00d3ed;color:black}.voice-feedback{background:#f0f0f3;padding:12px;border:0;border-radius:13px;margin-bottom:5px}.voice-feedback.teacher{background:#e1fae7}.voice-feedback small{display:block;font-size:.8em;margin:3px 0}.voice-feedback p{font-size:.9em;margin:7px 0}.approved{background:#00eb73;color:#000;font-size:.8em;margin:3px 0;padding:4px 7px}.voice-feedback .voice-review{padding:4px 7px;border-radius:9px;box-shadow:none;margin-top:6px}.voice-feedback .voice-review:after{content:'';height:4px;background:#e3e1ee;flex:1;border-radius:10px}.voice-reset{align-self:flex-end;margin-top:4px;padding:5px 8px!important}.voice-status{margin:auto}.voice-card .voice-playing{animation:voice-wave .7s ease-in-out infinite alternate}
@media(max-width:1100px){.voice-recorder{min-height:170px}.voice-card{width:58%;padding:14px}.voice-heading strong{padding:5px 7px}.mic-icon{width:28px;height:28px}}
@media(max-width:650px){.voice-card{width:85%;font-size:11px;min-height:85%;padding:14px}.voice-recorder{min-height:175px}}
.pg-media video{opacity:0}.pg-media video.ready{opacity:1}.pg-media>img.pg-story-poster{inset:auto;left:5.52%;top:40.73%;width:57.64%;height:52.9%;border-radius:16px}.voice-demo[data-state="feedback"] .voice-card{min-height:0}
@media(max-width:650px){.pg-row-10 .pg-item:first-child .pg-media{aspect-ratio:0.6!important}.voice-card{min-height:75%;max-height:95%}}
@media(min-width:1101px){.pg-intro{position:relative;display:block;padding-top:175px;padding-bottom:86px;min-height:447px}.pg-intro h1{width:700px;max-width:72%;font-size:clamp(40px,3.714vw,52px);line-height:1.3077}.pg-toolkit{position:absolute;right:114px;bottom:86px;width:352px;max-width:27%}}

/* The voice sequence is animated artwork, matching the original control shapes. */
.voice-card .voice-actions>span{display:inline-block;border-radius:8px;padding:9px 14px;font-size:.8em;font-weight:600;background:#d8d8df}.voice-card .voice-actions>.send-btn{background:#00d3ed;color:#000}.voice-card span.record-btn{display:flex;align-items:center;border-radius:40px;padding:5px 13px 5px 5px;gap:8px;background:#000;color:white;font-size:.8em}.voice-card span.record-btn.recording{background:white;color:black;padding-right:24px;gap:18px}.voice-review>span:first-child{border-radius:50%;width:30px;height:30px;display:grid;place-items:center;background:#000;color:white}.pg-media:not(.is-visible) *{animation-play-state:paused!important}

/* Let the separate Greetsy panels sit directly on the page. */
.pg-row-5>.pg-item:last-child>.pg-media{background:transparent;border-radius:0}
.pg-cta{max-width:1100px;margin-left:auto;margin-right:auto}
.pg-cta footer{margin-bottom:50px}
@media(max-width:650px){.pg-cta footer{font-size:36px}.pg-cta .contact-links{gap:22px}}

/* Paired tiles share the height established by their adjacent artwork. */
@media(min-width:651px){.pg-row{align-items:stretch}.pg-stack{min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))}.pg-stack .pg-item{min-height:0}.pg-stack .pg-media{height:100%;aspect-ratio:auto!important}}
.pg-woman{transform-origin:40% 85%}.is-visible .pg-woman{animation:pg-woman-drift 5s ease-in-out infinite alternate}
@keyframes pg-woman-drift{from{transform:translate(-2px,3px) rotate(-.6deg) scale(1.01)}to{transform:translate(3px,-5px) rotate(.7deg) scale(1.025)}}
.voice-card .recording.record-btn{max-width:92%;padding-right:12px;gap:10px}.voice-wave{flex:none;gap:2px}.voice-wave i{width:2px;background:#8b7ee2}.voice-person{display:flex;align-items:center;gap:7px;margin-bottom:5px}.voice-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}.voice-person small{margin:0}.voice-feedback{position:relative}.voice-feedback.teacher{animation:voice-message-in .5s ease-out both}.voice-typing{display:flex;align-items:center;gap:8px;padding:12px 3px;color:#6c7889}.typing-dots{display:flex;gap:3px}.typing-dots i{width:4px;height:4px;border-radius:50%;background:#8d91a0;animation:typing-bounce .9s ease-in-out infinite}.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}@keyframes typing-bounce{50%{transform:translateY(-3px);opacity:.4}}@keyframes voice-message-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.is-visible .pg-woman,.voice-typing i,.voice-feedback.teacher{animation:none!important}}

/* Keep the supplied portrait still pending its replacement. */
.pg-woman,.is-visible .pg-woman{animation:none!important;transform:none!important}
.voice-control{display:flex;align-items:center;gap:10px;width:165px;height:46px;border-radius:30px;padding:5px 12px 5px 5px;background:#000;color:#fff;box-sizing:border-box;box-shadow:0 2px 10px #0001;transition:width .45s cubic-bezier(.2,.8,.2,1),background .4s,color .4s,transform .22s;transform-origin:center}
.control-icon{position:relative;display:grid;place-items:center;width:36px;height:36px;flex:none;background:#fff;color:#000;border-radius:50%;transition:background .35s,color .35s,transform .2s}
.control-icon>span{position:absolute;display:grid;place-items:center;transition:opacity .25s,transform .35s}.control-mic svg{width:20px;height:20px}.control-stop{width:12px;height:12px;background:white;border-radius:2px}.control-stop,.control-play{opacity:0;transform:scale(.5)}
.voice-control .voice-wave{width:0;overflow:hidden;opacity:0;transition:width .45s,opacity .3s;gap:2px}.voice-control .voice-wave i{background:#000;flex-shrink:0}.voice-control .voice-time{display:none}.control-label{white-space:nowrap;font-size:.85em;transition:opacity .2s}
[data-state="recording"] .voice-control,[data-state="press-stop"] .voice-control{width:230px;background:white;color:#000}
[data-state="recording"] .control-icon,[data-state="press-stop"] .control-icon{background:#ff004c}
[data-state="recording"] .control-mic,[data-state="press-stop"] .control-mic{opacity:0;transform:scale(.5)}
[data-state="recording"] .control-stop,[data-state="press-stop"] .control-stop{opacity:1;transform:scale(1)}
[data-state="recording"] .voice-wave,[data-state="press-stop"] .voice-wave{width:78px;opacity:1}
[data-state="recording"] .voice-wave i{animation:voice-wave .6s ease-in-out infinite alternate;animation-delay:var(--d)}
[data-state="recording"] .control-label,[data-state="press-stop"] .control-label{display:none}
[data-state="recording"] .voice-time,[data-state="press-stop"] .voice-time,[data-state="review"] .voice-time,[data-state="press-send"] .voice-time,[data-state="sending"] .voice-time{display:block}
[data-state="review"] .voice-control,[data-state="press-send"] .voice-control,[data-state="sending"] .voice-control{width:145px;background:white;color:black}
[data-state="review"] .control-icon,[data-state="press-send"] .control-icon,[data-state="sending"] .control-icon{background:black;color:white}
[data-state="review"] .control-mic,[data-state="press-send"] .control-mic,[data-state="sending"] .control-mic{opacity:0;transform:scale(.5)}
[data-state="review"] .control-play,[data-state="press-send"] .control-play,[data-state="sending"] .control-play{opacity:1;transform:scale(1)}
[data-state="press-record"] .voice-control,[data-state="press-stop"] .voice-control{transform:scale(.9)}
.voice-recorder .voice-actions{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
[data-state="review"] .voice-actions,[data-state="press-send"] .voice-actions,[data-state="sending"] .voice-actions{opacity:1;transform:none}
.voice-actions .send-btn{transition:transform .2s}
[data-state="press-send"] .send-btn{transform:scale(.88)}
.voice-recorder{transition:opacity .4s,transform .4s}
[data-state="sending"] .voice-recorder{opacity:0;transform:translateY(-8px) scale(.98)}
.voice-feedback.student,.voice-feedback.teacher{animation:voice-response-bounce .7s both}
@keyframes voice-response-bounce{0%{opacity:0;transform:translateY(28px) scale(.97)}65%{opacity:1;transform:translateY(-5px) scale(1.005)}85%{transform:translateY(2px) scale(1)}100%{opacity:1;transform:none}}
.voice-feedback.teacher .approved{transform-origin:left center;animation:approval-focus 1.1s .55s both}
@keyframes approval-focus{0%{transform:scale(.9);box-shadow:0 0 0 0 #00eb7366}45%{transform:scale(1.09);box-shadow:0 0 0 7px #00eb7325}100%{transform:scale(1);box-shadow:0 0 0 12px #00eb7300}}
@media(prefers-reduced-motion:reduce){.voice-control,.voice-control *,.voice-feedback.student,.voice-feedback.teacher .approved{animation:none!important;transition:none!important}}