/* Scoped formation explainer. Reuses the article's typography and theme. */
.sbf{scroll-margin-top:6rem;margin:2.2rem auto!important;max-width:1380px;border:1px solid var(--border);border-radius:6px;background:var(--fig-bg);color:var(--text);overflow:hidden;font:14px/1.65 var(--sans)}
.sbf-header{padding:1.4rem 1.5rem 1.1rem}
.sbf-header h3{font:600 30px/1.2 var(--sans);letter-spacing:-.025em;margin:.35rem 0 .65rem!important}
.sbf-header p{margin:0!important;color:var(--text-light);font:15px/1.6 var(--sans)}
.sbf-body{min-height:540px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);border-block:1px solid var(--border)}
.sbf-scene{position:relative;min-height:360px;background:#141b20;isolation:isolate;overflow:hidden}
.sbf-scene canvas,.sbf-placeholder{position:absolute;width:100%;height:100%;inset:0;display:block}
.sbf.is-ready .sbf-placeholder{display:none}
.sbf-scene-tag{position:absolute;inset:1rem 8.75rem auto 1rem;font:600 12px/1.4 var(--sans);color:#e9e0d5;letter-spacing:.025em}
.sbf-scene-note{position:absolute;inset:auto 1rem 1rem;max-width:26rem;color:#d0c8bd;font:12px/1.5 var(--sans);pointer-events:none}
.sbf button{font:600 13px/1.3 var(--sans);border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text);cursor:pointer;min-height:44px;padding:.55rem .85rem;transition:background .15s,color .15s,border-color .15s}
.sbf button:hover:not(:disabled){background:var(--accent-light);border-color:var(--accent)}
.sbf button:active:not(:disabled){transform:translateY(1px)}
.sbf button:disabled{opacity:.45;cursor:default}
.sbf .sbf-reveal{position:absolute;inset:.75rem .75rem auto auto;min-height:44px;padding:.4rem .55rem;color:#f1e5d2;border-color:#746959;background:#141b20c9;font-size:11px}
.sbf .sbf-reveal:hover:not(:disabled),.sbf .sbf-reveal[aria-pressed=true]{background:#e2c095;color:#20201f}
.sbf-info{padding:1.2rem 1.15rem;min-width:0}
.sbf-step{font:12px/1.5 var(--mono);color:var(--text-muted)}
.sbf-info h4{font:600 23px/1.25 var(--sans);letter-spacing:-.015em;margin:.4rem 0 .7rem!important;min-height:2.5em;text-wrap:balance}
.sbf-info>p{font:14px/1.65 var(--sans);margin:0 0 .85rem!important;min-height:6.6em}
.sbf-info dl{margin:0}
.sbf-info dl>div{border-top:1px solid var(--border);padding:.55rem 0}
.sbf-info dt{font:600 11px/1.5 var(--sans);color:var(--text-muted);margin:0 0 .2rem}
.sbf-info dd{font:13px/1.5 var(--sans);margin:0}
.sbf-source{display:inline-block;margin-top:.7rem;font:12px/1.5 var(--sans)}
.sbf-controls{padding:1.1rem 1.5rem 0}
.sbf-control-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font:600 14px/1.5 var(--sans)}
.sbf-control-heading output{font:12px/1.5 var(--sans);color:var(--text-muted);text-align:right}
.sbf input[type=range]{width:100%;accent-color:var(--accent);min-height:44px;margin:.25rem 0;cursor:ew-resize;display:block}
.sbf-milestones{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:.2rem}
.sbf .sbf-milestones button{padding:.2rem .05rem;border:none;border-radius:2px;min-height:56px;position:relative;font:10px/1.2 var(--sans)}
.sbf-milestones button>span{display:block;font:12px/1.5 var(--mono);color:var(--text-muted);margin-bottom:.25rem}
.sbf .sbf-milestones button[aria-current=step]{color:var(--accent);background:var(--accent-light)}
.sbf-milestones button[aria-current=step]>span{color:var(--accent);font-weight:600}
.sbf-playback{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin:1rem 0 .65rem}
.sbf-playback span{font:11px/1.5 var(--sans);color:var(--text-muted);margin-left:.25rem}
.sbf .sbf-time-note{font:12px/1.6 var(--sans);color:var(--text-light);margin:.7rem 0!important}
.sbf figcaption{padding:0 1.5rem;margin:.85rem 0 1.2rem!important;font:12px/1.65 var(--sans)}
.sbf-reading{border-top:1px solid var(--border);padding:.9rem 1.5rem;font:13px/1.65 var(--sans)}
.sbf-reading summary{cursor:pointer;font-weight:600;min-height:32px}
.sbf-reading ol{padding-left:1.25rem!important;margin:.7rem 0!important}
.sbf-reading li{margin-bottom:.4rem}
.sbf-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sbf button:focus-visible,.sbf input:focus-visible,.sbf summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sbf .sbf-reveal:focus-visible{outline-color:#f8dcb3}
@media(max-width:880px){.sbf{display:flex;flex-direction:column}.sbf-header{order:0}.sbf-body{display:contents;min-height:0}.sbf-scene{order:1;flex:0 0 300px}.sbf-controls{order:2;border-bottom:1px solid var(--border);padding-bottom:.65rem}.sbf-info{order:3}.sbf figcaption{order:4}.sbf-reading{order:5}.sbf noscript{order:6}.sbf-header,.sbf-controls{padding-inline:1rem}.sbf-header h3{font-size:26px}.sbf-body{grid-template-columns:1fr}.sbf-scene{min-height:300px}.sbf-info{padding:1rem}.sbf-info h4{min-height:0;font-size:24px}.sbf-info>p{min-height:0}.sbf-info dl{display:grid;grid-template-columns:1fr;gap:0}.sbf-control-heading{display:block}.sbf-control-heading output{display:block;text-align:left;margin-top:.2rem}.sbf-milestones{grid-template-columns:repeat(5,minmax(0,1fr));gap:.35rem}.sbf .sbf-milestones button{font-size:11px;min-height:48px}.sbf figcaption,.sbf-reading{padding-inline:1rem}.sbf-playback span{flex-basis:100%;margin-left:0}}
@media(prefers-reduced-motion:reduce){.sbf button{transition:none}}

/* Wide figures follow the article's l-page layer; prose keeps its normal measure. */
.sbf-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.sbf-toolbar .sb-kicker{margin:0}
.sbf-header p{max-width:70ch}
.sbf-wide{clear:both}
.sbf-spacer{margin:2.2rem auto}
html.sbf-modal-open{overflow:hidden}
.sbf-expanded{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--fig-bg);color:var(--text);overflow:hidden}
.sbf-expanded::backdrop{background:var(--bg)}
.sbf-expanded .sbf{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:100%;height:100%;max-width:none;border:0;border-radius:0;margin:0!important}
.sbf-expanded .sbf-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.15rem 1rem;padding:.65rem 1.25rem}
.sbf-expanded .sbf-toolbar{display:contents}
.sbf-expanded .sb-kicker{grid-column:1;grid-row:1}
.sbf-expanded #sbf-expand{grid-column:2;grid-row:1/span 2}
.sbf-expanded .sbf-header h3{grid-column:1;grid-row:2;font-size:24px;margin:0!important}
.sbf-expanded .sbf-header p{display:none}
.sbf-expanded .sbf-body{display:grid;min-height:0;overflow:hidden}
.sbf-expanded .sbf-scene{min-height:0}
.sbf-expanded .sbf-info{overflow:auto;overscroll-behavior:contain}
.sbf-expanded .sbf-info h4,.sbf-expanded .sbf-info>p{min-height:0}
.sbf-expanded .sbf .sbf-milestones button{min-height:44px}
.sbf-expanded .sbf-controls{padding:.55rem 1.25rem 0}
.sbf-expanded .sbf-playback{margin:.5rem 0}
.sbf-expanded .sbf-time-note{font-size:11px;margin:.4rem 0 .65rem!important}
.sbf-expanded .sbf figcaption,.sbf-expanded .sbf-reading{display:none}
@media(max-width:880px){
 .sbf-toolbar{align-items:flex-start}.sbf-toolbar button{flex-shrink:0}
 .sbf-expanded{overflow:auto}
 .sbf-expanded .sbf{display:flex;height:auto;min-height:100%}
 .sbf-expanded .sbf-header{position:sticky;top:0;background:var(--fig-bg);z-index:2}
 .sbf-expanded .sbf-header p{display:none}
 .sbf-expanded .sbf-body{display:contents}
 .sbf-expanded .sbf-scene{flex:0 0 clamp(240px,44dvh,420px);min-height:240px}
 .sbf-expanded .sbf-info{overflow:visible}
 .sbf-expanded .sbf-controls{padding-inline:1rem}
}
