.v3 .city { --pa-senate: url("/img/v3/world/place-senate.70f7816d.svg"); }
.v3 .cm { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0;
  border-radius: var(--step-s); background: none; color: var(--fg); cursor: pointer; transform: scale(var(--iz)) translate(-50%, calc(-50% - 6px)); transform-origin: 0 0; }
@media (pointer: coarse) { .v3 .cm { width: 44px; height: 44px; } }
.v3 .cm-door { display: block; width: 12px; height: 12px; } .v3 .cm:active .dm-g { fill: var(--sf3); }
.v3 .cm-step, .v3 .cm-lb { position: absolute; opacity: 0; pointer-events: none; transition: opacity 80ms var(--e-out); }
.v3 .cm-step { left: 50%; top: calc(50% + 6px); width: 40px; height: 20px; transform: translate(-50%, -25%); fill: none; stroke: var(--fg); stroke-width: 2; } .v3 .cm-step .w { stroke: var(--bg); stroke-width: 4; }
.v3 .cm-lb { left: 50%; bottom: calc(50% + 14px); transform: translateX(calc(-50% + var(--sx, 0px))); width: max-content; max-width: calc(100vw - 16px); white-space: normal; }
@media (min-width: 22.5em) { .v3 .cm-lb { white-space: nowrap; } }
.v3 .cm-lb { display: block; text-align: center; } .v3 .cm-n { font-weight: var(--w-strong); }
.v3 .cm:focus-visible { box-shadow: var(--focus-ring); }
.v3 .cm:focus-visible :is(.cm-step, .cm-lb), .v3 .cm[data-peek] :is(.cm-step, .cm-lb) { opacity: 1; transition-duration: 120ms; transition-timing-function: var(--e-out); }
@media (hover: hover) and (pointer: fine) { .v3 .cm:hover :is(.cm-step, .cm-lb) { opacity: 1; transition-duration: 120ms; transition-timing-function: var(--e-out); } }
.v3 .city-map[data-warm] :is(.cm-step, .cm-lb) { transition-duration: 0ms; }
.v3 .cm-new { position: absolute; left: 100%; top: -8px; background: var(--sf); color: var(--warm-amber-text); border: 1px solid; font-size: 10px; }
.v3 .cm-peek { transform: translateY(calc(100% + 8px)); visibility: hidden; transition: transform var(--d-fast) var(--e-out), visibility 0s var(--d-fast); }
.v3 .cm-peek[data-open] { transform: none; visibility: visible; transition: transform var(--d-base) var(--e-out), visibility 0s; }
.v3 .cm-what { margin: 6px 0 12px; color: var(--fgl); } .v3 .cm-peek .btn.pri { display: flex; justify-content: center; min-height: 48px; }
.v3 .cm-go { margin-left: auto; text-decoration: underline; } .v3 .cp-r .chip:first-of-type { margin-left: auto; } .v3 .cp-r .chip ~ .cm-go { margin-left: 0; }
.v3 .city-map[data-entering] { overflow: hidden; } .v3 .city-map[data-entering] .city-layer { transition: transform 260ms var(--e-out); will-change: transform; }
.v3 .city-map[data-entering] :is(.city-pins, .city-amb) { opacity: 0; }
.v3 .city-map[data-entering] :is(.city-plates, .city-hud, .city-ctl, .city-hint, .city-tolist, .city-toast, .cm-peek, .city-panel, .cm) { opacity: 0; transition: opacity 120ms var(--e-out); }
.v3 .city[data-room] > :not(.city-bar):not(.pi-host) { visibility: hidden; } .v3 .city[data-inside] > :not(.city-bar):not(.pi-host) { display: none; }
@media (prefers-reduced-motion: reduce) { .v3 :is(.cm-step, .cm-lb, .cm-peek, .city-map[data-entering] *) { transition: none !important; } }
.v3 .pi-host { position: fixed; z-index: 8; inset: calc(var(--chrome-top) + var(--world-bar)) 0 0 var(--sb-w, 0px); overflow: auto; overscroll-behavior: contain; background: var(--bg); }
.v3 .pi-host[hidden] { display: none; }
.v3 .pi { container: pi / inline-size; max-width: calc(1224px + 2 * var(--q-inset)); margin: 0 auto; padding: var(--s-5) var(--q-inset) 0; }
.v3 .pi-top { display: grid; gap: var(--s-4); padding-bottom: var(--s-5); } .v3 .pi-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.v3 .pi-h1 { font-size: var(--t-h1); line-height: 1.1; outline: none; } .v3 .pi-sit { margin-left: auto; }
.v3 .pi-body { display: grid; gap: var(--s-5); }
.v3 .pi-stage { min-width: 0; background: var(--of-stage); border: 1px solid var(--of-edge); }
.v3 .pi-band { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; padding: 8px 12px; background: var(--of-chip); border-left: 1px solid var(--of-mu); color: var(--of-ink); font-size: 13px; line-height: 18px; }
.v3 .pi-band--demo { background: var(--of-sel); }
.v3 :is(.pi-stage, .pi-sheet) .chip { background: var(--of-panel); color: var(--of-ink); border: 1px solid var(--of-mu); } .v3 :is(.pi-stage, .pi-sheet) .chip--road { border-style: dashed; color: var(--of-mu); }
.v3 .pi-win { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.v3 .pi-plate { position: absolute; inset: 0; }
.v3 .pi-art { position: absolute; inset: 0; background: var(--pa-senate) 0 0 / 100% 100% no-repeat; }
.v3 .pi-lights, .v3 .pi-edge, .v3 .pi-o, .v3 .pi-desks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.v3 .pi-slot { fill: var(--fg); } .v3 .pi-lamp { fill: var(--warm-amber); }
.v3 .pi-hot { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; clip-path: var(--hit); pointer-events: auto; cursor: pointer; }
.v3 .pi-edge { fill: none; opacity: 0; stroke: var(--of-ink); stroke-width: 2; } .v3 .pi-edge polygon { vector-effect: non-scaling-stroke; } .v3 .pi-edge .w { stroke: #FFFBF2; stroke-width: 4; }
.v3 .pi-hot:focus-visible + .pi-edge { opacity: 1; }
.v3 .pi-tag, .v3 .pi-dt, .v3 .pi-pan { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 20px; padding: 0 6px; background: var(--of-panel); color: var(--of-ink); border: 1px solid var(--of-mu); border-radius: var(--step-s); font: 600 12px/18px var(--sans); }
.v3 .pi-tag { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(calc(-50% + var(--tag-dx, 0px)), -100%); pointer-events: none; }
.v3 .pi-fig { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 5; padding: 0; border: 0; background: none; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; }
.v3 .pi-sp svg { display: block; width: calc(16px * var(--of-fig-scale, 1)); height: auto; } .v3 .pi-fc svg { display: block; width: 24px; height: 24px; }
.v3 .pi-dt { transform: translateX(var(--tag-dx, 0px)); position: absolute; left: calc(100% + 6px); bottom: 0; width: max-content; max-width: 240px; display: none; height: auto; min-height: 28px; flex-wrap: wrap; row-gap: 0; padding: 2px 6px; } .v3 .pi-fig[data-l] .pi-dt { left: auto; right: calc(100% + 6px); }
.v3 .pi-dt em { flex-basis: 100%; font: 500 11px/14px var(--sans); color: var(--of-mu); white-space: normal; max-width: 220px; }
.v3 .pi-fig:is(:focus-visible, [data-peek]) { z-index: 6; } .v3 .pi-fig:is(:focus-visible, [data-peek]) .pi-dt { display: inline-flex; }
@media (hover: hover) { .v3 .pi-fig:hover .pi-dt { display: inline-flex; } }
.v3 .pi-pan { flex: none; height: 44px; padding: 0 12px; font-size: 13px; }
.v3 :is(.pi-pan, .pi-tag)[aria-pressed="true"], .v3 .pi-tag[data-sel] { background: var(--of-ink); color: var(--of-panel); }
.v3 .pi-bar { display: none; } .v3 .pi-sheet { margin: 0; padding: var(--s-5); background: var(--of-panel); color: var(--of-ink); border: 1px solid var(--of-edge); }
.v3 .pi-sheet h2 { font-size: var(--t-h3); color: var(--of-ink); outline: none; } .v3 .pi-sheet :is(p, a, .pl-r) { color: var(--of-ink); } .v3 .pi-sheet .pl-r { color: var(--of-mu); }
.v3 .pi-sheet .pl-rows li { background: var(--of-chip); border-color: var(--of-edge); color: var(--of-ink); } .v3 .pi-sheet li[aria-current] { box-shadow: inset 0 0 0 2px var(--of-ink); }
.v3 .pi-sheet .pi-x { position: absolute; right: 4px; top: 4px; color: var(--of-ink); } .v3 .pi-sheet.pi-rail .pi-x { display: none; } .v3 .pi-sheet::backdrop { background: var(--of-backdrop); }
.v3 .pi-sheet[open]:not(:modal) { position: fixed; z-index: var(--z-sheet); inset: var(--chrome-top) 0 0 auto; width: var(--of-sheet-w); overflow: auto; }
.v3 .pi-sheet:modal { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 85dvh; border-radius: var(--of-r-sheet) var(--of-r-sheet) 0 0; }
.v3 .pi-twin { padding: var(--s-9) 0 var(--q-sec); }
@media (prefers-reduced-motion: reduce) { .v3 .pi-plate { transition: none !important; } }
@media (max-width: 47.99em) {
  .v3 .pi-sit { margin: 0; width: 100%; justify-content: center; } .v3 .pi-fig[data-peek] em { display: none; } .v3 .pi-h1 { font-size: 32px; }
  .v3 .pi-stage { margin-inline: calc(-1 * var(--q-inset)); } .v3 .pi-win { aspect-ratio: 4 / 3; }
  .v3 .pi-plate { inset: 0 auto 0 0; width: 133.333%; transform: translateX(calc(var(--px) * -1%)); transition: transform var(--d-base) var(--e-out); }
  .v3 .pi-bar { display: flex; gap: 8px; overflow-x: auto; padding: 8px var(--q-inset); background: var(--of-stage); }
}
@container pi (min-width: 560px) { .v3 .pi-stage { --of-fig-scale: 2; } }
@container pi (min-width: 960px) { .v3 .pi-body { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-7); align-items: start; }
  .v3 .pi-sheet.pi-rail[open] { position: static; width: auto; max-height: none; overflow: visible; } }