/* PDF artwork in the About page frame with the shared About footer. */
body.playground-page{--paper:#e5e5e5;--ink:#1e272e;--play-inset:max(36px,calc((100vw - 1632px)/2));background:var(--ink)!important}
body.playground-page .play-layout{margin:0 16px 20px!important;width:calc(100% - 32px)!important;border:0!important;border-radius:20px;background:#e4e4e4;overflow:hidden}
body.playground-page #about-main>.play-opening{padding:70px 0 100px!important;text-align:center}
body.playground-page .play-opening h1{font-size:clamp(80px,12.5vw,180px);font-weight:500;line-height:1.05;letter-spacing:-.055em;margin:0}
body.playground-page .play-intro{max-width:740px;margin:55px auto 0;font-size:24px;line-height:1.23;font-weight:400}
body.playground-page .play-gallery{display:flex;flex-direction:column;gap:20px;margin:170px var(--play-inset) 0;text-align:left}
body.playground-page .play-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
body.playground-page .play-art{display:block;position:relative;min-width:0;min-height:0;margin:0;aspect-ratio:434/687;overflow:hidden;background:#d0d4d7;opacity:1!important;transform:none!important}
body.playground-page .play-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:1!important;clip-path:none;transition:transform .8s cubic-bezier(.22,1,.36,1)}
body.playground-page .play-art:hover img{transform:scale(1.035)}
body.playground-page .play-art{border-radius:var(--site-container-radius,20px)}
body.playground-page .play-more{margin:70px 0 0;font-size:36px;line-height:1.2;font-weight:500}
@media(max-width:1100px){
 body.playground-page #about-main>.play-opening{padding-inline:0!important}
 body.playground-page .play-opening h1{font-size:clamp(72px,12.5vw,138px)}
 body.playground-page .play-intro{font-size:clamp(17px,2vw,23px)}
 body.playground-page .play-gallery{gap:14px;margin:110px 28px 0}
 body.playground-page .play-row{gap:14px}
}
@media(max-width:700px){
 body.playground-page .play-layout{margin:0 4px 10px!important;width:calc(100% - 8px)!important;border-radius:12px}
 body.playground-page #about-main>.play-opening{padding:58px 16px 65px!important}
 body.playground-page .play-opening h1{font-size:clamp(48px,12vw,84px)}
 body.playground-page .play-intro{margin-top:28px;font-size:16px;line-height:1.4}
 body.playground-page .play-desktop-break{display:none}
 body.playground-page .play-gallery{gap:12px;margin:70px 0 0}
 body.playground-page .play-row{grid-template-columns:1fr;gap:12px}
 body.playground-page .play-more{margin-top:50px;font-size:24px}
}
@media(max-width:480px){body.playground-page .play-row{grid-template-columns:1fr;gap:12px}}
@media(prefers-reduced-motion:reduce){body.playground-page .play-art img{transition:none}}

/* The About hero has a fixed height: galleries must grow to contain all rows. */
html body.playground-page #about-main > .play-opening {
 height:auto!important;min-height:0;max-height:none;overflow:visible;
 padding-bottom:0!important;
 border-bottom:0!important;
}
html body.playground-page .play-separator{
 margin:125px var(--play-inset) 0;
 border-top:1px solid #9aa1a6;
}
html body.playground-page .play-layout {background:#e5e5e5;}
/* Keep all nine pieces visible in the PDF's three rows, with no hover crop. */
html body.playground-page .play-art img {transition:none;}
html body.playground-page .play-art:hover img {transform:none;}
@media(max-width:700px){
 html body.playground-page #about-main > .play-opening{padding-bottom:0!important}
 html body.playground-page .play-separator{margin-inline:0}
}

/* Text is prepared behind the page curtain before its About-style reveal. */
body.playground-page [data-baseline]:not([data-text-prepared]){opacity:0}
@media(prefers-reduced-motion:reduce){body.playground-page [data-baseline]{opacity:1!important}}

/* The PDF's watercolor panel follows the original concept-art gallery. */
html body.playground-page .play-watercolor{
 position:relative;background:var(--ink);padding:20px 0;margin-top:20px;
}
html body.playground-page .play-watercolor::before{
 content:'';position:absolute;inset:-20px 0 auto;height:20px;pointer-events:none;
 background:radial-gradient(circle at 20px 0,transparent 20px,var(--ink) 20.5px) left top/20px 20px no-repeat,
 radial-gradient(circle at 0 0,transparent 20px,var(--ink) 20.5px) right top/20px 20px no-repeat;
}
/* Round the existing light footer panel where it resumes below the dark gap. */
html body.playground-page .play-watercolor::after{
 content:'';position:absolute;z-index:1;inset:auto 0 -20px;height:20px;pointer-events:none;
 background:radial-gradient(circle at 20px 20px,transparent 20px,var(--ink) 20.5px) left top/20px 20px no-repeat,
 radial-gradient(circle at 0 20px,transparent 20px,var(--ink) 20.5px) right top/20px 20px no-repeat;
}
html body.playground-page .play-watercolor-panel{
 background:var(--paper);border-radius:var(--site-container-radius,20px);
 padding:100px var(--play-inset) 125px;
}
html body.playground-page .play-watercolor h2{
 margin:0;font-size:clamp(28px,3.333333vw,48px);line-height:1.2;font-weight:500;
}
html body.playground-page .play-watercolor-gallery{
 display:flex;flex-direction:column;gap:20px;margin:100px 0 0;text-align:left;
}
html body.playground-page .play-watercolor .play-art{border-radius:var(--site-container-radius,20px)}
html body.playground-page .play-watercolor .play-more{margin-top:140px}
html body.playground-page .about-connect{padding-top:64px!important}
@media(max-width:1100px){
 html body.playground-page .play-watercolor-panel{padding-inline:28px}
 html body.playground-page .play-watercolor-gallery{gap:14px}
}
@media(max-width:700px){
 html body.playground-page .play-watercolor{margin-inline:-16px}
 html body.playground-page .play-watercolor-panel{padding:58px 16px 65px}
 html body.playground-page .play-watercolor h2{font-size:24px}
 html body.playground-page .play-watercolor-gallery{gap:12px;margin-top:50px}
 html body.playground-page .play-watercolor .play-more{margin-top:50px}
 html body.playground-page .about-connect{padding-top:48px!important}
}

/* playground-coming-soon:start */
html body.playground-page .play-coming-soon{width:clamp(156px,15vw,220px);aspect-ratio:1;margin:140px auto 0;color:var(--ink)}
html body.playground-page .play-coming-soon svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 50%;animation:play-coming-soon-spin 18s linear infinite}
@keyframes play-coming-soon-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){html body.playground-page .play-coming-soon{width:156px;margin-top:50px}}
@media(prefers-reduced-motion:reduce){html body.playground-page .play-coming-soon svg{animation:none}}
/* playground-coming-soon:end */

