.og{width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:24px}.og__stage{width:100%;aspect-ratio:1 / 1;position:relative;cursor:grab}.og__stage:active{cursor:grabbing}.og__canvas{display:block;width:100%;height:100%;touch-action:pan-y;clip-path:circle(calc(50% - 12px))}.og__canvas[data-touch-interaction=true]{touch-action:none}.og__marker{position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;background:var(--ink-strong);border:1px solid var(--surface);color:var(--ink-inverse);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;will-change:transform,opacity;box-shadow:0 0 0 1px color-mix(in oklab,var(--ink-strong) 12%,transparent),0 6px 18px color-mix(in oklab,var(--ink-strong) 22%,transparent);transition:width var(--duration-base) var(--ease-out),height var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-out)}.og__marker[data-visible=false]{opacity:0}.og__marker[data-visible=true]{opacity:1}.og__marker-icon{display:block}.og__marker:after{content:"";position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--ink-strong) 28%,transparent) 0%,transparent 65%);z-index:-1;opacity:.35;transition:opacity var(--duration-base) var(--ease-out),inset var(--duration-base) var(--ease-out);pointer-events:none}.og__marker[data-spot=true]:after{opacity:.7;inset:-22px}.og__marker[data-active=true]:after{opacity:1;inset:-28px}.og__marker:before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--ink-strong);pointer-events:none;opacity:0}.og__marker[data-active=true]:before{animation:og-marker-pulse 2.4s ease-out infinite}@keyframes og-marker-pulse{0%{transform:scale(1);opacity:.7}to{transform:scale(2.6);opacity:0}}.og__marker[data-active=true]{box-shadow:0 0 0 1px color-mix(in oklab,var(--ink-strong) 16%,transparent),0 10px 28px color-mix(in oklab,var(--ink-strong) 36%,transparent)}.og__marker[data-depth-band=back][data-active=true]:before{animation:none}.og__caption{margin:0;min-height:3em;text-align:center;font-family:var(--font-sans);font-size:.875rem;line-height:1.5;color:var(--ink-2);max-width:38em;margin-inline:auto}.og__pins{list-style:none;width:100%;max-width:430px;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr;gap:8px}@media(min-width:480px){.og__pins{grid-template-columns:repeat(2,minmax(0,1fr))}.og__pin-item:first-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 4px)}}.og__pin-item{display:flex}.og__pin{flex:1;display:inline-flex;align-items:center;gap:10px;padding:10px 12px;text-decoration:none;background:var(--surface-2);border:1px solid var(--border-hairline);border-radius:4px;color:var(--ink-2);font-family:var(--font-mono);font-size:.6875rem;font-weight:500;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;text-align:left;cursor:pointer;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),background-color var(--duration-base) var(--ease-out)}.og__pin:hover,.og__pin:focus-visible,.og__pin--active{color:var(--ink-strong);border-color:var(--ink-strong);background:var(--surface);outline:none}.og__pin--spot{color:var(--ink-strong);border-color:var(--ink-2);background:var(--surface)}.og__pin:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.og__pin-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;background:var(--surface);border:1px solid var(--border-hairline);color:var(--ink-2);flex-shrink:0;transition:background-color var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out)}.og__pin:hover .og__pin-icon,.og__pin:focus-visible .og__pin-icon,.og__pin--active .og__pin-icon,.og__pin--spot .og__pin-icon{background:var(--ink-strong);border-color:var(--ink-strong);color:var(--ink-inverse)}.og__pin-label{display:inline-flex;align-items:baseline;gap:8px;min-width:0}.og__pin-ordinal{color:var(--ink-3);flex-shrink:0}.og__pin:hover .og__pin-ordinal,.og__pin:focus-visible .og__pin-ordinal,.og__pin--active .og__pin-ordinal,.og__pin--spot .og__pin-ordinal{color:var(--ink-2)}.og__pin-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(prefers-reduced-motion:reduce){.og__marker{transition:opacity var(--duration-base) var(--ease-out)}.og__marker[data-active=true]:before{animation:none}}