/* Scoped Better Bartender resource UI. Source parity:
   backend/ui/demo/tokens.css and backend/ui/magic.css; SIGNUP-MOTION-SYSTEM.md.
   Copy only applicable tokens/selectors. No signup global reset/layout import. */
.bb-resource {
  --bg-0: #0c0e12;
  --bg-1: #12151b;
  --bg-2: #191d25;
  --bg-3: #222733;
  --line-1: rgb(255 255 255 / 6%);
  --line-2: rgb(255 255 255 / 10%);
  --line-3: rgb(255 255 255 / 18%);
  --text-1: #f3f5f8;
  --text-2: #aab3c0;
  --text-3: #707a89;
  --accent: #7faaff;
  --accent-strong: #4d86ff;
  --accent-glow: rgb(127 170 255 / 35%);
  --up: #5ed3a2;
  --down: #f08a7e;
  --attention: #f5b656;
  --critical: #ff6b5e;
  --liq-cocktail: #ff8f66;
  --liq-beer: #f2c85b;
  --liq-wine: #e06a8c;
  --liq-whisky: #e3a25a;
  --liq-agave: #c4db6a;
  --liq-gin: #79d8cc;
  --liq-vodka: #c9dbff;
  --liq-rum: #c98b5e;
  --liq-fizz: #f4e3a1;
  --liq-nolo: #a6e8c3;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --e-1: 0 0 0 1px var(--line-2);
  --e-2: 0 8px 24px rgb(0 0 0 / 35%);
  --e-3: 0 24px 64px rgb(0 0 0 / 50%);
  --font-sans: Geist, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-led: Doto, var(--font-mono);
  --type-meta: 12px;
  --type-label: 13px;
  --type-body: 14px;
  --type-panel: 15px;
  --type-reading: 17px;
  --type-section: 20px;
  --type-title: 28px;
  --type-number: clamp(44px, 3.5vw, 56px);
  --dur-instant: 0ms;
  --dur-micro: 120ms;
  --dur-small: 180ms;
  --dur-medium: 280ms;
  --dur-data: 450ms;
  --dur-ambient: 900ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --z-map: 0;
  --z-map-controls: 10;
  --z-nav: 30;
  --z-popover: 40;
  --z-overlay: 60;
  --z-toast: 80;
  --nav-height: 56px;
  --page-margin: 32px;
  --inspector-width: 380px;
  /* Compatibility names let inherited screens adopt the same palette during each slice. */
  --bg: var(--bg-0);
  --panel: var(--bg-1);
  --control: var(--bg-2);
  --border: var(--line-2);
  --text: var(--text-1);
  --muted: var(--text-2);
  --blue: var(--accent);
  --line: var(--line-1);
  color-scheme: dark;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  background: var(--bg-0);
}
.bb-resource {
  --mg-col: 480px;
  --mg-wide: 1040px;
  --mg-radius: 14px;
  --mg-radius-sm: 10px;
  --mg-field: 52px;
  --mg-panel: rgb(18 21 27 / 72%);
  --mg-panel-solid: var(--bg-1);
  --mg-edge: rgb(255 255 255 / 8%);
  --mg-edge-hi: rgb(255 255 255 / 14%);
  --mg-sheen: linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 0%) 40%);
  --mg-accent-fill: linear-gradient(180deg, #8db4ff 0%, var(--accent-strong) 100%);
  --mg-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --mg-out: var(--ease-out);
  --mg-ok: var(--up);
  --mg-warm: var(--liq-cocktail);
  --mg-amber: var(--liq-whisky);
}
.bb-resource{font-size:17px;background:var(--bg-0);color:var(--text-1);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.bb-resource p,.bb-resource li,.bb-resource dd{color:var(--text-2)}
.bb-resource h1,.bb-resource h2,.bb-resource h3,.bb-resource dt{color:var(--text-1)}
.bb-resource main>h1{font-size:clamp(30px,4.2vw,40px);line-height:1.08;font-weight:620;letter-spacing:-.035em;text-wrap:balance}
.bb-resource .eyebrow,.bb-resource a{color:var(--accent)}
.bb-resource a:hover{color:var(--text-1)}
.bb-resource :focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.bb-workspace{border:1px solid var(--mg-edge);background:var(--mg-sheen),var(--mg-panel-solid);padding:clamp(18px,3vw,30px);border-radius:var(--mg-radius);margin:32px 0 48px;animation:bb-resource-rise 520ms var(--mg-out) both}
.bb-workspace h2{margin-top:0}
.bb-fields{display:grid;align-items:end;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.bb-workspace label{display:grid;gap:8px;font-size:15px;color:var(--text-2)}
.bb-workspace input,.bb-workspace select{font:inherit;font-size:16px;min-height:var(--mg-field);padding:12px 14px;border:1px solid var(--mg-edge-hi);border-radius:var(--mg-radius-sm);background:var(--bg-1);color:var(--text-1);width:100%;box-sizing:border-box;transition:border-color var(--dur-small) var(--mg-out),box-shadow var(--dur-small) var(--mg-out)}
.bb-workspace input:focus,.bb-workspace select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);outline:none}
.bb-workspace button{white-space:nowrap;font:600 14px Geist,Arial,sans-serif;min-height:48px;border:1px solid var(--mg-edge-hi);background:var(--bg-2);color:var(--text-1);border-radius:var(--mg-radius-sm);padding:10px 14px;cursor:pointer;margin:0;transition:transform var(--dur-micro) var(--mg-out),background-color var(--dur-small) var(--mg-out),border-color var(--dur-small) var(--mg-out)}
.bb-workspace button:hover:not(:disabled){background:var(--bg-3);border-color:var(--line-3)}
.bb-workspace button:active:not(:disabled){transform:scale(.98)}
.bb-workspace button:disabled{opacity:.45;cursor:default}
.bb-table-wrap{overflow:auto;border:1px solid var(--mg-edge);border-radius:var(--mg-radius-sm);margin:18px 0}
.bb-table-wrap table{margin:0;font-size:14px;min-width:640px}
.bb-table-wrap thead{background:var(--bg-2)}
.bb-table-wrap th,.bb-table-wrap td{border-color:var(--line-2)}
.bb-table-wrap th{white-space:normal;min-width:110px}
.bb-table-wrap input{min-width:110px}
.bb-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0}
.bb-actions label{max-width:100%;font-size:13px;overflow-wrap:anywhere}
.bb-status{padding:14px 16px;border-left:2px solid var(--accent);background:var(--bg-2);color:var(--text-2)}
.bb-status.bb-error{border-color:var(--down);color:var(--down)}
.bb-results{overflow-wrap:anywhere}
.bb-results dl{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:8px 24px}
.bb-results dt,.bb-results dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line-2)}
.bb-results dd{color:var(--text-1);font-variant-numeric:tabular-nums}
.bb-help{font-size:14px}
.bb-table-section{margin-top:28px}
.bb-resource-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bb-workspace button[type="submit"],
.bb-workspace button[type="submit"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 12px;
  border: 0;
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #08101f;
  background: var(--mg-accent-fill);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 45%),
    inset 0 -1px 0 rgb(0 0 0 / 18%),
    0 1px 2px rgb(0 0 0 / 40%),
    0 8px 24px -8px rgb(77 134 255 / 55%);
  transition:
    transform var(--dur-micro) var(--mg-out),
    box-shadow var(--dur-small) var(--mg-out),
    filter var(--dur-small) var(--mg-out),
    opacity var(--dur-small);
}
.bb-workspace button[type="submit"]::after,
.bb-workspace button[type="submit"]::after {
  /* sheen sweep on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 38%) 48%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
}
.bb-workspace button[type="submit"]:hover:not(:disabled),
.bb-workspace button[type="submit"]:hover:not(:disabled) {
  background: var(--mg-accent-fill);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 50%),
    inset 0 -1px 0 rgb(0 0 0 / 18%),
    0 1px 2px rgb(0 0 0 / 40%),
    0 12px 32px -8px rgb(77 134 255 / 70%);
}
.bb-workspace button[type="submit"]:hover:not(:disabled)::after,
.bb-workspace button[type="submit"]:hover:not(:disabled)::after {
  transform: translateX(120%);
  transition: transform 700ms var(--mg-out);
}
.bb-workspace button[type="submit"] svg,
.bb-workspace button[type="submit"] svg {
  transition: transform var(--dur-small) var(--mg-out);
}
.bb-workspace button[type="submit"]:hover:not(:disabled) svg.lucide-arrow-right,
.bb-workspace button[type="submit"]:hover:not(:disabled) svg.lucide-arrow-right {
  transform: translateX(3px);
}
.bb-workspace button[type="submit"]:active:not(:disabled),
.bb-workspace button[type="submit"]:active:not(:disabled) {
  transform: scale(0.98);
}
.bb-workspace button[type="submit"]:disabled,
.bb-workspace button[type="submit"]:disabled {
  opacity: 1;
  color: var(--text-3);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--mg-edge);
  cursor: not-allowed;
}
.bb-resource-word {
  display: inline-block;
  white-space: pre;
  animation: bb-resource-word 620ms var(--mg-out) both;
  animation-delay: var(--mg-delay, 0ms);
}
@keyframes bb-resource-word {
  from {
    opacity: 0;
    transform: translateY(0.35em);
    filter: blur(8px);
  }
}
@keyframes bb-resource-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}
@keyframes bb-resource-fade {
  from {
    opacity: 0;
  }
}
@media(max-width:560px){.bb-results dl{grid-template-columns:1fr}.bb-results dt{border:0;padding-bottom:0}.bb-workspace{margin-inline:-8px}.bb-actions button{flex:1 1 140px}}
@media(prefers-reduced-motion:reduce){.bb-resource main *,.bb-resource main *::before,.bb-resource main *::after{animation-name:none!important;animation-duration:150ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-property:opacity,color,background-color,border-color!important;transition-duration:120ms!important}.bb-resource .bb-resource-word,.bb-resource .bb-workspace{animation-name:bb-resource-fade!important}}
@media print{body{background:white!important;color:black!important}header,footer,.preview-flag,.bb-workspace form,.bb-status,main>nav{display:none!important}.bb-workspace{background:white!important;border:0;padding:0}p,dt,dd,h1,h2,h3,th,td{color:black!important}.bb-table-wrap{overflow:visible}main{padding:0!important;max-width:none!important}.bb-results table{min-width:0;font-size:10px}.bb-table-wrap th{min-width:0}a{color:black!important}.bb-workspace{break-inside:auto}.bb-resource-word{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}}

/* Resource library: shared signup surfaces, rise/word and action feedback. */
.bb-resource main.bb-library{max-width:1180px;padding-top:72px}
.bb-library h1{font-size:clamp(42px,6.3vw,76px);line-height:1.04;max-width:820px;letter-spacing:-.055em;margin:22px 0 24px}
.bb-library-lead{max-width:680px;font-size:20px;color:var(--text-2);line-height:1.6}
.bb-library-start{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:30px 0 46px}
.bb-library-start>span{font-size:13px;color:var(--text-2);margin-left:8px}
.bb-library a{text-decoration:none}
.bb-library-primary,.bb-library-secondary{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;padding:10px 20px;border-radius:var(--mg-radius-sm);font-size:14px;font-weight:600;border:1px solid var(--line-3);transition:transform 120ms var(--mg-out),background-color 180ms var(--mg-out),border-color 180ms var(--mg-out)}
.bb-library-primary{background:linear-gradient(180deg,#8db4ff,var(--accent-strong));color:var(--bg-0);box-shadow:0 5px 22px rgb(77 134 255 / 18%);position:relative;overflow:hidden}
.bb-library-primary::after{content:"";position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 35%,rgb(255 255 255 / 35%) 50%,transparent 65%);transform:translateX(-100%) rotate(12deg);pointer-events:none}
.bb-library-primary:hover::after{animation:bb-library-sheen 700ms var(--mg-out)}
@keyframes bb-library-sheen{to{transform:translateX(100%) rotate(12deg)}}
.bb-library-secondary{background:var(--bg-1);color:var(--text-1)}
.bb-library-secondary:hover{background:var(--bg-3);border-color:var(--accent)}
.bb-library-primary:active,.bb-library-secondary:active,.bb-library button:active{transform:scale(.98)}
.bb-library a:focus-visible,.bb-library button:focus-visible,.bb-library input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.bb-library-feature{display:grid;grid-template-columns:1.6fr 1fr;gap:0 42px;padding:28px 32px;background:var(--mg-sheen),var(--bg-1);border:1px solid var(--line-2);border-radius:var(--mg-radius);margin-bottom:48px;animation:bb-resource-rise 520ms var(--mg-out) both}
.bb-library-feature>div{grid-row:span 3;align-self:center}
.bb-library-feature h2{font-size:25px;line-height:1.2;margin:10px 0 14px}
.bb-library-feature p{font-size:15px;color:var(--text-2);max-width:490px;margin:0}
.bb-library-feature>a{display:flex;align-items:center;justify-content:space-between;min-height:58px;gap:20px;color:var(--text-1);font-size:15px;border-bottom:1px solid var(--line-2);transition:color 180ms var(--mg-out)}
.bb-library-feature>a:last-child{border-bottom:0}.bb-library-feature>a:hover{color:var(--accent)}
.bb-library-browser{scroll-margin-top:24px;border-top:1px solid var(--line-2);padding-top:30px}
.bb-library-search{position:relative;max-width:640px}.bb-library-search label{display:block;color:var(--text-1);font-size:15px;font-weight:600;margin-bottom:12px}
.bb-library-search input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--text-1);background:var(--bg-1);border:1px solid var(--line-3);border-radius:var(--mg-radius-sm);min-height:54px;padding:14px 76px 14px 18px}
.bb-library-search>button{position:absolute;bottom:7px;right:8px;min-height:40px;background:transparent;color:var(--accent);border:0;padding:8px;cursor:pointer}
.bb-library-filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 14px}
.bb-library-filters button,.bb-library-empty button{font:500 14px Geist,Arial,sans-serif;cursor:pointer;min-height:44px;border-radius:var(--mg-radius-sm);border:1px solid var(--line-2);padding:10px 16px;background:var(--bg-1);color:var(--text-2);transition:background-color 180ms var(--mg-out),border-color 180ms var(--mg-out),transform 120ms var(--mg-out)}
.bb-library-filters button:hover{border-color:var(--line-3);color:var(--text-1)}
.bb-library-filters button[aria-pressed=true]{color:var(--accent);background:rgb(127 170 255 / 12%);border-color:rgb(127 170 255 / 42%)}
.bb-library-count{font-size:13px;color:var(--text-2);margin:16px 0 0;min-height:22px}
.bb-library-section{margin-top:38px;scroll-margin-top:30px}
.bb-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 18px}.bb-section-heading h2{font-size:28px;letter-spacing:-.03em;margin:6px 0 0}.bb-section-heading>span{font-size:13px;color:var(--text-2);padding-bottom:3px}
.bb-card-kind{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);font-weight:600}
.bb-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bb-library-card{display:flex;flex-direction:column;min-width:0;padding:24px;border-radius:var(--mg-radius);border:1px solid var(--line-2);background:var(--bg-1);color:var(--text-1);transition:border-color 180ms var(--mg-out),background-color 180ms var(--mg-out),transform 180ms var(--mg-out);animation:bb-resource-rise 520ms var(--mg-out) both}
.bb-library-card:hover{background:var(--bg-2);border-color:rgb(127 170 255 / 45%);transform:translateY(-3px);color:var(--text-1)}
.bb-card-top{display:flex;align-items:center;gap:12px;margin-bottom:22px}.bb-card-top>span:last-child{margin-left:auto;color:var(--text-2);font-size:19px}
.bb-card-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgb(127 170 255 / 20%);border-radius:10px;background:rgb(127 170 255 / 7%);color:var(--accent)}.bb-card-icon svg{width:21px;height:21px}
.bb-library-card h3{font-size:20px;line-height:1.25;letter-spacing:-.025em;margin:0 0 12px;color:var(--text-1)}
.bb-library-card p{font-size:14px;line-height:1.65;color:var(--text-2);margin:0 0 24px}.bb-card-action{margin-top:auto;padding-top:18px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;color:var(--accent);font-size:13px;font-weight:600}
.bb-library-footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line-2);margin-top:64px;padding-top:30px}.bb-library-footer>div{flex:1 1 100%}.bb-library-footer h2{font-size:24px;margin:0 0 10px}.bb-library-footer p{color:var(--text-2);font-size:15px;max-width:620px}.bb-library-empty{padding:40px 0}
.bb-library [hidden]{display:none!important}
@media(max-width:950px){.bb-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bb-library-feature{grid-template-columns:1fr;gap:16px}.bb-library-feature>div{grid-row:auto}}
@media(max-width:560px){.bb-resource main.bb-library{padding-top:40px}.bb-library-grid{grid-template-columns:1fr}.bb-library-feature{padding:24px}.bb-library-start>a{flex:1 1 130px}.bb-library-start>span{margin-left:0}.bb-library-filters{gap:6px}.bb-library-filters button{padding:9px 12px;font-size:13px}.bb-library-card{padding:22px}.bb-section-heading h2{font-size:25px}.bb-library-lead{font-size:18px}}
.bb-resource main.bb-library>h1{font-size:clamp(42px,6.3vw,76px);line-height:1.04;max-width:780px;letter-spacing:-.055em}
.bb-resource main.bb-library a.bb-library-primary{color:var(--bg-0)}
.bb-library button{margin:0}

