.mf-demo{margin-bottom:100px;padding-bottom:70px;border-bottom:1px solid #d6e2ec}.mf-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}.mf-heading h2{font-size:clamp(36px,5vw,70px);line-height:1.06;margin:15px 0 0}.mf-heading>p{font-size:16px;color:#638099;line-height:1.8;max-width:370px}.mf-stage{max-width:1000px;aspect-ratio:800/520;margin:auto;position:relative;overflow:hidden;background:#eaf1f7}.mf-stage canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}.mf-stage canvas:active{cursor:grabbing}.mf-stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.mf-stage ellipse{fill:none;stroke:#f1f8ff;stroke-width:4;filter:drop-shadow(0 2px 4px #122c45)}.mf-zones[hidden]{display:none}.mf-zones path{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:7 6}.mf-zones text{font:11px Arial;letter-spacing:2px;fill:white;text-anchor:middle;paint-order:stroke;stroke:#18324c;stroke-width:3}.mf-loading{position:absolute;top:45%;left:35%;color:#244b68}.mf-loading[hidden]{display:none}.mf-drag-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:#102f48bb;color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;pointer-events:none}.mf-options{display:grid;grid-template-columns:repeat(3,1fr);max-width:1000px;margin:22px auto 0;gap:12px}.mf-options button{font:inherit;text-align:left;border:1px solid #d4e2eb;background:#f5f9fc;color:#173c55;padding:20px 25px;cursor:pointer;transition:background .25s,color .25s}.mf-options button[aria-pressed=true]{background:#173c55;color:white}.mf-options small,.mf-options strong,.mf-options span{display:block}.mf-options small{font-size:10px;letter-spacing:.16em;opacity:.7}.mf-options strong{font-size:26px;font-weight:400;margin:10px 0 5px}.mf-options span{font-size:13px;opacity:.8}.mf-controls{max-width:1000px;margin:22px auto;display:flex;gap:22px;align-items:center;flex-wrap:wrap}.mf-controls label{display:flex;align-items:center;gap:10px;font-size:12px;color:#617e94;margin-right:auto}.mf-controls input{width:160px;accent-color:#21577f}.mf-controls button{font:inherit;font-size:13px;color:#21577f;border:0;border-bottom:1px solid #91aec2;padding:8px 0;background:none;cursor:pointer}.mf-status,.mf-note{max-width:1000px;margin:12px auto;font-size:13px;color:#57748b}.mf-note{font-size:11px;line-height:1.7;color:#7b91a2}.mf-demo button:focus-visible,.mf-demo input:focus-visible{outline:2px solid #28689c;outline-offset:4px}@media(max-width:650px){.mf-heading{display:block}.mf-heading>p{font-size:14px}.mf-options{gap:6px}.mf-options button{padding:14px 10px}.mf-options strong{font-size:20px}.mf-options span{font-size:11px}.mf-controls{gap:16px}.mf-controls label{width:100%;justify-content:center}.mf-controls input{flex:1}.mf-demo{margin-bottom:55px;padding-bottom:35px}}

.mf-options{grid-template-columns:repeat(6,minmax(0,1fr))}.mf-options button{padding:18px 12px}.mf-options strong{font-size:20px}@media(max-width:800px){.mf-options{grid-template-columns:repeat(3,minmax(0,1fr))}.mf-options strong{font-size:18px}}

/* Full-bleed daylight editorial demonstration. */
.mf-demo{padding-bottom:50px}.mf-stage{width:100vw;max-width:none;margin-left:calc(50% - 50vw);aspect-ratio:800/520;background:#edf3f7}.mf-stage ellipse{stroke-width:1;stroke:#ffffffb0;filter:none;opacity:0;transition:opacity .25s}.mf-zones-on .mf-stage ellipse{opacity:1}.mf-zones path{stroke-width:1;stroke-dasharray:5 7}.mf-drag-hint{bottom:24px;background:#f8fbf0df;color:#173c55;font-size:11px;letter-spacing:.06em;padding:10px 22px;border-radius:2px;backdrop-filter:blur(8px)}.mf-options{max-width:none;gap:0;margin-top:0;border-bottom:1px solid #d6e2eb}.mf-options button{border:0;border-bottom:2px solid transparent;background:#fff;padding:24px 18px;position:relative}.mf-options button+button{border-left:1px solid #e3eaf0}.mf-options button[aria-pressed=true]{background:#edf4f9;color:#173c55;border-bottom-color:#205b88}.mf-options small{font-size:9px;letter-spacing:.18em;color:#7290a6}.mf-options strong{font-size:23px;margin-top:10px}.mf-controls,.mf-note,.mf-status{max-width:none}.mf-controls{margin-top:26px}.mf-heading{margin-bottom:38px}.mf-stage canvas{image-rendering:auto}@media(max-width:800px){.mf-options strong{font-size:18px}.mf-options button{padding:16px 10px}.mf-stage{aspect-ratio:800/520}.mf-drag-hint{bottom:8px;font-size:9px;padding:6px 12px}}
/* Quiet product selector with a restrained active marker. */
.mf-options{gap:0;padding:12px 0;background:#fff;border-top:1px solid #e0e9ef;border-bottom:1px solid #d6e2eb}.mf-options button{padding:18px 14px 22px;text-align:center;background:transparent;border:0;transition:color .25s,background .25s}.mf-options button+button{border-left:0}.mf-options small{font-size:9px;letter-spacing:.2em;opacity:.6}.mf-options strong{font-size:22px;letter-spacing:-.025em;margin:9px 0 0}.mf-options button:after{content:'';position:absolute;bottom:2px;left:28%;right:28%;height:2px;background:#234e6b;transform:scaleX(0);transition:transform .3s}.mf-options button[aria-pressed=true]{background:linear-gradient(180deg,#fff,#f1f6fa);border:0;color:#12334b}.mf-options button[aria-pressed=true]:after{transform:scaleX(1)}.mf-options button[aria-pressed=true] small{opacity:1;color:#356485}.mf-options button:hover{background:#f7fafc}.mf-options button:focus-visible{outline-offset:-4px}@media(max-width:800px){.mf-options{row-gap:4px;padding:8px 0}.mf-options button{padding:12px 8px 18px}.mf-options strong{font-size:18px}}@media(prefers-reduced-motion:reduce){.mf-options button,.mf-options button:after{transition:none}}

.mf-stage{width:var(--mf-width,100%);margin-left:calc((100% - var(--mf-width,100%))/2)}