.brand a { color:inherit; text-decoration:none; }
.backdrops { display:flex; gap:6px; margin:22px 0 12px; }
.backdrops button { width:auto; margin:0; padding:7px 14px; background:#edf1f5; color:#596370; font-size:13px; }
.backdrops button[aria-pressed=true] { background:#1f62c9; color:#fff; }
.character-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:28px 20px; border-radius:20px; background:#fff; color:#26374d; }
.character-gallery[data-background=dark] { background:#223044; color:#f7fafc; }
.character-gallery[data-background=warm] { background:#e8ddca; color:#403829; }
.character-gallery figure { display:flex; flex-direction:column; align-items:center; margin:0; min-width:0; }
.character-gallery bw-mascot-button { --mascot-width:min(100%,360px); width:min(100%,360px); }
.character-gallery figcaption { display:flex; flex-direction:column; gap:6px; align-items:center; margin-top:10px; }
.character-gallery strong { font-size:20px; } .character-gallery span,.character-gallery a { font-size:13px; color:inherit; }
.character-gallery a { margin-top:8px; opacity:.8; }
.usage { margin:30px 0; padding-right:128px; } .usage h2 { font-size:17px; }
.usage a { color:#1f62c9; } .usage pre { overflow:auto; font-size:12px; padding:14px; background:#edf1f5; border-radius:10px; }
.floating-demo { position:fixed; right:24px; bottom:24px; z-index:20; }
summary { cursor:pointer; font-weight:650; }
@media(max-width:640px) { .character-gallery { gap:8px; padding:20px 10px; } .floating-demo { right:14px; bottom:14px; } .usage { padding-right:120px; } }