.md-card{isolation:isolate;border-radius:var(--md-sys-shape-corner-medium);position:relative;overflow:hidden}.md-card:before{content:"";z-index:0;pointer-events:none;border-radius:inherit;background-color:var(--md-sys-color-on-surface);opacity:0;transition:opacity var(--md-sys-motion-duration-extra-short4) var(--md-sys-motion-easing-standard);position:absolute;inset:0}.md-card>.salty-ripple{z-index:0}.md-card>.salty-ripple .salty-ripple-surface:after{width:var(--card-ripple-size);height:var(--card-ripple-size)}.md-card>:not(.salty-ripple){z-index:1;position:relative}.md-card[data-variant=elevated]{background-color:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);box-shadow:var(--md-sys-elevation-1)}.md-card[data-variant=filled]{background-color:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface)}.md-card[data-variant=outlined]{border:1px solid var(--md-sys-color-outline-variant);background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}.md-card[data-interactive]{cursor:pointer;transition:box-shadow var(--md-sys-motion-duration-extra-short4) var(--md-sys-motion-easing-standard)}.md-card[data-interactive]:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}@media (hover:hover) and (pointer:fine){.md-card[data-interactive][data-ripple]:hover:before{opacity:var(--md-sys-state-hover-opacity)}}.md-card[data-interactive][data-ripple][data-variant=elevated]:hover{box-shadow:none}.md-card[data-interactive][data-ripple][data-variant=filled]:hover,.md-card[data-interactive][data-ripple][data-variant=outlined]:hover{box-shadow:var(--md-sys-elevation-1)}.md-card[data-interactive][data-ripple]:not([data-nested-interactive])[data-variant=elevated]:active{box-shadow:var(--md-sys-elevation-2)}.md-card[data-interactive][data-ripple]:not([data-nested-interactive])[data-variant=filled]:active,.md-card[data-interactive][data-ripple]:not([data-nested-interactive])[data-variant=outlined]:active{box-shadow:none}.md-card[data-interactive][data-ripple]:not([data-nested-interactive]):active{background-color:color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-opacity), transparent)}.md-card[data-nested-interactive]>.salty-ripple .salty-ripple-surface.--press:after{opacity:0}.md-card[data-disabled]{pointer-events:none;opacity:var(--md-sys-state-disabled-opacity)}