.sd-md{--bg:#1d1d1d;--fg:#f7f7f7;--mute:#8e8e8e;--line:#ffffff17;--tile:#2a2a2a;--tile-fg:#ececec;justify-content:center;align-items:flex-end;width:min(100%,340px);height:120px;display:flex}.sd-md[data-fill=light]{--bg:#fff;--fg:#121212;--mute:#6f6f6f;--line:#00000014;--tile:#f1f1f1;--tile-fg:#1a1a1a}.sd-md__row{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);border-radius:20px;align-items:flex-end;gap:6px;padding:8px 8px 12px;display:flex}.sd-md__slot{flex:none;justify-content:center;transition:width .14s cubic-bezier(.2,1,.3,1),height .14s cubic-bezier(.2,1,.3,1);display:flex;position:relative}.sd-md__btn{background:var(--tile);width:100%;height:100%;color:var(--tile-fg);box-shadow:inset 0 0 0 1px var(--line);border-radius:28%;place-items:center;display:grid}.sd-md__btn svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:46%;height:46%}.sd-md__btn[aria-pressed=true]{background:var(--fg);color:var(--bg)}.sd-md__btn:active{transform:scale(.92)}.sd-md__btn:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.sd-md__dot{background:var(--fg);opacity:0;border-radius:99px;width:4px;height:4px;transition:opacity .2s;position:absolute;bottom:-8px}.sd-md__dot[data-on]{opacity:1}.sd-md__tip{background:var(--fg);color:var(--bg);white-space:nowrap;pointer-events:none;border-radius:8px;padding:4px 9px;font-size:12px;font-weight:500;animation:.16s ease-out sd-md-tip;position:absolute;bottom:calc(100% + 8px)}@keyframes sd-md-tip{0%{opacity:0;transform:translateY(3px)}}@media (prefers-reduced-motion:reduce){.sd-md *{transition:none!important;animation:none!important}}