.playfield{border-bottom:var(--border);touch-action:pan-y;min-height:clamp(36rem,82vh,54rem);color:var(--color-ink);caret-color:var(--color-accent);border-top-color:var(--color-line-strong);display:flex;position:relative;overflow:hidden}.playfield-canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.playfield-content{align-content:start;gap:var(--space-6);padding-block:var(--space-16) var(--space-24);display:grid;position:relative}.playfield-hud{top:var(--space-6);right:var(--page-gutter);justify-items:end;gap:var(--space-2);text-align:right;max-width:18rem;display:grid;position:absolute}.playfield-score{gap:var(--space-4);font-family:var(--font-display);font-size:var(--text-sm);text-transform:uppercase;font-variant-numeric:tabular-nums;display:flex}.playfield-demo{color:var(--color-accent-ink);animation:1.2s step-end 4 playfield-blink}.playfield-cleared{color:var(--color-accent-ink)}.playfield-play{min-height:calc(var(--grid-cell) * 4);padding:0 var(--space-4);border:1px solid var(--color-ink);border-radius:var(--radius);background:var(--color-ink);color:var(--color-bg);font-family:var(--font-display);font-size:var(--text-xs);text-transform:uppercase;cursor:pointer}.playfield-buttons{gap:var(--space-2);display:flex}.playfield-pause{min-height:calc(var(--grid-cell) * 4);padding:0 var(--space-3);border:1px solid var(--color-line-strong);border-radius:var(--radius);background:var(--color-bg);font-family:var(--font-display);font-size:var(--text-xs);text-transform:uppercase;cursor:pointer}.playfield-play[aria-pressed=true]{background:var(--color-bg);color:var(--color-ink)}.playfield-hint{font-size:var(--text-xs);color:var(--color-ink-muted)}.playfield-role{margin-top:var(--space-8)}.playfield-title{letter-spacing:-.01em;max-width:12ch;font-size:clamp(2.75rem,1.5rem + 5.6vw,6.5rem);line-height:1}.playfield-intro{max-width:56ch;font-size:var(--text-lg);color:var(--color-ink-muted)}.playfield-shortcuts{gap:var(--space-4);margin:var(--space-4) 0 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.playfield-tile{align-items:center;gap:var(--space-3);min-height:calc(var(--grid-cell) * 6);padding:0 var(--space-4);border:1px solid var(--color-ink);background:var(--color-bg);font-family:var(--font-display);font-size:var(--text-sm);text-transform:uppercase;transition:background-color var(--duration-fast) var(--ease-pixel);text-decoration:none;display:inline-flex}.playfield-tile:hover{background:var(--color-ink);color:var(--color-bg)}.playfield-tile-detail{color:var(--color-accent-ink)}.playfield-tile:hover .playfield-tile-detail{color:inherit}.playfield-tile[data-hit]{animation:.3s steps(3,end) playfield-hit}@keyframes playfield-hit{0%,66%{background:var(--color-accent);color:var(--color-on-accent)}}@keyframes playfield-blink{50%{opacity:0}}@media (width<=47.99rem){.playfield-content{padding-block:var(--space-6) var(--space-24)}.playfield-hud{text-align:left;justify-items:start;max-width:none;position:static}.playfield-role{margin-top:var(--space-2)}}@media (prefers-reduced-motion:reduce){.playfield-demo,.playfield-tile[data-hit]{animation:none}}