@layer components{.dsd{text-align:left;width:100%;max-width:1080px;margin-inline:auto}.dsd-looks{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-bottom:16px;display:flex}.dsd-looks-label{color:var(--mk-ink-3);font-size:var(--mk-text-small);margin-right:4px}.dsd-look{border:1px solid var(--mk-rule);background:var(--mk-surface);color:var(--mk-ink-2);font:inherit;cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:4px 12px 4px 4px;font-size:13.5px;display:inline-flex}.dsd-look[aria-checked=true]{border-color:var(--mk-accent);color:var(--mk-ink);box-shadow:0 0 0 1px var(--mk-accent)}.dsd-look:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px}.dsd-look-swatch{border-radius:999px;justify-content:center;align-items:center;width:28px;height:22px;font-size:11px;font-weight:700;display:inline-flex;box-shadow:inset 0 0 0 1px #0000001f}.dsd-frame{box-shadow:0 0 0 1px var(--mk-rule), var(--mk-shadow-raised)}.dsd-scroll{height:min(660px,78vh);min-height:460px;overflow-y:auto}.dsd-scroll:focus-visible{outline:2px solid var(--mk-accent);outline-offset:-2px}.dsd-note{text-align:center;color:var(--mk-ink-3);font-size:var(--mk-text-small);margin-top:12px}}