:root{--sac-radius:12px;--sac-spacing:18px;--sac-border:#d9e0e7;--sac-bg:#fff;--sac-text:#17212b;--sac-muted:#5d6b78;--sac-tone-success:#087a4b;--sac-tone-primary:#0b4a6f;--sac-tone-info:#2271b1;--sac-tone-warning:#b7791f;--sac-tone-neutral:#646970;--sac-tone-purple:#7b4b94}
.sac-component{--sac-tone:var(--sac-tone-neutral);margin-block:1.4rem;padding:var(--sac-spacing);border:1px solid var(--sac-border);border-inline-start:4px solid var(--sac-tone);border-radius:var(--sac-radius);background:var(--sac-bg);color:var(--sac-text);box-sizing:border-box;text-align:start;unicode-bidi:isolate}
.sac-component.sac-dir--rtl{direction:rtl}.sac-component.sac-dir--ltr{direction:ltr}
.sac-tone--success{--sac-tone:var(--sac-tone-success)}.sac-tone--primary{--sac-tone:var(--sac-tone-primary)}.sac-tone--info{--sac-tone:var(--sac-tone-info)}.sac-tone--warning{--sac-tone:var(--sac-tone-warning)}.sac-tone--purple{--sac-tone:var(--sac-tone-purple)}
.sac-component__header{display:flex;align-items:center;gap:.6rem;margin-block-end:.65rem;color:var(--sac-tone)}
.sac-component__icon{display:inline-grid;place-items:center;inline-size:1.7rem;block-size:1.7rem;flex:0 0 1.7rem;border-radius:999px;background:color-mix(in srgb,var(--sac-tone) 12%,transparent);color:var(--sac-tone)}
.sac-component__icon svg{inline-size:1rem;block-size:1rem}.sac-component__title{margin:0!important;font:inherit;font-weight:750;color:inherit;line-height:1.4;text-align:start!important}.sac-component__body{line-height:1.8}.sac-component__body p{margin-block:.65rem 0!important;margin-inline:0!important}.sac-component__body>:first-child{margin-block-start:0!important}.sac-component__body>:last-child{margin-block-end:0!important}
/* Themes style article lists with physical/negative margins, offsets, flex list items and li::before dots
   that land on our border line. Inside a component we first erase every theme rule on lists
   (all:revert → browser defaults), then apply ours. ":not(#sac-i)" adds ID-level specificity, so these
   rules beat theme selectors even when the theme uses !important. #sac-i never exists in the page. */
.sac-component:not(#sac-i){padding:var(--sac-spacing)!important;border-inline-start:4px solid var(--sac-tone)!important;text-align:start!important}
.sac-component:not(#sac-i) .sac-component__body{margin:0!important;padding:0!important;position:static!important;transform:none!important}
.sac-component:not(#sac-i) .sac-component__body :is(p,li,div,blockquote){text-align:start!important;text-indent:0!important}
.sac-component:not(#sac-i) .sac-component__body :is(ul,ol,li),.sac-component:not(#sac-i) .sac-component__body li::before,.sac-component:not(#sac-i) .sac-component__body li::after{all:revert!important}
.sac-component:not(#sac-i) .sac-component__body :is(ul,ol){margin:.35rem 0 0!important;padding:0!important;padding-inline-start:1.6em!important;list-style-position:outside!important}
.sac-component:not(#sac-i) .sac-component__body ul{list-style-type:disc!important}.sac-component:not(#sac-i) .sac-component__body ol{list-style-type:decimal!important}
.sac-component:not(#sac-i) .sac-component__body li{display:list-item!important;margin:.35rem 0 0!important;padding:0!important;text-align:start!important}
.sac-component:not(#sac-i) .sac-component__body li::before,.sac-component:not(#sac-i) .sac-component__body li::after{content:none!important;display:none!important}
.sac-component:not(#sac-i) .sac-component__body li::marker{color:var(--sac-tone)!important}
.sac-component:not(#sac-i) .sac-component__body blockquote{margin-inline:0!important;padding-inline:1em 0!important;border-inline-start:3px solid var(--sac-border)}
.sac-style--soft{background:color-mix(in srgb,var(--sac-tone) 6%,#fff);border-color:color-mix(in srgb,var(--sac-tone) 25%,#e5e7eb)}.sac-style--minimal{background:transparent;border-block:0;border-inline-end:0;border-radius:0}.sac-style--bordered{background:transparent;border:2px solid color-mix(in srgb,var(--sac-tone) 35%,#d9e0e7)}
.sac-density--compact{--sac-spacing:12px}.sac-density--spacious{--sac-spacing:24px}