/* All reviewed resources: editorial reading layout and shared library actions. */
.bb-resource main.bb-article{max-width:1180px;padding-top:40px}
.bb-article-breadcrumbs{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--text-2);margin-bottom:38px}
.bb-article-breadcrumbs a{text-decoration:none}
.bb-article-hero{display:block!important;border:0!important;padding:0 0 40px!important;margin:0 0 38px!important;max-width:none!important;border-bottom:1px solid var(--line-2)!important}
.bb-article-hero h1{font-size:clamp(34px,4.5vw,56px);font-weight:620;line-height:1.08;letter-spacing:-.04em;max-width:1000px;text-wrap:balance;margin:18px 0 22px}
.bb-article-byline{display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;font-size:13px;color:var(--text-2);margin-bottom:28px}.bb-article-byline a{text-decoration:none}
.bb-article-lead{max-width:840px}.bb-article-lead p{font-size:19px;line-height:1.75;margin:0 0 28px}
.bb-article-actions{display:flex;gap:12px;flex-wrap:wrap}
.bb-resource .bb-article a.bb-library-primary{color:var(--bg-0)}
.bb-article-actions a,.bb-article-about a{text-decoration:none}
.bb-article-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:44px;align-items:start}
.bb-article-sidebar{position:sticky;top:24px;min-width:0}
.bb-article-outline{background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--mg-radius);overflow:hidden;animation:bb-resource-rise 520ms var(--mg-out) both}
.bb-article-outline summary{font-size:14px;font-weight:600;color:var(--text-1);padding:18px;cursor:pointer;display:flex;justify-content:space-between;gap:16px;list-style:none;min-height:48px;box-sizing:border-box;align-items:center}
.bb-article-outline summary::-webkit-details-marker{display:none}
.bb-article-outline[open] summary{border-bottom:1px solid var(--line-2)}
.bb-article-outline[open] summary>span{transform:rotate(180deg)}
.bb-article-outline nav{max-height:70vh;overflow:auto;padding:10px}
.bb-article-outline ul{list-style:none;padding:0;margin:0;display:grid;gap:5px}
.bb-article-outline li{margin:0;padding:0;font-size:13px}
.bb-article-outline a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px;border:1px solid transparent;border-radius:8px;text-decoration:none;line-height:1.5;box-sizing:border-box;transition:background-color 180ms var(--mg-out),border-color 180ms var(--mg-out)}
.bb-article-outline a:hover,.bb-article-outline a:focus-visible{background:var(--bg-2);border-color:var(--line-2)}
.bb-article-outline a>span{flex-shrink:0;font-size:14px;opacity:.6}
.bb-article-content{min-width:0;scroll-margin-top:24px}.bb-article-content>h2:first-child{margin-top:0}
.bb-article-content h2{font-size:28px;line-height:1.2;letter-spacing:-.025em;margin:42px 0 18px;scroll-margin-top:24px}
.bb-article-content h3{font-size:21px;line-height:1.3;scroll-margin-top:24px}
.bb-article-content p,.bb-article-content li{line-height:1.8}
.bb-article-content strong{color:var(--text-1);font-weight:600}
.bb-article-content a{text-underline-offset:4px;text-decoration-thickness:1px}
.bb-article-content pre{max-width:100%;box-sizing:border-box;overflow:auto;padding:20px;border:1px solid var(--line-2);border-radius:var(--mg-radius-sm);background:var(--bg-1);font-size:14px}
.bb-article-content .table-wrap{border:1px solid var(--line-2);border-radius:var(--mg-radius-sm);margin:24px 0;overflow-x:auto}
.bb-article-content .table-wrap table{margin:0;min-width:540px;width:100%}
.bb-article-content .table-wrap th{background:var(--bg-2);color:var(--text-1);font-size:13px}
.bb-article-content .table-wrap td{font-size:14px;line-height:1.65;padding:14px}
.bb-article-content [data-bb-tool]{scroll-margin-top:24px;margin-top:0}
.bb-article-related{border-top:1px solid var(--line-2);margin-top:56px;padding-top:36px}
.bb-article-related .bb-library-card{text-decoration:none}.bb-article-related .bb-library-card>.bb-card-kind{margin-bottom:18px}
.bb-article-back{font-size:13px;text-decoration:none;white-space:nowrap}
.bb-article-about{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:30px;margin-top:36px;background:var(--mg-sheen),var(--bg-1);border:1px solid var(--line-2);border-radius:var(--mg-radius)}
.bb-article-about h2{font-size:23px;margin:10px 0}.bb-article-about p{font-size:14px;max-width:540px;margin-bottom:0}.bb-article-about>div:last-child{display:grid;gap:10px}
@media(max-width:1050px){.bb-article-layout{grid-template-columns:210px minmax(0,1fr);gap:28px}.bb-article-related .bb-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bb-article-about{grid-template-columns:1fr}}
@media(max-width:800px){.bb-article-layout{display:flex;flex-direction:column;gap:26px}.bb-article-sidebar{position:static;width:100%}.bb-article-content{width:100%}.bb-article-outline nav{max-height:55vh}.bb-article-hero{margin-bottom:26px!important;padding-bottom:28px!important}.bb-article-lead p{font-size:18px}}
@media(max-width:560px){.bb-resource main.bb-article{padding-top:26px}.bb-article-breadcrumbs{margin-bottom:26px;font-size:12px}.bb-article-hero h1{font-size:34px}.bb-article-actions>a{flex:1 1 160px;gap:12px;padding:10px 14px}.bb-article-related .bb-library-grid{grid-template-columns:1fr}.bb-article-content h2{font-size:25px}.bb-article-about{padding:22px}.bb-article-related .bb-section-heading{flex-wrap:wrap;gap:12px}}
.bb-article-sidebar{margin:0;padding:0;border:0}
.bb-article-faq{border:1px solid var(--line-2);border-radius:var(--mg-radius-sm);background:var(--bg-1);margin:10px 0;overflow:hidden}
.bb-article-faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;list-style:none;cursor:pointer;padding:18px 20px;font-size:16px;font-weight:600;line-height:1.5;color:var(--text-1);min-height:54px;box-sizing:border-box;transition:background-color 180ms var(--mg-out)}
.bb-article-faq summary:hover{background:var(--bg-2)}.bb-article-faq summary::-webkit-details-marker{display:none}
.bb-article-faq summary>span{color:var(--accent);font-size:22px;font-weight:400;transition:transform 180ms var(--mg-out)}
.bb-article-faq[open] summary>span{transform:rotate(45deg)}
.bb-article-faq>div{padding:0 20px 20px}.bb-article-faq p{margin:0;font-size:16px}