/* The P-16 replay, from v1's news/dig-bench/replay.css, scoped to Ben's article body */
.dm-a-body .p16 { margin: 1.6em 0 1.8em; border: 1px solid var(--line); border-radius: 22px; background: #ffffff; overflow: hidden; }
.dm-a-body .p16-stage { display: grid; place-items: center; padding: 46px 16px 26px; }
.dm-a-body .p16-line { position: relative; display: flex; font: 400 clamp(20px, 5.4vw, 34px)/1.25 "DM Mono", ui-monospace, monospace; }
.dm-a-body .p16-cell, .dm-a-body .p16-player, .dm-a-body .p16-ghost { width: 1ch; text-align: center; }
.dm-a-body .p16-cell.is-blank { color: var(--ink); opacity: .22; }
.dm-a-body .p16-cell.is-num { color: var(--ink); }
.dm-a-body .p16-cell.is-portal { color: var(--ink); }
.dm-a-body .p16-player { position: absolute; top: 0; left: calc(var(--p, 0) * 1ch); background: #ffffff;
  color: var(--ink); transition: opacity .12s ease; }
.dm-a-body .p16-player.glide { transition: left .26s cubic-bezier(.4, 0, .2, 1), opacity .12s ease; }
.dm-a-body .p16-player.fade { opacity: 0; }
.dm-a-body .p16-player.bump { animation: p16-bump .24s ease-out; }
@keyframes p16-bump { 40% { transform: translateX(calc(var(--d, 1) * .28ch)); } }
.dm-a-body .p16-arrow { display: block; transform: scale(calc(var(--f, 1) * 1.3), 1.3); transition: transform .2s ease; }
.dm-a-body .p16-ghost { position: absolute; top: 0; left: calc(var(--p) * 1ch); pointer-events: none; z-index: 2; }
.dm-a-body .p16-ghost.pulse { color: var(--ink); animation: p16-pulse .38s ease-out forwards; }
@keyframes p16-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.dm-a-body .p16-ghost.vanish { color: var(--ink); background: #ffffff; animation: p16-vanish .36s ease-in forwards; }
@keyframes p16-vanish { to { transform: scale(.2); opacity: 0; } }
.dm-a-body .p16-ghost.collect { color: var(--ink); animation: p16-collect .6s ease-out forwards; }
@keyframes p16-collect { 30% { opacity: 1; } to { transform: translateY(-1.1em) scale(1.35); opacity: 0; } }
.dm-a-body .p16-keys { display: flex; justify-content: center; gap: 10px; padding-bottom: 6px; }
.dm-a-body .p16-key { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #d9cfbf; background: #ffffff; color: var(--muted);
  font: 400 14px/1 "DM Mono", ui-monospace, monospace; }
.dm-a-body .p16-key.on { animation: p16-press .42s ease-out; }
@keyframes p16-press {
  0%, 45% { background: var(--ink); border-color: var(--ink); color: #fbf8f3; transform: scale(.94); }
  60% { transform: scale(1); }
}
.dm-a-body .p16-bar { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 14px 18px 0; border-top: 1px solid var(--line); }
.dm-a-body .p16-controls { display: flex; gap: 6px; }
.dm-a-body .p16-controls button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid #d9cfbf; background: #ffffff; color: var(--ink); cursor: pointer; transition: background .2s; }
.dm-a-body .p16-controls button:hover { background: var(--tint); }
.dm-a-body .p16-controls button:focus-visible, .dm-a-body .p16-scrub:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dm-a-body .p16-controls .icon { width: 14px; height: 14px; }
.dm-a-body .p16-play[aria-pressed="true"] .play, .dm-a-body .p16-play[aria-pressed="false"] .pause { display: none; }
.dm-a-body .p16-scrub { flex: 1; min-width: 0; margin: 0; accent-color: var(--ink); }
.dm-a-body .p16-status { flex: none; min-width: 8.5em; text-align: right; font: 400 12.5px/1.3 "DM Mono", ui-monospace, monospace; color: var(--muted); }
.dm-a-body .p16 figcaption { padding: 14px 32px 22px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 640px) {
.dm-a-body .p16-stage { padding: 34px 12px 20px; }
.dm-a-body .p16-bar { flex-wrap: wrap; padding: 12px 14px 0; }
.dm-a-body .p16-scrub { order: 5; flex-basis: 100%; }
.dm-a-body .p16-status { margin-left: auto; }
.dm-a-body .p16 figcaption { padding: 12px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
.dm-a-body .p16-player, .dm-a-body .p16-player.glide, .dm-a-body .p16-arrow { transition: none; }
.dm-a-body .p16-key.on { animation: none; background: var(--ink); border-color: var(--ink); color: #fbf8f3; }
}
/* Ben's site has its own .glide (a full-height layer); the arrow's glide is only a transition */
.dm-a-body .p16-player.glide { right: auto; bottom: auto; height: auto; z-index: auto; pointer-events: auto; color: var(--ink); }