.playground-page{box-sizing:border-box;height:100vh;height:100svh;min-height:0;padding:clamp(64px,6.6cqw,110px) var(--page-gutter) 12px;display:flex;flex-direction:column}
.playground-heading{flex:none;margin:0 0 clamp(16px,2.5cqw,36px);font-size:2.4514811cqw;line-height:1.06;font-weight:600;color:var(--title)}
.playground-grid{--columns:4;--gap:12px;position:relative;flex:1;min-height:0;width:100%}
.playground-tile{position:absolute;display:block;margin:0;padding:0;border:0;border-radius:8px;overflow:hidden;background:var(--line);cursor:zoom-in}
.playground-tile>img{display:block;width:100%;height:100%;object-fit:cover}
.playground-tile:focus-visible{outline-offset:2px;z-index:1}
@media(max-width:1100px){.playground-grid{--columns:3;--gap:10px}}
@media(max-width:700px){
 .playground-page{padding-top:80px;padding-bottom:8px}
 .playground-heading{font-size:32px;margin-bottom:20px}
 .playground-grid{--columns:2;--gap:8px}
 .playground-tile{border-radius:6px}
}
@media(max-height:500px){
 .playground-page{padding-top:44px;padding-bottom:8px}
 .playground-heading{font-size:24px;margin-bottom:12px}
}
.playground-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:none;margin-bottom:clamp(16px,2.5cqw,36px)}
.playground-toolbar .playground-heading{margin:0}
.playground-shuffle{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font-size:14px;line-height:1.2;white-space:nowrap}
.playground-shuffle:hover{background:var(--line)}
.playground-shuffle:active{transform:translateY(1px)}
@media(max-width:700px){.playground-toolbar{margin-bottom:20px}}
@media(max-height:500px){.playground-toolbar{margin-bottom:12px}}