/* ---------- World ---------- */
#viewport {
  position: fixed; inset: 0; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3 2 L22 11 L13 13.5 L9.5 22 Z' fill='%23ff6a1a' stroke='%2317181b' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, default;
}
#viewport.dragging { cursor: grabbing; }
#grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#world.moving { will-change: transform; }
#world, #grid { transition: filter .18s ease; }
.wheel-open #world, .wheel-open #grid { filter: saturate(.35) brightness(.62); }
:root[data-theme="light"] .wheel-open #world { filter: saturate(.35) brightness(.9); }
#routes { position: absolute; overflow: visible; pointer-events: none; }
#routes path { fill: none; stroke: var(--grid-major); stroke-width: 3; stroke-dasharray: 2 14; stroke-linecap: round; }
#routes .sign rect { fill: var(--bg-2); stroke: var(--ink-dim); stroke-width: 2; }
#routes .sign text { fill: var(--ink-dim); font: 600 16px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; dominant-baseline: central; }

.zone { position: absolute; }
.zone-frame { position: absolute; inset: 0; border-radius: 28px; background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.zone-frame i { position: absolute; width: 56px; height: 56px; border: 0 solid var(--ink-dim); opacity: .55; }
.zone-frame i:nth-child(1) { left: 0; top: 0; border-left-width: 3px; border-top-width: 3px; border-top-left-radius: 28px; }
.zone-frame i:nth-child(2) { right: 0; top: 0; border-right-width: 3px; border-top-width: 3px; border-top-right-radius: 28px; }
.zone-frame i:nth-child(3) { left: 0; bottom: 0; border-left-width: 3px; border-bottom-width: 3px; border-bottom-left-radius: 28px; }
.zone-frame i:nth-child(4) { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; border-bottom-right-radius: 28px; }
.zone.current .zone-frame i { border-color: var(--accent); opacity: 1; }
.zone-head { position: absolute; left: 56px; top: 44px; right: 56px; display: grid; gap: 6px; pointer-events: none; }
.zone-kicker { font: 600 15px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); display: flex; gap: 18px; }
.zone-kicker b { color: var(--hot); font-weight: 600; }
.zone-title {
  margin: 0; font-family: var(--f-display); font-weight: 900; font-stretch: 125%;
  font-size: 92px; line-height: .9; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink);
  text-wrap: balance;
}
.zone-sub { margin: 4px 0 0; font-size: 19px; color: var(--ink-dim); max-width: 52ch; }