/* Public specimens mirror the current product's semantic design tokens. */
.bs-page {
 --bs-paper:#FAFAFA; --bs-sheet:#FFFFFF; --bs-tint:#F4F4F6;
 --bs-ink:#1B2D4F; --bs-ink-2:#4A5876; --bs-ink-3:#646E89;
 --bs-coral:#F59C9C; --bs-coral-text:#C24848; --bs-good:#087F55; --bs-bad:#C4372F; --bs-aqua:#0E7C9B; --bs-stage:#0A0E1A;
 margin:0; background:var(--bs-paper); color:var(--bs-ink); font:400 16px/1.65 var(--os-body); -webkit-font-smoothing:antialiased;
}
[data-theme="dark"] .bs-page {
 --bs-paper:#0A0E1A; --bs-sheet:#121826; --bs-tint:#1A2234;
 --bs-ink:#F2F5FA; --bs-ink-2:#B4BDD0; --bs-ink-3:#8993AB;
 --bs-coral-text:#F59C9C; --bs-good:#35B586; --bs-bad:#E2635B; --bs-aqua:#4FC3DC; --bs-stage:#05070E;
}
.bs-page * { box-sizing:border-box; }
.bs-page main { outline:none; }
.bs-page main a { color:inherit; text-underline-offset:4px; }
.bs-page main a:hover { text-decoration-color:var(--bs-coral-text); }
.bs-page main :focus-visible { outline:2px solid var(--bs-ink); outline-offset:4px; }
.bs-page main h1,.bs-page main h2,.bs-page main h3 { font-family:var(--os-display); line-height:1.15; }
.bs-hero { padding-top:64px; padding-bottom:48px; }
.bs-hero h1 { font-size:clamp(32px,4vw,56px); letter-spacing:-.035em; margin:16px 0 24px; font-weight:900; }
.bs-hero h1 span { text-decoration:underline; text-decoration-color:var(--bs-coral); text-decoration-thickness:5px; text-underline-offset:6px; }
.bs-hero > p { max-width:650px; font-size:18px; color:var(--bs-ink-2); }
.bs-label { font:500 11px/1.5 var(--os-mono); color:var(--bs-ink-3); letter-spacing:.12em; text-transform:uppercase; }
.bs-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:48px; padding-bottom:64px; }
.bs-contents { position:sticky; top:96px; align-self:start; display:flex; flex-direction:column; }
.bs-contents .bs-label { margin-bottom:12px; }
.bs-contents a { min-height:40px; display:flex; align-items:center; font-size:14px; color:var(--bs-ink-2); text-decoration:none; }
.bs-contents a:hover { text-decoration:underline; }
.bs-content { min-width:0; }
.bs-section { padding:32px 0 48px; border-top:1px solid var(--os-rule); scroll-margin-top:88px; }
.bs-section h2 { font-size:24px; margin:0 0 24px; }
.bs-section h3 { font-size:22px; margin:0 0 12px; }
.bs-section > p { max-width:760px; margin:16px 0; }
.bs-section blockquote { margin:24px 0; font:700 clamp(24px,3vw,36px)/1.2 var(--os-display); }
.bs-note { color:var(--bs-ink-3); font-size:12px; }
.bs-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:24px; }
.bs-button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:10px 16px; border:1px solid transparent; border-radius:10px; background:var(--bs-coral); color:#1B2D4F !important; font:600 14px/1.4 var(--os-body); text-decoration:none; cursor:pointer; }
.bs-secondary { background:transparent; border-color:var(--os-rule); color:var(--bs-ink) !important; }
.bs-destructive { background:transparent; border-color:var(--os-rule); color:var(--bs-bad) !important; }
.bs-button:hover { border-color:var(--bs-ink-3); }
.bs-logo-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bs-logo-pair figure { margin:0; min-height:200px; padding:32px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; border:1px solid var(--os-rule); border-radius:16px; }
.bs-logo-light { background:#FAFAFA; color:#1B2D4F; } .bs-logo-light .os-mark { color:#1B2D4F; }
.bs-logo-dark { background:#0A0E1A; color:#B4BDD0; }
.bs-logo-pair figcaption { font:400 12px var(--os-mono); text-align:center; }
.bs-rules { display:grid; grid-template-columns:160px minmax(0,1fr); gap:0 24px; margin:24px 0; }
.bs-rules dt,.bs-rules dd { margin:0; border-top:1px solid var(--os-rule); padding:16px 0; }
.bs-rules dt { font-weight:600; } .bs-rules dd { color:var(--bs-ink-2); }
.bs-downloads { margin:24px 0; }
.bs-downloads > div { display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--os-rule); padding:8px 0; }
.bs-downloads b { font-weight:500; }
.bs-downloads a { display:inline-flex; min-height:40px; align-items:center; font-size:14px; }
.bs-downloads span { white-space:nowrap; }
.bs-swatches,.bs-token-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.bs-swatch,.bs-token { display:flex; flex-direction:column; gap:8px; text-align:left; padding:12px; min-height:40px; border:1px solid var(--os-rule); border-radius:10px; color:var(--bs-ink); background:var(--bs-sheet); cursor:pointer; font:400 14px/1.4 var(--os-body); }
.bs-swatch > span,.bs-token > span { width:100%; height:64px; border:1px solid var(--os-rule); border-radius:6px; }
.bs-swatch code,.bs-token code { font:400 12px var(--os-mono); }
.bs-token small { color:var(--bs-ink-3); font:400 11px var(--os-mono); overflow-wrap:anywhere; }
.bs-type > div { border-top:1px solid var(--os-rule); padding:24px 0; }
.bs-type .bs-label { display:block; margin-bottom:12px; }
.bs-type strong { font:900 clamp(28px,3vw,40px)/1.2 var(--os-display); }
.bs-type p { font-size:18px; margin:0; } .bs-type code { font:500 clamp(16px,2vw,24px)/1.5 var(--os-mono); }
.bs-specimen,.bs-voice-demo { background:var(--bs-sheet); border:1px solid var(--os-rule); border-radius:16px; padding:24px; }
.bs-specimen > .bs-actions { margin-top:16px; }
.bs-specimen select,.bs-voice-demo select,.bs-field input { min-height:40px; max-width:100%; padding:8px 12px; border:1px solid var(--os-rule); border-radius:10px; color:var(--bs-ink); background:var(--bs-paper); font:400 16px var(--os-body); }
.bs-field { display:flex; flex-direction:column; gap:8px; margin-top:24px; max-width:360px; font-size:14px; }
.bs-voice-demo label { display:block; margin-bottom:8px; font-size:14px; }
.bs-voice-demo blockquote { font-size:28px; }
.bs-chips { display:flex; gap:8px; flex-wrap:wrap; }
.bs-chips button { min-height:40px; border:1px solid var(--os-rule); border-radius:999px; padding:8px 16px; font:400 12px var(--os-mono); background:transparent; color:var(--bs-ink); cursor:pointer; }
.bs-chips button[aria-pressed="true"] { background:var(--bs-coral); color:#1B2D4F; }
.bs-state { margin-top:24px; border-top:1px solid var(--os-rule); padding:24px 0 0; }
.bs-state p { margin:0; color:var(--bs-ink-2); }
.bs-artifact { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; gap:32px; margin:32px 0 48px; }
.bs-artifact > div > p { color:var(--bs-ink-2); }
.bs-stage { background:var(--bs-stage); color:#F2F5FA; border:1px solid rgba(242,245,250,.14); border-radius:22px; padding:24px; }
.bs-stage .bs-label,.bs-stage .bs-note { color:#B4BDD0; }
.bs-stage h3 { font-size:32px; margin:16px 0; }
.bs-artifact .bs-stage > p { color:#B4BDD0; font-size:14px; }
.bs-number { font-family:var(--os-mono); font-variant-numeric:tabular-nums; }
.bs-duel { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; }
.bs-duel strong:first-child { font-size:clamp(32px,3.5vw,64px); letter-spacing:-.05em; color:#F59C9C; }
.bs-duel strong:last-child { font-size:24px; }
.bs-meter { height:8px; border-radius:6px; background:#1A2234; overflow:hidden; }
.bs-meter span { display:block; width:57%; height:100%; background:#F59C9C; }
.bs-terminal > p { font-family:var(--os-mono); overflow-wrap:anywhere; }
.bs-scan { font:400 18px var(--os-mono); color:#F59C9C; overflow-wrap:anywhere; }
.bs-receipt { max-width:380px; background:#FCFAF5; color:#23272E; padding:24px; border:1px solid #D8D3C6; font:400 14px/1.7 var(--os-mono); }
.bs-receipt h3 { font-family:var(--os-mono) !important; font-size:22px; margin:16px 0; }
.bs-receipt .bs-label { color:#56534D; } .bs-receipt .bs-number { font-size:48px; }
.bs-receipt hr { border:0; border-top:1px dashed #D8D3C6; }
.bs-artifact .bs-receipt p { color:#23272E; }
.bs-flap { font:700 clamp(22px,4vw,44px)/1.5 var(--os-mono); letter-spacing:.06em; color:#F59C9C; background:var(--bs-stage); padding:16px; border-radius:10px; margin:16px 0; overflow-wrap:anywhere; }
.bs-section pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:24px; background:var(--bs-tint); border:1px solid var(--os-rule); border-radius:16px; font:400 13px/1.7 var(--os-mono); }
.bs-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); padding:12px 20px; border:1px solid var(--os-rule); border-radius:10px; color:var(--bs-ink); background:var(--bs-sheet); z-index:100; font-size:14px; }
.bs-toast[hidden] { display:none; }
@media(max-width:900px) { .bs-layout { grid-template-columns:1fr; gap:16px; } .bs-contents { position:static; flex-direction:row; flex-wrap:wrap; gap:0 20px; } .bs-contents .bs-label { flex-basis:100%; } }
@media(max-width:767px) { .bs-hero { padding-top:32px; padding-bottom:32px; } .bs-hero > p { font-size:16px; } .bs-rules { grid-template-columns:1fr; gap:0; } .bs-rules dt { padding-bottom:4px; } .bs-rules dd { border:0; padding-top:0; } .bs-artifact { grid-template-columns:1fr; gap:24px; } .bs-specimen,.bs-voice-demo,.bs-stage { padding:16px; } .bs-token-grid,.bs-swatches { grid-template-columns:repeat(2,minmax(0,1fr)); } .bs-logo-pair figure { padding:24px 12px; } .bs-downloads > div { align-items:flex-start; } .bs-downloads b { padding-top:8px; } }
.bs-flap { display:flex; flex-wrap:wrap; gap:3px; }
.bs-flap span { position:relative; min-width:.85em; text-align:center; background:#F59C9C; color:#1B2D4F; border-radius:4px; }
.bs-flap span::after { content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid rgba(27,45,79,.2); }
.bs-race svg { display:block; width:100%; max-width:600px; margin:24px 0; color:var(--bs-ink-3); }
.bs-race-line { fill:none; stroke:var(--bs-ink-2); stroke-width:1.5; }
.bs-race-line.is-mine { stroke:var(--bs-coral); stroke-width:3; }
.bs-race-line.is-highlighted { stroke-width:4; }