/* Playground: a dense cloud of design images on a flat grey stage (after laurent.fyi). */
body.is-play{padding-bottom:0}
/* the stage is its own neutral grey in both themes, so every screen reads true; ink and muted text follow it */
.play{--pl-bg:#3B3837;--pl-ink:#ECE7E3;--pl-mute:rgba(236,231,227,.46);position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--pl-bg)}
:root[data-theme="light"] .play{--pl-bg:#B6B2AE;--pl-ink:#1E1A19;--pl-mute:rgba(30,26,25,.46)}
#playground{position:absolute;inset:0}
.pl-stage{position:absolute;inset:0;z-index:1;touch-action:none;cursor:grab;outline:none;-webkit-user-select:none;user-select:none}
.pl-stage.dragging{cursor:grabbing}
.pl-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--pl-ink)}

/* the cards: crisp, nearly square corners, a short contact shadow so the stack reads as layers */
.pl-card{position:absolute;left:0;top:0;padding:0;border:0;border-radius:3px;overflow:hidden;background:#d9d5d1;box-shadow:0 1px 2px rgba(0,0,0,.14),0 6px 14px -6px rgba(0,0,0,.28);will-change:transform,opacity;transform-origin:50% 50%;cursor:pointer}
.pl-stage.dragging .pl-card{cursor:grabbing}
.pl-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.pl-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
.is-open .pl-card{cursor:zoom-out}

/* the frame and its two labels, in the project's colour (hover, or the open card) */
.pl-frame{position:absolute;left:0;top:0;z-index:7;pointer-events:none;box-shadow:0 0 0 2px var(--tag,#FFD21F);opacity:0;transition:opacity .12s}
.pl-frame.on{opacity:1}
.pl-tag{position:absolute;left:-2px;padding:3px 6px;font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.01em;white-space:nowrap;color:var(--ink,#111);background:var(--tag,#FFD21F);text-transform:lowercase}
.pl-tag-a{bottom:100%}
.pl-tag-b{top:100%;max-width:min(520px,80vw);overflow:hidden;text-overflow:ellipsis}
.pl-tag:empty{display:none}
.pl-x{position:absolute;left:0;top:0;z-index:8;width:32px;height:28px;display:grid;place-items:center;color:var(--ink,#111);background:var(--tag,#FFD21F);border-radius:2px}
.pl-x[hidden]{display:none}
.pl-x svg{width:14px;height:14px}
.pl-x:focus-visible{outline:2px solid var(--pl-ink);outline-offset:2px}

/* the top-left label */
.pl-chip{position:absolute;z-index:6;font:600 10.5px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--pl-bg);background:var(--pl-ink);padding:3px 7px;white-space:nowrap;letter-spacing:.02em;pointer-events:none;text-transform:lowercase}
.pl-head{left:clamp(16px,2.4vw,30px);top:clamp(18px,3vh,28px)}

/* only the grid wall fades into the floor */
.pl-fade{position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(to top,var(--pl-bg) 30%,transparent);pointer-events:none;z-index:4;opacity:0;transition:opacity .4s}
.is-grid .pl-fade{opacity:1}

/* the controls: plain words on the grey, the current one in ink */
.pl-ui{position:absolute;z-index:5;display:flex;align-items:center;font:500 16px/1 var(--body-font);text-transform:lowercase;color:var(--pl-ink)}
.pl-layout{left:clamp(10px,1.8vw,22px);bottom:20px;gap:2px}
.pl-arr{width:30px;height:34px;display:grid;place-items:center;color:var(--pl-mute);border-radius:8px;transition:color .2s}
.pl-arr:hover{color:var(--pl-ink)}
.pl-arr svg{width:13px;height:13px}
/* the layout names: only the current one shows; the menu opens on hover or keyboard focus */
.pl-names{display:flex;align-items:center}
.pl-names button{max-width:0;overflow:hidden;opacity:0;padding:6px 0;color:var(--pl-mute);white-space:nowrap;transition:max-width .35s var(--ease),opacity .25s,padding .35s var(--ease),color .2s}
.pl-names button[aria-pressed="true"]{max-width:120px;opacity:1;padding:6px 4px;color:var(--pl-ink)}
.pl-layout:hover .pl-names button,.pl-layout:focus-within .pl-names button{max-width:120px;opacity:1;padding:6px 6px}
.pl-names button:hover{color:var(--pl-ink)}
.pl-filters{right:clamp(16px,2.4vw,30px);bottom:20px;gap:clamp(14px,1.8vw,22px)}
.pl-filters button{color:var(--pl-mute);transition:color .2s;padding:6px 0}
.pl-filters button:hover,.pl-filters button[aria-pressed="true"]{color:var(--pl-ink)}
.pl-about{right:clamp(16px,2.4vw,30px);top:clamp(14px,2.6vh,24px);text-decoration:none;padding:6px 0}
.pl-about span{display:inline-block;transition:transform .35s var(--ease),color .2s}
.pl-about:hover span{transform:translateY(-2px)}
.pl-hint{position:absolute;left:50%;bottom:28px;translate:-50% 0;z-index:5;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--pl-mute);text-transform:lowercase;letter-spacing:.04em;transition:opacity .6s;pointer-events:none}
.pl-hint.off{opacity:0}
@media (max-width:1099px){.pl-layout,.pl-filters{bottom:94px}.pl-hint{bottom:142px}.pl-fade{height:230px}}
@media (max-width:560px){.pl-hint{display:none}.pl-ui{font-size:15px}}
@media (prefers-reduced-motion:reduce){.pl-names button{transition:none}}