/* play.css · playground (v5) */
.play-page{background:var(--cream)}
.p-intro{background:var(--purple);color:var(--ink);padding:clamp(120px,12vw,168px) 0 clamp(56px,6vw,88px)}
.p-intro h1{font-weight:900;font-size:clamp(56px,11vw,160px);line-height:.9}
.p-intro p{margin-top:20px;font-size:clamp(18px,1.5vw,21px);max-width:46ch}
.p-body{padding:clamp(28px,3vw,40px) 0 clamp(80px,9vw,128px);background:var(--cream)}
.p-filters{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:20px;border-bottom:1px solid var(--g2)}
.p-filters button{font:500 15px/1 var(--text);color:var(--ink);background:none;border:1px solid var(--g2);border-radius:999px;min-height:40px;padding:0 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background-color var(--d-ui) ease,color var(--d-ui) ease,border-color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.p-filters button small{font-size:12px;color:var(--g6,#6E6A63);font-variant-numeric:tabular-nums}
.p-filters button:active{transform:scale(.97)}
.p-filters button[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.p-filters button[aria-pressed="true"] small{color:var(--g2)}
@media(hover:hover) and (pointer:fine){.p-filters button:not([aria-pressed="true"]):hover{border-color:var(--ink)}}
.p-count{font-size:14px;color:#6E6A63;margin:18px 0 24px}
.p-grid{columns:3;column-gap:var(--gap)}
.p-item{break-inside:avoid;margin:0 0 32px}
.p-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit;border-radius:var(--r)}
.p-img{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--g1)}
.p-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.p-badge{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;background:var(--cream);color:var(--ink);border-radius:999px;padding:6px 11px 6px 9px;font:500 13px/1 var(--text)}
.p-badge svg{width:14px;height:14px}
.p-name{display:block;font:600 16px/1.3 var(--text);margin-top:12px}
.p-cat{font-size:14px;color:#6E6A63;margin-top:4px}
@media(hover:hover) and (pointer:fine){.p-open:hover .p-img img{transform:scale(1.02)}}
.p-open:focus-visible{outline-offset:4px}
.p-end{background:var(--ink);color:var(--cream);padding:clamp(56px,6vw,88px) 0}
.p-end .c-cta{margin-top:0;border-top:0;padding-top:0}
.p-viewer .c-dlg-body{transition:opacity 160ms ease}
.p-viewer .c-dlg-body.swap{opacity:0}
.p-viewer .c-dlg-body img,.p-viewer .c-dlg-body video{max-height:72dvh;max-width:100%;width:auto;border-radius:6px;background:#000}
.p-cap{padding:14px 20px 20px;text-align:center}
.p-cap h2{font:600 17px/1.3 var(--text);letter-spacing:0}
.p-cap p{font-size:14px;color:var(--g2);margin-top:4px}
@media(max-width:900px){.p-grid{columns:2}}
@media(max-width:560px){.p-grid{columns:1}}
@media(prefers-reduced-motion:reduce){.p-img img{transition:none}.p-open:hover .p-img img{transform:none}}