.mo-io{--mo-r: 0px;--mo-cx: 50%;--mo-cy: 50%;--mo-gap: clamp(8px, 1.2vw, 18px);position:relative;overflow:clip}.mo-io>.mo-io__stage{position:absolute;inset:var(--mo-gap);z-index:20;pointer-events:none;overflow:clip;border-radius:var(--r-lg, 16px)}.mo-io__stage>.mo-io__cover{position:absolute;inset:0;background:var(--mo-from, var(--p-bg, var(--bg)));-webkit-mask-image:radial-gradient(circle at var(--mo-cx) var(--mo-cy),transparent calc(var(--mo-r) - .5px),#000 var(--mo-r));mask-image:radial-gradient(circle at var(--mo-cx) var(--mo-cy),transparent calc(var(--mo-r) - .5px),#000 var(--mo-r));will-change:mask-image}.mo-io__stage>.mo-io__ring{position:absolute;left:var(--mo-cx);top:var(--mo-cy);width:calc(var(--mo-r) * 2);height:calc(var(--mo-r) * 2);transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--accent);will-change:width,height}.mo-io--surface{--mo-from: var(--p-surface, var(--surface))}.mo-io--inverse{--mo-from: var(--p-inv-bg, var(--bg))}.mo-io.is-open>.mo-io__stage{display:none}@media (prefers-reduced-motion: reduce){.mo-io>.mo-io__stage{display:none}}