.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--bxsg-space-1) 0;margin:0 0 var(--bxsg-space-4);padding:0;list-style:none;font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm);color:var(--bxsg-ink-3)}.crumbs li+li:before{content:"/";padding-inline:var(--bxsg-space-2);color:var(--bxsg-line-strong)}.crumbs a{color:var(--bxsg-ink-2)}.crumbs a:hover{color:var(--bxsg-brand)}.page-hero h1{max-width:22ch}.page-hero .display{max-width:18ch}.byline--hero{margin-block-start:var(--bxsg-space-5);border-block-end:0;padding-block-end:0}.byline--hero p{max-width:none}.article{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bxsg-space-7);align-items:start}@media(min-width:60em){.article{grid-template-columns:minmax(0,1fr) 15rem;gap:var(--bxsg-space-8)}.article__aside{position:sticky;top:calc(var(--bxsg-nav-h) + var(--bxsg-space-5))}}.article__body{min-width:0}.article__body>:first-child{margin-block-start:0}.article__body h2{scroll-margin-top:calc(var(--bxsg-nav-h) + var(--bxsg-space-4))}.article__body h2{max-width:28ch}.article__body ul,.article__body ol{max-width:var(--bxsg-measure)}.toc{padding:var(--bxsg-space-4) var(--bxsg-space-5);background:var(--bxsg-surface);border-radius:var(--bxsg-radius-md);box-shadow:var(--bxsg-ring),var(--bxsg-edge-light),var(--bxsg-shadow-1)}.toc__heading{margin-block-end:var(--bxsg-space-2);font-family:var(--bxsg-font-display);font-weight:600;font-stretch:var(--bxsg-ui-width);color:var(--bxsg-ink)}.toc__list{margin:0;padding:0;list-style:none;counter-reset:toc;font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm)}.toc__list li+li{margin-block-start:var(--bxsg-space-2)}.toc__list a{display:block;color:var(--bxsg-ink-2)}.toc__list a:hover{color:var(--bxsg-brand)}.toc__list a{position:relative;padding-inline-start:var(--bxsg-space-3);margin-inline-start:calc(-1 * var(--bxsg-space-3))}.toc__list a:before{content:"";position:absolute;left:0;top:.375rem;bottom:.375rem;width:2px;border-radius:1px;background:var(--bxsg-brand);opacity:0;transition:opacity var(--bxsg-dur-fast) var(--bxsg-ease-out)}.toc__list a[aria-current=true]{color:var(--bxsg-ink);font-weight:500}.toc__list a[aria-current=true]:before{opacity:1}@media(max-width:59.99em){.toc{margin-block-end:var(--bxsg-space-6)}}.article__body .readout,.rhythm .readout{margin-block:var(--bxsg-space-2) var(--bxsg-space-6)}.article__body .readout__code{font-size:var(--bxsg-text-sm)}.article__body table{font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm)}.article__body th{color:var(--bxsg-ink-2);font-weight:500;border-block-end-color:var(--bxsg-line-strong)}.article__body td{border-block-end-color:var(--bxsg-line)}.article__body td code{white-space:nowrap}.table-wrap{overflow-x:auto;margin-block-end:var(--bxsg-space-5)}.article__body blockquote{margin-block:var(--bxsg-space-6) var(--bxsg-space-6);padding-inline-start:var(--bxsg-space-5);border-inline-start:2px solid var(--bxsg-brand-glow);color:var(--bxsg-ink)}.article__body blockquote p{font-size:var(--bxsg-text-lg);line-height:var(--bxsg-lh-xl)}.article__body blockquote cite{display:block;margin-block-start:var(--bxsg-space-2);font-style:normal;font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm);color:var(--bxsg-ink-2)}.note{padding:var(--bxsg-space-4) var(--bxsg-space-5);border-radius:var(--bxsg-radius-md);background:var(--bxsg-brand-fill);box-shadow:0 0 0 1px var(--bxsg-brand-fill-line);color:var(--bxsg-ink)}.note--warning{background:var(--bxsg-warning-fill);box-shadow:0 0 0 1px var(--bxsg-warning-line)}.note--warning strong{color:var(--bxsg-warning-ink)}.note p:last-child{margin-block-end:0}.diagram{display:grid;gap:var(--bxsg-space-4);padding:var(--bxsg-space-6);background:var(--bxsg-surface);border-radius:var(--bxsg-radius-md);box-shadow:var(--bxsg-ring),var(--bxsg-shadow-1)}.diagram--row{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));justify-items:center}.diagram--row figcaption,.diagram--row .diagram__caption{grid-column:1 / -1}.demo{position:relative;display:grid;place-items:center;width:8rem;height:5.5rem;border-radius:var(--demo-radius, var(--bxsg-radius-sm));background:var(--demo-bg, var(--bxsg-surface));box-shadow:var(--demo-shadow, none);-webkit-backdrop-filter:var(--demo-backdrop, none);backdrop-filter:var(--demo-backdrop, none);font-family:var(--bxsg-font-mono);font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm);color:var(--bxsg-ink-2);text-align:center}.demo--lg{width:12rem;height:7.5rem}.demo--round{border-radius:50%;width:5rem;height:5rem}.demo-well{padding:var(--bxsg-space-6);border-radius:var(--bxsg-radius-md);background:var(--demo-well, var(--bxsg-canvas));display:grid;place-items:center;width:100%}.demo-well--dark{--demo-well: var(--bxsg-band)}.demo-well--dark .demo{color:var(--bxsg-on-band-2)}.diagram figcaption,.diagram__caption{font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm);color:var(--bxsg-ink-3);text-align:center}.diagram svg{width:100%;height:auto;max-width:36rem;justify-self:center}.diagram svg text{font-family:var(--bxsg-font-mono);font-size:12px;fill:var(--bxsg-ink-2)}.diagram svg .d-box{fill:var(--bxsg-surface);stroke:var(--bxsg-line-strong)}.diagram svg .d-shadow{fill:var(--bxsg-brand);opacity:.22}.diagram svg .d-line{stroke:var(--bxsg-brand);stroke-width:1.5;fill:none}.diagram svg .d-dim{stroke:var(--bxsg-ink-3);stroke-width:1;fill:none;stroke-dasharray:3 3}.diagram svg .d-label{fill:var(--bxsg-brand);font-weight:500}.keys{display:grid;grid-template-columns:max-content 1fr;gap:var(--bxsg-space-2) var(--bxsg-space-5);align-items:baseline;margin-block-end:var(--bxsg-space-5)}.keys dt{font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm)}.keys dd{margin:0}.author-box{display:grid;grid-template-columns:3.5rem 1fr;gap:var(--bxsg-space-4);margin-block-start:var(--bxsg-space-8);padding:var(--bxsg-space-5) var(--bxsg-space-6);background:var(--bxsg-surface);border-radius:var(--bxsg-radius-md);box-shadow:var(--bxsg-ring),var(--bxsg-edge-light),var(--bxsg-shadow-2)}.author-box__mark svg{width:3.5rem;height:3.5rem}.author-box__heading{font-family:var(--bxsg-font-display);font-weight:600;font-stretch:var(--bxsg-ui-width);color:var(--bxsg-ink);margin-block-end:var(--bxsg-space-2)}.author-box p:last-child{color:var(--bxsg-ink-2);font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm);max-width:none}.sources{margin-block-start:var(--bxsg-space-8)}.sources h2{font-size:var(--bxsg-text-xl);line-height:var(--bxsg-lh-xl)}.sources ol{margin:var(--bxsg-space-4) 0 0;padding-inline-start:var(--bxsg-space-5);font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm);color:var(--bxsg-ink-2)}.sources li+li{margin-block-start:var(--bxsg-space-4)}.sources a{overflow-wrap:anywhere}.related{margin-block-start:var(--bxsg-space-8)}.related h2{font-size:var(--bxsg-text-xl);line-height:var(--bxsg-lh-xl)}.related__list li+li{margin-block-start:0}.related__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--bxsg-space-4);margin:var(--bxsg-space-4) 0 0;padding:0;list-style:none}.related__list a{display:grid;gap:var(--bxsg-space-2);height:100%;padding:var(--bxsg-space-4) var(--bxsg-space-5);background:var(--bxsg-surface);border-radius:var(--bxsg-radius-md);box-shadow:var(--bxsg-ring),var(--bxsg-shadow-1);color:var(--bxsg-ink);transition:transform var(--bxsg-dur-base) var(--bxsg-ease-out)}.related__list a:hover{transform:translateY(-2px);color:var(--bxsg-ink)}.related__list strong{font-family:var(--bxsg-font-display);font-weight:600;font-stretch:var(--bxsg-ui-width)}.related__list span{font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm);color:var(--bxsg-ink-2)}.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bxsg-space-4);margin-block:var(--bxsg-space-6)}.cta-row p{margin:0;color:var(--bxsg-ink-2)}.index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:var(--bxsg-space-4);margin:0;padding:0;list-style:none}.index-card{display:grid;gap:var(--bxsg-space-2);height:100%;padding:var(--bxsg-space-5) var(--bxsg-space-5) var(--bxsg-space-6);background:var(--bxsg-surface);border-radius:var(--bxsg-radius-md);box-shadow:var(--bxsg-ring),var(--bxsg-edge-light),var(--bxsg-shadow-1);color:var(--bxsg-ink);--lift-shadow: var(--bxsg-shadow-3);transition:transform var(--bxsg-dur-base) var(--bxsg-ease-out)}.index-card:hover{transform:translateY(-2px);color:var(--bxsg-ink)}.index-card h2{font-size:var(--bxsg-text-lg);line-height:var(--bxsg-lh-lg);letter-spacing:0}.index-card p{max-width:none;color:var(--bxsg-ink-2);font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm)}.index-card__n{font-family:var(--bxsg-font-mono);font-size:var(--bxsg-text-sm);color:var(--bxsg-ink-3)}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:var(--bxsg-space-5);margin:0;padding:0;list-style:none}.gallery-card{display:grid;gap:var(--bxsg-space-3);color:var(--bxsg-ink)}.gallery-card:hover{color:var(--bxsg-ink)}.gallery-card__canvas{display:grid;place-items:center;aspect-ratio:3 / 2;border-radius:var(--bxsg-radius-md);background:var(--demo-well, var(--bxsg-canvas));box-shadow:var(--bxsg-ring);overflow:hidden;transition:transform var(--bxsg-dur-base) var(--bxsg-ease-out)}.gallery-card:hover .gallery-card__canvas{transform:translateY(-2px)}.gallery-card__canvas .demo{width:44%;height:44%}.gallery-card__canvas[data-image]{background-image:var(--demo-image);background-size:cover;background-position:center}.gallery-card__canvas.specimen--dark{--demo-well: var(--bxsg-band)}.gallery-card h2{font-size:var(--bxsg-text-lg);line-height:var(--bxsg-lh-lg);letter-spacing:0}.gallery-card p{max-width:none;color:var(--bxsg-ink-2);font-size:var(--bxsg-text-sm);line-height:var(--bxsg-lh-sm)}.specimen{display:grid;place-items:center;min-height:18rem;margin-block:var(--bxsg-space-2) var(--bxsg-space-6);border-radius:var(--bxsg-radius-lg);background:var(--demo-well, var(--bxsg-canvas));box-shadow:var(--bxsg-ring)}.specimen--dark{--demo-well: var(--bxsg-band)}.specimen .demo{width:var(--demo-w, 15rem);height:var(--demo-h, 10rem);border-radius:var(--demo-radius, var(--bxsg-radius-md))}.specimen[data-image]{background-image:var(--demo-image);background-size:cover;background-position:center}.format-tabs{display:grid;gap:var(--bxsg-space-4)}