:root {
  --xo-brand-red: #ff2d55;
  --xo-brand-orange: #ff8a00;
  --xo-brand-yellow: #ffe600;
  --xo-brand-green: #36f17a;
  --xo-brand-cyan: #20d9ff;
  --xo-brand-blue: #5268ff;
  --xo-brand-magenta: #e83dff;
  --xo-brand-flow-duration: 2.8s;
  --xo-brand-draw-duration: 1.25s;
}

xo-brand-mark { display:inline-block;width:100%;max-width:100%;aspect-ratio:853/542;color:#000;line-height:0;overflow:visible }
xo-brand-mark>svg { display:block;width:100%;height:100%;overflow:visible }
xo-brand-mark .xo-brand-master-shape,xo-brand-mark .xo-brand-tutorial-shape { shape-rendering:geometricPrecision }
xo-brand-mark[variant="tutorial"] .xo-brand-draw-guide { fill:none;stroke:#fff;stroke-width:112;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1 }

.xo-first-contact.is-brand xo-brand-mark[variant="tutorial"] .xo-brand-draw-guide,
.xo-first-contact.is-ready xo-brand-mark[variant="tutorial"] .xo-brand-draw-guide,
xo-brand-mark[variant="tutorial"][data-draw="true"] .xo-brand-draw-guide { animation:xo-brand-draw var(--xo-brand-draw-duration) cubic-bezier(.35,0,.2,1) forwards }

.xo-brand>xo-brand-mark,.xo-community-brand>xo-brand-mark,.xo-context-brand>xo-brand-mark,.xo-setup-brand>xo-brand-mark { flex:0 0 auto;width:42px;height:42px }
.xo-corner-link>xo-brand-mark { width:100%;height:100% }
.xo-record-center>xo-brand-mark { width:100%;filter:drop-shadow(0 0 calc(12px + var(--charge)*24px) rgba(168,85,247,.7)) }
.xo-landing-mark>xo-brand-mark { position:relative;z-index:2;width:58%;filter:drop-shadow(0 0 28px #a855f766) }
.xo-first-contact-brand { top:28%;width:min(38vw,360px) }
.xo-first-contact-brand>xo-brand-mark { width:100%;height:auto }

@keyframes xo-brand-draw { from { stroke-dashoffset:1 } to { stroke-dashoffset:0 } }
@media (prefers-reduced-motion:reduce) {
  xo-brand-mark[variant="tutorial"] .xo-brand-draw-guide { animation:none!important;stroke-dashoffset:0 }
}

@media (max-width:620px) {
  .xo-first-contact-brand { top:27%;width:min(76vw,330px) }
}