/* playground-art-motion:start */
/* Observe stable frames; only their image surfaces reveal. */
html body.playground-page .play-art.long-page-pending>img{clip-path:var(--image-reveal-start);filter:none;animation:none}
html body.playground-page .play-gallery .play-art.long-page-pending>img{filter:blur(12px)}
html body.playground-page .play-gallery .play-art.long-page-visible>img{clip-path:inset(0);filter:none;animation:play-digital-art-reveal 2s cubic-bezier(.4,0,.2,1)}
@keyframes play-digital-art-reveal{from{clip-path:var(--image-reveal-start);filter:blur(12px)}to{clip-path:inset(0);filter:blur(0)}}
html body.playground-page .play-watercolor .play-art.long-page-visible>img{clip-path:inset(0);filter:none;animation:play-water-reveal 3s cubic-bezier(.45,0,.2,1)}
html body.playground-page .play-watercolor .play-art.long-page-visible:not(.play-water-clear)>img{filter:var(--play-water-filter,none)}
@keyframes play-water-reveal{0%{clip-path:polygon(0 0,100% 0,100% 0.000%,87.5% 0.000%,75% 0.000%,62.5% 0.000%,50% 0.000%,37.5% 0.000%,25% 0.000%,12.5% 0.000%,0% 0.000%)}25%{clip-path:polygon(0 0,100% 0,100% 23.985%,87.5% 21.932%,75% 17.576%,62.5% 13.468%,50% 12.015%,37.5% 14.068%,25% 18.424%,12.5% 22.532%,0% 23.985%)}50%{clip-path:polygon(0 0,100% 0,100% 50.847%,87.5% 54.799%,75% 55.940%,62.5% 53.601%,50% 49.153%,37.5% 45.201%,25% 44.060%,12.5% 46.399%,0% 50.847%)}75%{clip-path:polygon(0 0,100% 0,100% 76.135%,87.5% 78.747%,75% 83.265%,62.5% 87.042%,50% 87.865%,37.5% 85.253%,25% 80.735%,12.5% 76.958%,0% 76.135%)}100%{clip-path:polygon(0 0,100% 0,100% 100.000%,87.5% 100.000%,75% 100.000%,62.5% 100.000%,50% 100.000%,37.5% 100.000%,25% 100.000%,12.5% 100.000%,0% 100.000%)}}
html body.playground-page .play-watercolor .play-art.long-page-visible.long-page-up>img{animation-name:play-water-reveal-up}
@keyframes play-water-reveal-up{0%{clip-path:polygon(0 100%,100% 100%,100% 100.000%,87.5% 100.000%,75% 100.000%,62.5% 100.000%,50% 100.000%,37.5% 100.000%,25% 100.000%,12.5% 100.000%,0% 100.000%)}25%{clip-path:polygon(0 100%,100% 100%,100% 76.015%,87.5% 78.068%,75% 82.424%,62.5% 86.532%,50% 87.985%,37.5% 85.932%,25% 81.576%,12.5% 77.468%,0% 76.015%)}50%{clip-path:polygon(0 100%,100% 100%,100% 49.153%,87.5% 45.201%,75% 44.060%,62.5% 46.399%,50% 50.847%,37.5% 54.799%,25% 55.940%,12.5% 53.601%,0% 49.153%)}75%{clip-path:polygon(0 100%,100% 100%,100% 23.865%,87.5% 21.253%,75% 16.735%,62.5% 12.958%,50% 12.135%,37.5% 14.747%,25% 19.265%,12.5% 23.042%,0% 23.865%)}100%{clip-path:polygon(0 100%,100% 100%,100% 0.000%,87.5% 0.000%,75% 0.000%,62.5% 0.000%,50% 0.000%,37.5% 0.000%,25% 0.000%,12.5% 0.000%,0% 0.000%)}}
html body.playground-page .play-art.long-page-fallback>img{clip-path:none;filter:none;animation:none}
@media(prefers-reduced-motion:reduce){html body.playground-page .play-art.long-page-pending>img,html body.playground-page .play-art.long-page-visible>img{clip-path:none;filter:none!important;animation:none!important}}
/* playground-art-motion:end */