.bp-stage{--bp-ink:#0b8fc2;--bp-fill:#2accff14;--bp-sheet:#fff;--bp-wash:#fff;--bp-before:0%;--bp-after:0;aspect-ratio:1571/729;background:var(--ui-ground);position:relative;overflow:clip;container-type:inline-size}.bp-real{position:absolute;inset:0}.bp-real img{width:100%;height:100%;display:block}.bp-real--before{clip-path:inset(0 0 var(--bp-before) 0)}.bp-real--after{opacity:var(--bp-after)}.bp-svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.bp-dim{fill:#000}.bp-outline rect{fill:none;stroke:#fff9;stroke-width:1.5px;vector-effect:non-scaling-stroke}.bp-stage[data-tone=light] .bp-dim{fill:var(--bp-wash)}.bp-stage[data-tone=light] .bp-outline rect{stroke:var(--ui-muted)}.bp-sheet{fill:var(--bp-sheet)}.bp-grid line{stroke:var(--bp-ink);stroke-opacity:.08;stroke-width:1px;vector-effect:non-scaling-stroke}.bp-wire__box{fill:var(--bp-fill);stroke:var(--bp-ink);stroke-width:1px;vector-effect:non-scaling-stroke}.bp-wire__box--focus,.bp-steps .bp-wire__box{fill:color-mix(in srgb, var(--bp-ink) 10%, var(--bp-sheet));stroke-width:1.5px}.bp-handle{fill:var(--bp-sheet);stroke:var(--bp-ink);stroke-width:1px;vector-effect:non-scaling-stroke}.bp-guide{stroke:var(--bp-ink);stroke-opacity:.5;stroke-dasharray:2 4;stroke-width:1px;vector-effect:non-scaling-stroke}.bp-dim-line,.bp-group{fill:none;stroke:var(--bp-ink);stroke-width:1px;vector-effect:non-scaling-stroke}.bp-group{stroke-dasharray:6 4}.bp-scan{stroke:var(--bp-ink);stroke-width:2px;vector-effect:non-scaling-stroke}.bp-text,.bp-label{fill:var(--bp-ink);font-family:var(--ui-font-sans)}.bp-text{font-size:min(calc(11px * 1571 / var(--bp-w,1571)), 15px)}.bp-label{font-size:calc(11px * 1571 / var(--bp-w,1571));letter-spacing:.04em;font-weight:500}@container (max-width:560px){.bp-text,.bp-label{display:none}}.bp-band__row{justify-content:center;align-items:center;gap:var(--ui-space-2);justify-self:stretch;min-width:0;display:flex}.bp-band__row>.ui-segmented{flex:0 auto;min-width:0}.bp-band__row>.bp-play{flex-shrink:0}.bp-band{justify-items:center;gap:var(--ui-space-3);padding:var(--ui-space-4) var(--ui-space-4) var(--ui-space-5);display:grid;container-type:inline-size}@container not (min-width:480px){.bp-band__row{row-gap:var(--ui-space-3);margin-inline:calc(-1 * var(--ui-space-2));flex-wrap:wrap}.bp-band__row>.ui-segmented{flex:100%}.bp-band__row>.ui-segmented>.ui-segmented__item{flex:1 0 auto;justify-content:center;padding-inline:6px}}.ui-article .bp-note,.bp-note{gap:var(--ui-space-1);text-align:center;max-width:56ch;font-size:var(--ui-text-md);line-height:var(--ui-leading-body);text-wrap:balance;margin:0;display:grid}.bp-notes{justify-items:center;display:grid}.bp-notes>.bp-note{opacity:0;visibility:hidden;transition:opacity var(--ui-dur-base) var(--ui-ease), visibility 0s linear var(--ui-dur-base);grid-area:1/1}.bp-notes>.bp-note[data-on]{opacity:1;visibility:visible;transition:opacity var(--ui-dur-base) var(--ui-ease), visibility 0s}.bp-note__step{color:var(--ui-faint);font:var(--ui-type-label)}.bp-note__fix{color:var(--ui-ink);opacity:0;transition:opacity var(--ui-dur-base) var(--ui-ease)}.bp-note__fix[data-on]{opacity:1}@media (prefers-reduced-motion:reduce){.bp-notes>.bp-note,.bp-note__fix{transition:none}}html[data-color-scheme=dark] .bp-stage{--bp-ink:#4cc3ee;--bp-fill:#2accff1a;--bp-sheet:var(--ui-ground)}.bp-stage[data-whole] .bp-svg{display:none}.bp-stage[data-whole=before] .bp-real--before{clip-path:none}.bp-stage[data-whole=after] .bp-real--before{visibility:hidden}.bp-stage[data-whole=after] .bp-real--after{opacity:1}.ui-post__media:has(>.bp-explain){height:auto;min-height:0;padding:0;display:block}.bp-explain .bp-stage{box-shadow:0 1px 0 var(--ui-line)}.bp-play{border-radius:var(--ui-radius-full);background:var(--ui-raised);min-width:72px;height:26px;box-shadow:var(--ui-shadow-hairline);color:var(--ui-ink);font:var(--ui-weight-medium) var(--ui-text-xs) / 1.25rem var(--ui-font-sans);cursor:pointer;border:0;justify-content:center;align-items:center;padding:0 10px;display:inline-flex;position:relative}.bp-play:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}@media (hover:hover){.bp-play:hover{background:var(--ui-raised-hover)}}@media (pointer:coarse){.bp-play:after{content:"";position:absolute;inset:-9px -4px}}