.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{inset:var(--mo-gap);z-index:20;pointer-events:none;border-radius:var(--r-lg,16px);position:absolute;overflow:clip}.mo-io__stage>.mo-io__cover{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;position:absolute;inset:0}.mo-io__stage>.mo-io__ring{left:var(--mo-cx);top:var(--mo-cy);width:calc(var(--mo-r) * 2);height:calc(var(--mo-r) * 2);border:1px solid var(--accent);will-change:width, height;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.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}}