/* /embed/'s tabs and the address card's maker (card-maker.js); the rest of the form is maker.css's .bm */
.cm-tabs[hidden]{display:none}
.cm-tabs{display:flex;gap:4px;margin-top:32px;border-bottom:1px solid var(--rule)}
.cm-tabs button{min-height:44px;padding:0 16px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;font:600 var(--step-0)/1 var(--f-body);color:var(--ink-2);cursor:pointer}
.cm-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}
@media (hover:hover){.cm-tabs button:hover{color:var(--ink);background:var(--tint)}}
.cm-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cm-tabs + [role=tabpanel] .bm,#panel-card .bm{margin-top:32px}
.cm-h{margin-top:48px}
.cm-intro{margin:0 0 24px;max-width:var(--measure)}
.cm-ll{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:26rem}
.bm input[type=text]{font:inherit;min-height:44px;padding:0 12px;border:1px solid var(--ink);border-radius:var(--r);width:100%;max-width:26rem;background:var(--paper);color:var(--ink)}
.bm input[type=text]:focus-visible,.bm select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cm-frame{padding:20px 16px;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.cm-frame iframe{display:block;max-width:100%;border:0}
/* the preview stands on a page like a host's: white for light, dark for dark, a tinted page for "your page's background" */
.cm-frame.light{background:#fff}
.cm-frame.dark{background:#16161a}
.cm-frame.host{background:#f6f5f1}