/* Website-only additions around the synced app UI. */
html,body{background:#14161A;color-scheme:dark}
html.dg-paused *,html.dg-paused *:before,html.dg-paused *:after{animation-play-state:paused!important}
/* Website-only PLAY affordance (the desktop app has none): a slow light sheen every ~4 s while idle,
   compositor-only (transform/opacity), gone after the first interaction, off for reduced motion. */
.cta{position:relative}
.cta:after{content:"";position:absolute;inset:0 auto 0 0;width:38%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,#ffffff70 50%,transparent);transform:translateX(-120%) skewX(-18deg);will-change:transform}
html:not(.dg-touched):not(.dg-paused) .cta:not(.on):not(.cn):after{animation:dgSheen 4.2s cubic-bezier(.45,0,.2,1) 1.4s infinite}
@keyframes dgSheen{0%{transform:translateX(-120%) skewX(-18deg);opacity:0}6%{opacity:1}30%{transform:translateX(320%) skewX(-18deg);opacity:1}31%,100%{opacity:0;transform:translateX(320%) skewX(-18deg)}}
.cta svg{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cta:hover svg{transform:rotate(-12deg) scale(1.06)}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{outline:2px solid #fff;outline-offset:-6px}
@media (prefers-reduced-motion:reduce){.cta:after{display:none}.cta svg{transition:none}}