/* digotech/globe: square stage with a soft brand glow behind the canvas. */
.dg-globe{
  --dg-globe-w: 560px;
  --dg-globe-w-s: 320px;
  --dg-globe-fade: 900ms;
  --dg-globe-base: var(--paper); /* globe surface colour, read by view.js (plain colour tokens only: the canvas parses it) */
  position:relative;isolation:isolate;width:min(var(--dg-globe-w),100%);aspect-ratio:1;justify-self:center;touch-action:pan-y
}
:root:is([data-mode="dark"],[data-mode="moon"]) .dg-globe{--dg-globe-base:var(--rule)}
.dg-globe::before{content:"";position:absolute;inset:12%;z-index:-1;border-radius:50%;background:radial-gradient(circle, var(--accent-tint), transparent 70%)} /* ds-ok: z-index -1 = behind the canvas, inside the wrapper's own stack (isolation) */
.dg-globe canvas{display:block;width:100%;height:100%;cursor:grab;opacity:0;transition:opacity var(--dg-globe-fade) var(--ease-out)}
.dg-globe canvas.is-on{opacity:1}
.dg-globe canvas:active{cursor:grabbing}
@media (max-width: 767px){
  .dg-globe{width:min(var(--dg-globe-w-s),100%);margin-inline:auto}
}
@media (prefers-reduced-motion: reduce){
  .dg-globe canvas{transition:none}
}