/* The Closet Builder's studio host and a few shared controls (2026-09-28).
   The site's own type and palette only (theme.css): Fraunces over Inter,
   brand clay, hairlines; a selected thing is brand-deep on brand-soft. */

/* ---------- the studio */
.st-host{position:relative;overflow:hidden}
.st-host canvas{display:block}

/* ---------- shared bits */
.mk-seg{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:rgba(var(--hair-rgb),.07)}
.mk-seg button{border:0;background:none;padding:8px 14px;border-radius:8px;font:600 13px var(--font-sans);color:var(--ink-soft);cursor:pointer}
.mk-seg button:hover{color:var(--ink)}
.mk-seg button.on{background:var(--bg-card);color:var(--brand-deep);box-shadow:0 1px 3px rgba(var(--shade-rgb),.14)}
.mk-in{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;background:var(--surface-input);overflow:hidden}
.mk-in:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.1)}
.mk-in input{border:0;background:none;min-width:0;width:100%;padding:10px 12px;font:600 15px var(--font-sans);color:var(--ink);text-align:center}
.mk-in input:focus{outline:0}
.mk-in button{border:0;background:none;padding:0 12px;align-self:stretch;font:600 16px var(--font-sans);color:var(--ink-soft);cursor:pointer}
.mk-in button:hover{color:var(--brand-deep);background:var(--line-soft,rgba(0,0,0,.03))}
.mk-toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:950;padding:12px 18px;border-radius:12px;
  background:var(--ink);color:var(--bg);font:500 14px var(--font-sans);transition:.25s;pointer-events:none}
.mk-toast.show{opacity:1;transform:translateX(-50%)}
.mk-toast a{color:inherit;font-weight:700}