.surface-icon{--glyph-accent:var(--icon-blue);--glyph-wash:var(--icon-blue-surface);width:36px;height:36px;color:var(--icon-ink);background:var(--glyph-wash);border:1px solid color-mix(in oklch, var(--glyph-accent) 18%, transparent);border-radius:11px;flex:none;justify-content:center;align-items:center;display:inline-flex}.surface-icon[data-tone=violet]{--glyph-accent:var(--icon-violet);--glyph-wash:var(--icon-violet-surface)}.surface-icon[data-tone=slate]{--glyph-accent:var(--icon-slate);--glyph-wash:var(--icon-slate-surface)}.surface-icon__glyph{flex-shrink:0;width:20px;height:20px}.surface-icon__accent{stroke:var(--glyph-accent)}.surface-icon__wash{fill:var(--glyph-wash)}.surface-icon__back{opacity:.6}.surface-icon[data-size=sm]{border-radius:8px;width:28px;height:28px}.surface-icon[data-size=sm] svg{width:16px;height:16px}.surface-icon[data-size=lg]{border-radius:13px;width:44px;height:44px}.surface-icon[data-size=lg] svg{width:24px;height:24px}.surface-icon[data-size=xl]{border-radius:15px;width:52px;height:52px}.surface-icon[data-size=xl] svg{width:28px;height:28px}.surface-icon[data-variant=plain]{background:0 0;border:0;border-radius:0;width:auto;height:auto}a:is(:hover,:focus-visible)>.surface-icon .surface-icon__detail,button:is(:hover,:focus-visible)>.surface-icon .surface-icon__detail{transform-box:fill-box;transform-origin:50%;animation:.36s ease-out surface-detail}@keyframes surface-detail{40%{transform:translateY(-1px)}}@media (prefers-reduced-motion:reduce){.surface-icon *{animation:none!important}}.motion-off .surface-icon *{animation:none!important}