.offline-sync{--sync-ink:hsl(var(--demo-warning-ink));font-size:11px}.offline-sync[data-connected=true]{--sync-ink:hsl(var(--demo-success-ink))}.offline-sync-route{align-items:center;gap:20px;margin-bottom:16px;display:flex}.offline-sync-route>span{flex-direction:column;flex-shrink:0;align-items:center;gap:8px;display:flex}.offline-sync-route small{color:hsl(var(--muted-foreground));font-size:10px}.offline-sync-route>svg{flex:1;min-width:0;height:24px}.offline-sync-route>svg path{stroke:hsl(var(--border));stroke-width:1.5px}.offline-sync-route .offline-sync-trace{stroke:var(--sync-ink);stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1)}.offline-sync[data-connected=true] .offline-sync-trace{stroke-dashoffset:0}.offline-sync-status{color:var(--sync-ink);align-items:center;gap:8px;min-height:32px;display:flex}.offline-sync-records>div{border-bottom:1px solid hsl(var(--border));justify-content:space-between;gap:12px;padding:9px 0;display:flex}.offline-sync-records dd{color:hsl(var(--demo-success-ink));align-items:center;gap:6px;display:flex}.offline-sync>button{min-height:42px;color:hsl(var(--demo-info-ink));align-items:center;gap:8px;margin-top:5px;display:flex}.offline-sync>button:hover{text-underline-offset:4px;text-decoration:underline}.tablet-feature:has(.offline-sync) .story-art{-webkit-mask-image:none;mask-image:none}@media (prefers-reduced-motion:reduce){.offline-sync-trace{transition:none!important}}