:root{--j-shell:76rem;--j-gutter:clamp(1.25rem, 5vw, 3.5rem);--j-gap:2rem;--j-band:clamp(3.5rem, 8vw, 6rem)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--sl-color-bg);color:var(--sl-color-white);font-family:var(--sl-font);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:1rem;line-height:1.6}.shell{max-width:var(--j-shell);padding-inline:var(--j-gutter);margin-inline:auto}a{color:var(--sl-color-text-accent)}:where(a,button):focus-visible{outline:2px solid var(--sl-color-text-accent);outline-offset:2px;border-radius:2px}.skip{inset-inline-start:-100vw;z-index:2;background:var(--j-oxide-deep);color:var(--j-paper);border-radius:var(--sl-border-radius);padding:.5rem .75rem;text-decoration:none;position:absolute;top:.5rem}.skip:focus{inset-inline-start:.5rem}.mark{flex-shrink:0;width:1.75rem;height:1.75rem}.bar-oxide{fill:var(--j-oxide)}.bar-canvas{fill:var(--sl-color-white)}.bar-signal{fill:var(--j-chartreuse)}.masthead{border-bottom:1px solid var(--sl-color-hairline)}.masthead-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.125rem;display:flex}.lockup{align-items:center;gap:.625rem;margin:0;display:flex}.wordmark{letter-spacing:-.04em;font-size:1.375rem;font-weight:700}.masthead-nav{align-items:center;gap:clamp(1rem,3vw,1.75rem);font-size:1rem;display:flex}.masthead-nav a{color:var(--sl-color-gray-2);text-decoration:none}.masthead-nav a:hover{color:var(--sl-color-white)}.canvas-toggle{border:1px solid var(--sl-color-hairline-light);border-radius:var(--sl-border-radius);min-height:2.25rem;color:var(--sl-color-gray-2);font:inherit;cursor:pointer;background:0 0;align-items:center;gap:.5rem;padding:.375rem .75rem .375rem .5rem;font-size:.9375rem;display:flex}.canvas-toggle[hidden]{display:none}.canvas-toggle:hover{color:var(--sl-color-white)}.swatch{border:1px solid var(--sl-color-hairline-light);background:var(--sl-color-white);width:.75rem;height:.75rem}.display{font-family:var(--j-font-display);font-variation-settings:var(--j-font-display-axes);letter-spacing:-.03em;text-wrap:balance;margin:0;font-weight:400;line-height:.94}h1.display{max-width:20ch;font-size:clamp(2.75rem,8.5vw,5.25rem)}.heading{max-width:24ch;font-size:clamp(1.875rem,4.5vw,3rem)}.eyebrow{font-family:var(--sl-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sl-color-gray-2);margin:0;font-size:.8125rem}.lead{max-width:46ch;color:var(--sl-color-gray-2);text-wrap:pretty;margin:1.5rem 0 0;font-size:clamp(1.0625rem,1.4vw,1.25rem)}.body{max-width:56ch;color:var(--sl-color-gray-2);text-wrap:pretty;margin:1rem 0 0}.note{max-width:52ch;color:var(--sl-color-gray-2);text-wrap:pretty;margin:2rem 0 0}.actions{flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin:2.25rem 0 0;display:flex}.button-primary{border-radius:var(--sl-border-radius);background:var(--j-oxide-deep);color:var(--j-paper);padding:.6875rem 1.125rem;font-weight:600;text-decoration:none}.button-primary:hover{background:var(--j-oxide-press)}.button-link{text-underline-offset:.25em;font-weight:500;text-decoration:underline 1px}.lede{gap:var(--j-gap);padding-block:clamp(3rem, 9vw, 6.5rem) var(--j-band);display:grid}.lede-copy{min-width:0}.spec{border-top:1px solid var(--sl-color-hairline);min-width:0;padding-top:1.5rem}.spec-heading{margin-bottom:.5rem}.spec-list{margin:0}.spec-row{border-bottom:1px solid var(--sl-color-hairline);flex-wrap:wrap;justify-content:space-between;gap:.25rem 1.5rem;padding-block:.875rem;display:flex}.spec-row dt{font-weight:600}.spec-row dd{text-align:end;color:var(--sl-color-gray-2);margin:0;font-size:.9375rem}.spec-also{font-family:var(--sl-font-mono);letter-spacing:.04em;color:var(--sl-color-gray-2);font-size:.8125rem;display:block}.spec-foot{margin:1rem 0 0;font-size:.9375rem}.shot{padding-block:0 var(--j-band)}.shot-image{border:1px solid var(--sl-color-hairline);border-radius:var(--sl-border-radius);width:100%;height:auto;display:block}.shot-ivory,:root[data-theme=light] .shot-ink{display:none}:root[data-theme=light] .shot-ivory{display:block}.shot-caption{max-width:60ch;color:var(--sl-color-gray-2);text-wrap:pretty;margin:1rem 0 0;font-size:.9375rem}.band{padding-block:0 var(--j-band)}.band-head>.eyebrow{margin-bottom:1rem}.sequence,.surfaces{gap:var(--j-gap);margin:2.5rem 0 0;display:grid}.sequence-item,.surface-item{border-top:1px solid var(--sl-color-hairline-light);min-width:0;padding-top:1rem}.step{font-family:var(--sl-font-mono);letter-spacing:.08em;color:var(--sl-color-text-accent);margin-bottom:.75rem;font-size:.8125rem;font-weight:400;display:block}.sequence-item dt,.surface-item dt{font-size:1.125rem;font-weight:600}.sequence-item dd,.surface-item dd{color:var(--sl-color-gray-2);text-wrap:pretty;margin:.5rem 0 0}.sequence-item dd .inline-link{margin-top:.75rem;font-size:.9375rem;display:block}.surface-item dt a{color:var(--sl-color-white);border-bottom:1px solid var(--sl-color-accent);text-decoration:none}.surface-item dt a:hover{color:var(--sl-color-text-accent)}.split{gap:var(--j-gap);margin-top:2rem;display:grid}.split>div{border-top:1px solid var(--sl-color-hairline-light);min-width:0;padding-top:1rem}.split .body{margin-top:.75rem}.close{border-top:1px solid var(--sl-color-hairline);padding-top:var(--j-band)}.site-foot{border-top:1px solid var(--sl-color-hairline);background:var(--sl-color-gray-6)}.foot-inner{gap:var(--j-gap);padding-block:clamp(2.5rem,5vw,3.5rem);display:grid}.foot-brand .mark{width:1.5rem;height:1.5rem}.foot-note{max-width:34ch;color:var(--sl-color-gray-2);text-wrap:pretty;margin:1rem 0 0;font-size:.9375rem}.foot-nav{gap:var(--j-gap);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.foot-nav ul{margin:.75rem 0 0;padding:0;list-style:none}.foot-nav li+li{margin-top:.375rem}.foot-nav a{color:var(--sl-color-gray-2);font-size:.9375rem;font-weight:400;text-decoration:none}.foot-nav a:hover{color:var(--sl-color-white)}@media (width>=34rem){.surfaces{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-nav{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width>=48rem){.sequence,.split{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=60rem){.lede{grid-template-columns:3fr 2fr;gap:clamp(2rem,5vw,4.5rem)}.spec{border-top:0;border-inline-start:1px solid var(--sl-color-hairline);padding-top:.5rem;padding-inline-start:clamp(1.5rem,3vw,2.5rem)}.sequence,.surfaces{grid-template-columns:repeat(4,minmax(0,1fr))}.foot-inner{grid-template-columns:1fr 2fr}}@media (width<=33.9375rem){.wide-only{display:none}}