.wd-grid { position: relative; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); border-left: 1px solid #3A3A3A; border-top: 1px solid #3A3A3A; touch-action: none; user-select: none; -webkit-user-select: none; }
.wd-cell { aspect-ratio: 1; background: #0A0A0A; border: 0; border-right: 1px solid #3A3A3A; border-bottom: 1px solid #3A3A3A; padding: 0; cursor: pointer; transition: background .14s; }
.wd-cell[aria-pressed="true"] { background: #EDEDED; }
.wd-cell.head { background: #1E2A3A; }
.wd-cell.head[aria-pressed="true"] { background: #B9E3D0; }
.wd-cell.hit { animation: hit .3s ease-out; }
@keyframes hit { from { background: #F3C8DA; } }
.wd-orb {
  position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--s, 1)); transition: transform .18s ease-out;
  background: radial-gradient(circle, #0B1440 0%, #14205E 34%, #2C3E9A 48%, #B9E3D0 62%, #F3C8DA 74%, #DDEBFF 86%, transparent 100%);
  filter: blur(10px);
}
html.js .wd-orb { animation: orb-in 1.6s var(--ease) both; }
@keyframes orb-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
.wd-ph { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% / 16); border-right: 1px solid #B9E3D0; background: rgba(185, 227, 208, .08); pointer-events: none; opacity: 0; transform: translateX(calc(var(--step, 0) * 100%)); transition: opacity .3s; }
.wd-grid.run .wd-ph { opacity: 1; }
.wd-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; padding-top: 40px; }
.wd-title { margin: 0; font-weight: 600; font-size: clamp(72px, 11vw, 168px); line-height: .85; letter-spacing: -.05em; }
.wd-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wd-run { min-width: 96px; }
.r-woldorf .trk[aria-pressed="true"] .t { color: #B9E3D0; }