.pl-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(18px, 3vw, 40px); align-items: stretch; }
.pl .term-body { min-height: 380px; font-size: 12.5px; }
.pl-board { display: grid; align-content: start; gap: 16px; }
.pl-stat { margin: 0; display: grid; gap: 6px; }
.pl-stat b { font: 900 clamp(56px, 7vw, 104px)/.85 var(--display); font-stretch: 125%; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pl-stat span { color: #9a9ca5; font: 500 13px/1.3 var(--mono); }
.pl-steps { display: flex; gap: 6px; font: 500 11px/1 var(--mono); color: #8d8f98; }
.pl-steps span { padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); }
.pl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16px, 1fr)); gap: 4px; }
.pl-tiles i { aspect-ratio: 1; border-radius: 30%; background: rgba(255,255,255,.09); transition: background .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.pl-tiles i.go { background: #e8c07a; box-shadow: 0 0 10px #e8c07a99; transform: scale(1.25); animation: pl-pulse .5s ease-in-out infinite alternate; }
.pl-tiles i.done { background: linear-gradient(145deg, var(--c1), var(--c2)); transform: none; }
@keyframes pl-pulse { to { opacity: .55; } }
.pl-board .dm-btn { justify-self: start; }
@media (max-width: 860px) { .pl-grid { grid-template-columns: 1fr; } .pl .term-body { min-height: 300px; } }
@media (prefers-reduced-motion: reduce) { .pl-tiles i, .pl-tiles i.go { animation: none; transition: none; } }