@scope(md-button){:scope{--md-button-bg:var(--color-surface-default);--md-button-bg-hover:var(--color-surface-lowered);--md-button-font-size:var(--text-base);--md-button-padding-r:var(--space-md);--md-button-padding-t:var(--space-2xs);--md-button-padding-l:var(--space-md);--md-button-padding-b:var(--space-2xs);--md-button-radius:10px;--md-button-radius-square:4px;--md-button-shadow:var(--shadow-chonk);--md-button-border-style:var(--border-style);display:inline-block}:scope[variant=primary]{--md-button-bg:var(--color-primary-fill-quiet);--md-button-bg-hover:var(--color-primary-fill-normal)}:scope[variant=secondary]{--md-button-bg:var(--color-secondary-fill-quiet);--md-button-bg-hover:var(--color-secondary-fill-normal)}:scope[size=md]{--md-button-font-size:var(--text-lg);--md-button-padding-r:var(--space-lg);--md-button-padding-t:var(--space-xs);--md-button-padding-l:var(--space-lg);--md-button-padding-b:var(--space-xs);--md-button-radius:12px;--md-button-shadow:var(--shadow-chonker)}:scope[size=lg]{--md-button-font-size:var(--text-2xl);--md-button-padding-r:var(--space-lg);--md-button-padding-t:var(--space-xs);--md-button-padding-l:var(--space-lg);--md-button-padding-b:var(--space-xs);--md-button-radius:12px;--md-button-shadow:var(--shadow-chonker)}:scope[variant=ghost]{--md-button-bg:transparent;--md-button-shadow:none;--md-button-bg-hover:var(--color-neutral-fill-normal);--md-button-border-style:none}:scope[lefticon]{--md-button-padding-l:var(--space-xs);--md-button-padding-r:var(--space-sm)}:scope[righticon]{--md-button-padding-r:var(--space-xs)}:scope[size=md][lefticon]{--md-button-padding-l:var(--space-sm);--md-button-padding-r:var(--space-md)}.md-button{justify-content:center;gap:var(--space-2xs);-webkit-appearance:none;appearance:none;border-radius:var(--md-button-radius);padding-top:var(--md-button-padding-t);padding-right:var(--md-button-padding-r);padding-bottom:var(--md-button-padding-b);padding-left:var(--md-button-padding-l);font-weight:500;line-height:1.3;font-size:var(--md-button-font-size);border-style:var(--md-button-border-style);border-width:var(--border-width-thick);border-color:var(--color-border-loud);background:var(--md-button-bg);box-shadow:var(--md-button-shadow);text-decoration:none;transition:all .2s;display:inline-flex;overflow:hidden;[square] &{aspect-ratio:1;padding:0;padding:var(--space-3xs);border-radius:--md-button-radius-square;font-size:24px}&:hover{background:var(--md-button-bg-hover)}&:focus-visible{box-shadow:none;background:var(--md-button-bg-hover)}&:active{box-shadow:none;scale:.98}& .lefticon,& .righticon{justify-content:center;align-items:center;display:flex}& .righticon{transition:all .4s}&:hover .righticon{transform:translate(3px)}[wibble] &:hover{rotate:.8deg;scale:1.05}}}@scope(md-callout){:scope{display:inline-block}.md-callout{--md-callout-bg:var(--color-surface-default);padding:4px var(--space-sm) 4px;border-width:var(--border-width-thick);border-style:var(--border-style);align-items:center;gap:var(--space-2xs);background:var(--md-callout-bg);font-weight:540;font-size:var(--text-sm);text-decoration:none;display:flex;& span{background:var(--color-black);color:#fff;border-radius:999px;padding:3px 10px}& .fa-duotone{--fa-primary-color:inherit;--fa-secondary-color:white;font-size:1.1em}:scope[href] &:hover{background:var(--color-primary-fill-normal)}}:scope[variant=primary]{--md-callout-bg:var(--color-primary-fill-quiet)}:scope[variant=secondary]{--md-callout-bg:var(--color-secondary-fill-quiet)}:scope[badge] .md-callout{padding-left:4px}}@scope(md-note){:scope{display:block}.md-note{padding:var(--space-md);align-items:center;gap:var(--space-md);width:100%;font-size:var(--size-step-2);border:2px solid;border-radius:16px;display:flex;& .note-icon-container{padding:var(--space-2xs);background:var(--color-primary-fill-quiet);aspect-ratio:1;border:2px solid;border-radius:999px;align-items:center;height:fit-content;display:flex;& i{font-size:32px}}}:scope[variant=primary]{--md-note-bg:red}}