html:has(.playground-page){height:auto;overflow:auto;scroll-behavior:smooth}
.playground-page{height:auto;min-height:100svh;overflow:visible}
.playground-page .project-nav-list{display:none}
.playground-page .play-summary{position:fixed;left:20px;top:300px;bottom:20px;width:calc(25% - 40px);display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.play-count{display:block;color:#fff;font-size:20vw;font-weight:400;letter-spacing:-.09em;line-height:.8;font-variant-numeric:tabular-nums}
.play-summary p{max-width:240px;font-size:12px;line-height:1.45;letter-spacing:0}
.play-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:300px 20px 150px 26%;align-items:start;perspective:1200px}
.play-grid.is-masonry{grid-auto-rows:1px;row-gap:0}
.play-card{display:block;position:relative;min-width:0;align-self:start;overflow:hidden;background:#e4e4e1;transform:translate3d(0,var(--drift,0px),0) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:box-shadow .4s;transform-origin:50% 50%;backface-visibility:hidden}
.play-card.is-hovering{z-index:2;box-shadow:0 16px 30px -18px #10141b88}
.play-card img{display:block;width:100%;height:auto;transition:transform .65s cubic-bezier(.22,1,.36,1),filter .35s}
.play-caption{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;gap:12px;padding:12px;background:#efefedef;font-size:11px;line-height:1.3;opacity:0;transform:translateY(100%);transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s;pointer-events:none}
.play-card:hover img,.play-card:focus-visible img{transform:scale(1.035)}
.play-card:hover .play-caption,.play-card:focus-visible .play-caption{opacity:1;transform:translateY(0);color:var(--accent)}
.play-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.playground-page .cover-preview{position:fixed;inset:0;width:min(96vw,1800px);height:94dvh;max-width:none;max-height:none;padding:20px;margin:auto;background:var(--surface,#efefed);overflow:hidden}
.cover-preview[open]{display:flex;flex-direction:column;gap:16px}
.cover-preview::backdrop{background:#101319d9}
.cover-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0}
.cover-preview-bar h2{font-size:18px}.cover-preview-close{padding:10px;font-size:13px}
.cover-preview-image{width:100%;height:0;min-height:0;flex:1;object-fit:contain}
html:has(.cover-preview[open]){overflow:hidden}
@media(min-width:800px) and (max-height:650px){.playground-page .play-summary{top:230px}.play-grid{margin-top:230px}.play-count{font-size:18vw}.play-summary p{font-size:11px}}
@media(max-width:799px){
  .playground-page .play-summary{position:static;width:auto;margin:100px 20px 50px;display:flex;flex-direction:column-reverse;gap:52px}
  .play-summary p{max-width:270px;font-size:13px;line-height:1.45}
  .play-count{font-size:82vw;line-height:.8;letter-spacing:-.08em}
  .play-grid,.play-grid.is-masonry{margin:0 20px 60px;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:24px}
  .playground-page .sound,.playground-page .location{display:none}
}
@media(prefers-reduced-motion:reduce){html:has(.playground-page){scroll-behavior:auto}.play-card{transform:none!important}.play-card img,.play-caption{transition:none}}