.mbd { position: relative; display: grid; place-items: center; width: 100%; max-width: 340px; aspect-ratio: 340 / 228; color: inherit; }
.mbd::before { content: ""; position: absolute; inset: 8% 12% 16%; border-radius: 50%; background: var(--mbd-glow, none); filter: blur(34px); pointer-events: none; }
.mbd svg.mbd-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mbd-frame .l { fill: none; stroke: var(--mbd-line, color-mix(in srgb, currentColor 55%, transparent)); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mbd-frame .s { fill: var(--mbd-screen, transparent); stroke: var(--mbd-line, color-mix(in srgb, currentColor 55%, transparent)); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.mbd-frame .f { fill: none; stroke: var(--mbd-line, color-mix(in srgb, currentColor 55%, transparent)); stroke-width: 1; opacity: .45; vector-effect: non-scaling-stroke; }
.mbd-slot { position: absolute; left: 50%; top: var(--mbd-slot-y, 35%); transform: translate(-50%, -50%); display: grid; place-items: center; }