/* The Void beta: a dark map of lines on the left, the world you travelled to on the right. */
.void-beta { padding-block: 90px 70px; }
.vb-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 34px; align-items: center; margin-top: 34px; }
.vb-map { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle, #1b1238 0%, #0a0716 55%, #04030a 72%, transparent 73%); }
.vb-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vb-line { fill: none; stroke: #e9e2ff38; stroke-width: .5; stroke-dasharray: 2 2.5; transition: stroke .3s; }
.vb-line.is-on { stroke: #f4f0ff; stroke-width: .9; stroke-dasharray: none; filter: drop-shadow(0 0 2px #c7b8ff); }
.vb-core { position: absolute; left: 50%; top: 50%; width: 16%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid #f4f0ff99; background: radial-gradient(circle, #fff 0%, #d8ccff 18%, #6d4fd833 48%, transparent 70%); cursor: pointer; box-shadow: 0 0 40px #a78bff66; }
.vb-node { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1px solid #f4f0ff; background: #0a0716; cursor: pointer; padding: 0; box-shadow: 0 0 0 4px #a78bff1f; transition: background .2s, box-shadow .2s; }
.vb-node span { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 12px/1 'Segoe UI', Arial, sans-serif; color: #e9e2ff; text-shadow: 0 1px 6px #000; pointer-events: none; }
.vb-node.left span { left: auto; right: 20px; }
.vb-node:hover, .vb-node:focus-visible { background: #c7b8ff; outline: none; box-shadow: 0 0 0 6px #a78bff40; }
.vb-node.seen { background: #8f78e8; }
.vb-node.is-on { background: #fff; box-shadow: 0 0 0 7px #a78bff55, 0 0 24px #c7b8ff; }
.vb-core:focus-visible { outline: 2px solid #c7b8ff; outline-offset: 4px; }

.vb-view { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid #c7b8ff40; background: #04030a; box-shadow: 0 30px 80px #000a; }
.vb-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #04030a; }
.vb-flash { position: absolute; inset: 0; background: radial-gradient(circle, #fff, #c7b8ff 40%, transparent 75%); opacity: 0; pointer-events: none; }
.vb-flash.go { animation: vb-flash .7s ease-out; }
@keyframes vb-flash { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
.vb-caption { padding: 20px 22px 22px; display: grid; gap: 8px; background: linear-gradient(#0a0716, #070512); }
.vb-kicker { font: 10px/1.4 monospace; letter-spacing: .1em; color: #c7b8ff; margin: 0; }
.vb-title { font-size: 26px; line-height: 1.15; margin: 0; color: #f4f0ff; font-weight: 600; letter-spacing: -.01em; }
.vb-blurb { margin: 0; color: #cfc6e8; max-width: 62ch; }
.vb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.vb-actions button { font: 700 12px/1 'Segoe UI', Arial, sans-serif; border-radius: 999px; padding: 10px 15px; cursor: pointer; border: 1px solid #c7b8ff66; background: transparent; color: #f4f0ff; }
.vb-actions .vb-next { background: #c7b8ff; color: #0a0716; border-color: #c7b8ff; }
.vb-actions button:focus-visible { outline: 2px solid #c7b8ff; outline-offset: 2px; }
.vb-count { margin-left: auto; font: 10px/1.4 monospace; letter-spacing: .08em; color: #a99fcc; }
.vb-note { margin-top: 18px; font-size: 12px; color: #9a93b8; }

@media (max-width: 900px) { .vb-grid { grid-template-columns: minmax(0, 1fr); } .vb-map { max-width: 420px; } }
@media (max-width: 560px) {
  .vb-map { width: 84%; }
  .vb-node span, .vb-node.left span { left: 50%; right: auto; top: 17px; transform: translateX(-50%); font-size: 10px; text-align: center; }
  .vb-title { font-size: 21px; } .vb-count { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vb-flash.go { animation: none; } }