/* The opening's overlay, as the first hero had it: divider, wire-side labels, the world
   program in the corner; plus the code card (source side) and Walk in. */
.world-labels { position: absolute; inset: 0; pointer-events: none; clip-path: inset(0 0 0 56%); }
/* The program: a small note in the empty sky of the source side, not the main event. */
.world-code { position: absolute; right: 18px; top: 18px; margin: 0; padding: 10px 14px; max-width: 34%; overflow: hidden; background: rgba(9,11,14,.55); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; font-size: 10.5px; line-height: 1.6; color: #6f7782; white-space: pre; text-align: left; z-index: 0; }
.world-label { position: absolute; left: 0; top: 0; z-index: 1; margin: 0; padding: 5px 9px; border-radius: 5px; background: rgba(9,11,14,.86); border: 1px solid #2b3036; color: #d5d9de; font-size: 12px; white-space: nowrap; will-change: transform; }
.world-code .t-k, .world-card .t-k { color: #8fa5ff; }
.world-code .t-f, .world-label .t-f, .world-card .t-f { color: #6fe3a6; }
.world-code .t-s, .world-label .t-s, .world-card .t-s { color: #f0c27b; }
.world-code .t-n, .world-label .t-n, .world-card .t-n { color: #ff9a9e; }
.world-code .t-c, .world-card .t-c { color: #5b626b; }
.world-code .t-u, .world-label .t-u, .world-card .t-u { color: #8fd3ff; }
.world-code .t-b, .world-label .t-b, .world-card .t-b { color: #c9a5ff; }
.world-code .t-d, .world-card .t-d { color: #c9a5ff; }
@media (max-width: 1100px) { .world-code { display: none; } }
/* World / source tags ride on the divider. */
.world-tag { position: absolute; top: 18px; padding: 4px 9px; border-radius: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.world-tag.left { right: calc(50% + 12px); background: rgba(255,255,255,.72); color: #0e1013; }
.world-tag.right { left: calc(50% + 12px); background: rgba(9,11,14,.86); color: #6fe3a6; }
.world-handle { position: absolute; top: 0; bottom: 0; left: 56%; width: 44px; margin-left: -22px; padding: 0; border: 0; background: none; cursor: ew-resize; touch-action: none; }
.world-handle::before { content: ''; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.world-handle .grip { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #0e1013; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .2s; }
.world-handle .grip svg { width: 20px; height: 20px; }
.world-handle:hover .grip, .world-handle:focus-visible .grip { transform: scale(1.08); }
@media (max-width: 720px) { .world-label { font-size: 10.5px; padding: 3px 6px; } .world-tag.left { display: none; } }

/* Name under the pointer, and the code card, on the source side only. */
.world-tip[hidden] { display: none; }
.world-tip { z-index: 3; pointer-events: none; color: #fff; font-family: var(--body, system-ui, sans-serif); font-weight: 600; }
.world-card[hidden] { display: none; }
.world-card { position: absolute; z-index: 4; display: flex; flex-direction: column; background: rgba(9,11,14,.94); border: 1px solid #262b31; border-radius: 8px; color: #d5d9de; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.world-card header { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid #262b31; }
.world-card header strong { color: #fff; font: 600 14px/1.2 var(--body, system-ui, sans-serif); }
.world-card header span { flex: 1; min-width: 0; color: #8a919b; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.world-card header button { border: 0; background: none; color: #8a919b; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.world-card header button:hover { color: #fff; }
.world-card pre { margin: 0; padding: 10px 0; overflow: auto; font-size: 11px; line-height: 1.65; color: #8a919b; }
.world-card pre div { display: flex; gap: 14px; padding: 0 16px; white-space: pre; }
.world-card pre b { min-width: 2.4em; text-align: right; color: #4a5059; font-weight: 400; user-select: none; }
@media (max-width: 720px) { .world-card { left: 8px !important; width: calc(100% - 16px) !important; } }

/* Zoom asks for a modifier so the page still scrolls; this says so when someone scrolls. */
.world-zoomhint[hidden] { display: none; }
.world-zoomhint { position: absolute; left: 50%; top: 50%; z-index: 5; margin: 0; padding: 10px 16px; transform: translate(-50%, -50%); border-radius: 8px; background: rgba(9,11,14,.78); color: #fff; font: 600 14px/1.2 var(--body, system-ui, sans-serif); pointer-events: none; animation: nova-hint 1.6s ease forwards; }
@keyframes nova-hint { 0% { opacity: 0; } 12%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* Walk in: the stage fills the window. */
html.nova-walking { overflow: hidden; }
.world.walking .world-stage { position: fixed; inset: 0; z-index: 200; height: auto; border-radius: 0; }
.world.walking .world-labels, .world.walking .world-handle, .world.walking .world-zoomhint, .world.walking .world-card, .world.walking .world-tip { display: none; }
.walk-ui[hidden] { display: none; }
.walk-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.walk-back { position: absolute; top: 18px; left: 18px; pointer-events: auto; padding: 10px 16px; border: 0; border-radius: 999px;
  background: rgba(10, 14, 18, .72); color: #fff; font: 600 14px/1 var(--body, system-ui, sans-serif); cursor: pointer; }
.walk-back:hover { background: rgba(10, 14, 18, .9); }
.walk-hint { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; color: #fff; font: 500 13px/1.4 var(--mono, ui-monospace, monospace);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.walk-stick { display: none; position: absolute; left: 28px; bottom: 60px; width: 96px; height: 96px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .15); pointer-events: auto; }
.walk-stick span { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.walking canvas { cursor: grab; touch-action: none !important; }
.walking canvas:active { cursor: grabbing; }
@media (pointer: coarse) { .walk-stick { display: block; } .walk-hint { font-size: 11px; } }