@view-transition{navigation:auto}body.system-page{background:var(--ground);color:var(--ink);scroll-behavior:smooth}body.system-page *{border-radius:0}.system-shell{position:relative;display:flex;align-items:flex-start;min-height:100vh;container-type:inline-size;container-name:system-shell}.system-sidebar-nav{display:flex;flex-direction:column;flex-shrink:0;width:calc(15 * var(--cell));position:sticky;top:0;height:100vh;overflow-y:auto;padding:var(--space-subsections) var(--space-blocks);box-shadow:1px 0 0 var(--border);gap:var(--space-within)}.system-top-nav{display:none}@media(max-width:791px){.system-shell{display:block}}@container system-shell (max-width: 791px){.system-sidebar-nav{display:none}.system-top-nav{display:flex;flex-direction:column;position:sticky;top:0;z-index:10;background:var(--ground);box-shadow:0 1px 0 var(--border)}}.system-content{flex:1;min-width:0;padding-block:var(--space-subsections);display:flex;flex-direction:column;gap:0;container-type:inline-size;container-name:content-column}.system-content>*{padding-inline:var(--space-subsections);padding-block-end:calc(var(--space-sections) / 2)}.system-content>*:last-child{padding-block-end:0}.system-nav__item{display:block;padding:var(--space-within) var(--space-related);text-decoration:none;color:var(--ink-secondary);white-space:nowrap;&.is-active{color:var(--ink)}&:focus-visible{color:var(--ink)}&:active{opacity:.85}}@media(hover:hover){.system-nav__item:hover{background:var(--surface);color:var(--ink)}}.system-nav__back{display:flex;align-items:center;gap:var(--space-within);padding:var(--space-within) 0;text-decoration:none;color:var(--accent);flex-shrink:0;& svg{flex-shrink:0}&:focus-visible{color:var(--ink)}&:active{opacity:.85}}.system-sidebar-nav .system-nav__back{margin-bottom:var(--space-blocks)}.system-content>*+*{border-block-start:1px solid var(--border);padding-block-start:calc(var(--space-sections) / 2)}.system-search{position:relative}.system-search__input{width:100%;background:transparent;border:1px solid var(--border);color:var(--ink);padding:var(--space-within) var(--space-related);padding-right:calc(var(--space-related) + 12px + var(--space-within));outline:none;-webkit-appearance:none;appearance:none}.system-search__input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}.system-search__clear{position:absolute;right:var(--space-within);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ink-secondary);cursor:pointer;padding:var(--space-within);display:flex;align-items:center;justify-content:center;&[hidden]{display:none}}.system-search__input::placeholder{color:var(--ink-secondary)}.system-search__input:focus{border-color:var(--accent)}.system-search__results{position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--ground);border:1px solid var(--border);border-top:none;list-style:none;max-height:calc(var(--cell) * 12);overflow-y:auto}.system-search__result{display:block;padding:var(--space-within) var(--space-related);color:var(--ink-secondary);text-decoration:none;cursor:pointer}.system-search__result-tier{color:var(--ink-secondary);opacity:.5}.system-search__result.is-active{background:var(--surface);color:var(--ink)}.system-search__result:focus-visible{background:var(--surface);color:var(--ink)}@media(hover:hover){.system-search__result:hover{background:var(--surface);color:var(--ink)}}.system-search__empty{padding:var(--space-within) var(--space-related);color:var(--ink-secondary)}.system-nav__list{list-style:none;display:flex;flex-direction:column;gap:0}.system-subnav{list-style:none;display:flex;flex-direction:column;gap:0;&[hidden]{display:none}.system-nav__item{padding-left:var(--space-blocks)}}.system-top-nav__primary{display:flex;align-items:center;padding:var(--space-related) var(--space-blocks);gap:var(--space-within)}.system-top-nav__scroll{overflow-x:auto;flex:1;min-width:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;mask-image:linear-gradient(to right,black calc(100% - var(--space-blocks)),transparent);&::-webkit-scrollbar{display:none}}.system-top-nav__items{list-style:none;display:flex;align-items:center;gap:0;flex-shrink:0;width:max-content;padding-inline-end:var(--space-blocks)}.system-top-nav .system-search{margin-left:auto;flex-shrink:0;width:clamp(calc(6 * var(--cell)),20%,200px)}@container system-shell (max-width: 551px){.system-top-nav__primary{flex-wrap:wrap}.system-top-nav__scroll{order:1;flex-basis:100%}}.system-top-nav__sub-row{list-style:none;display:none;align-items:center;gap:0;padding:0 var(--space-blocks) var(--space-within);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;box-shadow:0 -1px 0 var(--border);mask-image:linear-gradient(to right,black calc(100% - var(--space-blocks)),transparent);&::-webkit-scrollbar{display:none}&.is-visible{display:flex}}.system-section-heading{color:var(--ink);overflow-wrap:anywhere}.system-tier-heading{color:var(--ink)}[data-internal],.system-entry-card[data-internal],.system-component-group[data-internal]{display:none}body.is-showing-internals [data-internal]{display:revert}body.is-showing-internals .system-entry-card[data-internal],body.is-showing-internals .system-component-group[data-internal]{display:flex}.system-internals-toggle{display:flex;align-items:center;gap:var(--space-within);cursor:pointer;margin-top:auto;color:var(--ink-secondary)}.system-internals-toggle__input{position:absolute;opacity:0;width:0;height:0}.system-internals-toggle__track{position:relative;width:28px;height:14px;background:var(--border);transition:background .2s var(--ease)}.system-internals-toggle__track:after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;background:var(--ink-secondary);transition:transform .2s var(--ease),background .2s var(--ease)}.system-internals-toggle__input:checked+.system-internals-toggle__track{background:var(--accent)}.system-internals-toggle__input:checked+.system-internals-toggle__track:after{transform:translate(14px);background:var(--ink)}.system-internals-toggle__input:focus-visible+.system-internals-toggle__track{outline:2px solid var(--accent);outline-offset:2px}@media(hover:hover){.system-internals-toggle:hover{color:var(--ink)}}.system-foundations-section{display:flex;flex-direction:column;gap:var(--space-blocks)}.system-intro-body{display:flex;flex-direction:column;gap:var(--space-subsections);max-width:var(--measure)}.system-intro-body>p{color:var(--ink)}.system-intro-block{display:flex;flex-direction:column;gap:var(--space-heading-after)}.system-intro-block p{color:var(--ink)}.system-prose{display:flex;flex-direction:column;gap:var(--space-blocks);max-width:var(--measure)}.system-prose p{color:var(--ink)}.system-prose p.fg-ink-secondary{color:var(--ink-secondary)}.system-measure{max-width:var(--measure)}.system-schema-divider{border:none;border-top:1px solid var(--border)}.system-spacing-specimens{display:flex;flex-direction:column;gap:var(--space-related)}.system-specimens{display:flex;flex-direction:column;gap:var(--space-subsections)}.system-type-specimen{display:flex;flex-direction:column;gap:var(--space-within)}.system-type-specimen__label,.system-type-specimen__specs{color:var(--ink-secondary)}.system-type-specimen__label{text-transform:uppercase}.system-token-readouts{display:flex;flex-direction:column;gap:var(--space-within)}.system-token-readout{display:flex;flex-direction:row;align-items:center;gap:var(--space-related);background:var(--surface);padding:var(--space-related) var(--space-blocks)}.system-token-readout__swatch{width:var(--cell);height:var(--cell);flex-shrink:0;outline:1px solid var(--border);outline-offset:-1px}.system-token-readout__label{color:var(--ink-secondary)}.system-token-readout__value{color:var(--ink);min-width:0;overflow-wrap:anywhere}.system-live-demo{background:var(--surface);padding:var(--space-200);display:flex;flex-direction:column;gap:var(--space-related)}.system-live-demo__label,.system-live-demo__placeholder{color:var(--ink-secondary)}.system-icon-inventory{display:flex;flex-direction:column;gap:var(--space-within)}.system-stroke-techniques{display:flex;flex-direction:column;gap:var(--space-blocks)}.system-stroke-technique{display:flex;align-items:flex-start;gap:var(--space-blocks)}.system-stroke-technique__demo{flex-shrink:0;width:calc(4 * var(--cell));height:calc(3 * var(--cell));display:flex;align-items:center;justify-content:center;background:var(--surface)}.system-stroke-technique__pair{display:flex;gap:0}.system-stroke-technique__slab{width:calc(1.5 * var(--cell));height:calc(2 * var(--cell));background:var(--ground)}.system-stroke-technique__pair>.system-stroke-technique__slab:first-child{box-shadow:1px 0 0 var(--border)}.system-stroke-technique__divider{width:calc(3 * var(--cell));border-top:1px solid var(--border)}.system-stroke-technique__focus-target{width:calc(2 * var(--cell));height:calc(1.5 * var(--cell));background:var(--ground);outline:2px solid var(--accent);outline-offset:2px}.system-stroke-technique__info{display:flex;flex-direction:column;gap:var(--space-within);padding-block:var(--space-within)}.system-stroke-collapsed,.system-stroke-collapsed__demo{display:flex;flex-direction:column;gap:var(--space-blocks)}.system-stroke-collapsed__grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);max-width:calc(8 * var(--cell))}.system-stroke-collapsed__cell{padding:var(--space-related) var(--space-blocks);background:var(--ground);box-shadow:-1px -1px 0 0 var(--border);color:var(--ink-secondary)}.system-tier-group{display:flex;flex-direction:column;gap:var(--space-subsections)}.system-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);row-gap:var(--space-blocks)}@media(max-width:799px){.system-overview-grid{grid-template-columns:1fr}}.system-group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));row-gap:var(--space-blocks)}@media(max-width:799px){.system-group-grid{grid-template-columns:1fr}}.system-component-group{display:flex;flex-direction:column;gap:var(--space-subsections)}.system-group-header{display:flex;flex-direction:column;gap:var(--space-heading-after)}.system-group-heading{color:var(--ink)}.system-group-description{color:var(--ink-secondary);max-width:var(--measure)}.system-entries{display:flex;flex-direction:column;gap:var(--space-sections)}.system-entry-card{display:flex;flex-direction:column;gap:var(--space-blocks)}.system-entry-card__intro{display:flex;flex-direction:column;gap:var(--space-heading-after)}.system-entry-card__header{display:flex;align-items:center;gap:var(--space-related)}.system-entry-card__heading{color:var(--ink)}.system-entry-card__why{color:var(--ink-secondary);max-width:var(--measure)}.system-entry-card__preview{display:flex;flex-direction:column;gap:0}.system-entry-card__toolbar{display:flex;gap:var(--space-related);align-self:flex-end}.system-entry-card__btn-group{display:flex;gap:0}.system-entry-card__preview-btn{padding:var(--space-within) var(--space-related);color:var(--ink-secondary);background:var(--surface);outline:1px solid var(--border);outline-offset:-1px;cursor:pointer;text-decoration:none;&.is-active{color:var(--ink);background:var(--ground)}}@media(hover:hover){.system-entry-card__preview-btn:hover{color:var(--ink)}}.system-entry-card__show-me{margin-left:auto}.system-entry-card__render{background:var(--surface);outline:1px solid var(--border);outline-offset:-1px;overflow:auto;max-height:calc(var(--cell) * 24);padding:var(--space-blocks);scrollbar-width:thin;scrollbar-color:var(--border) transparent}.system-entry-card__viewport{background:var(--ground);padding:var(--space-blocks);transform-origin:0 0}body.is-showing-grid .system-entry-card__viewport{background-image:linear-gradient(to right,var(--border) 1px,transparent 1px),linear-gradient(to bottom,var(--border) 1px,transparent 1px);background-size:var(--cell) var(--cell)}body.is-showing-grid [data-grid-toggle]{color:var(--ink);background:var(--ground)}.pattern-sim--cursor{position:relative;height:calc(var(--cell) * 6);background:var(--surface);outline:1px solid var(--border);outline-offset:-1px;overflow:hidden}.pattern-sim--reveal{display:flex;flex-direction:column;gap:var(--space-blocks)}@keyframes cursor-path{0%,to{left:15%;top:60%}25%{left:50%;top:30%}50%{left:75%;top:55%}75%{left:35%;top:40%}}body.system-page .pattern-sim__cursor-dot{position:absolute;width:8px;height:8px;background:var(--ink);border-radius:50%;animation:cursor-path 4s var(--ease) infinite}.pattern-sim__cursor-label{position:absolute;padding:var(--space-within) var(--space-related);background:var(--ink);color:var(--ground);white-space:nowrap;animation:cursor-path 4s var(--ease) infinite;translate:12px -50%}@keyframes reveal-in{0%,40%{opacity:.15;translate:0 var(--cell)}60%,to{opacity:1;translate:0 0}}.pattern-sim__reveal-item{height:var(--cell);background:var(--ink);opacity:.15;animation:reveal-in 3s var(--ease) infinite}.pattern-sim__reveal-item:nth-child(2){animation-delay:.24s}.pattern-sim__reveal-item:nth-child(3){animation-delay:.48s}.system-entry-card__metadata{display:flex;flex-direction:column;gap:var(--space-blocks)}@container content-column (min-width: 680px){.system-entry-card__metadata{flex-direction:row;align-items:flex-start}.system-entry-card__metadata>*{flex:1;min-width:0}}.system-entry-card__prose{color:var(--ink-secondary);max-width:var(--measure)}.system-meta-block{background:var(--surface);padding:var(--space-blocks);display:flex;flex-direction:column;gap:var(--space-150)}.system-meta-block__heading{color:var(--ink)}.system-meta-block__body{display:flex;flex-direction:column;gap:var(--space-blocks)}.system-meta-block__row{display:flex;gap:var(--space-related)}.system-meta-block__label{color:var(--ink-secondary);min-width:5rem;flex-shrink:0;padding-block:var(--space-within)}.system-meta-block__tokens{display:flex;flex-wrap:wrap;gap:var(--space-within)}.system-meta-block__tokens .label{min-width:0;overflow-wrap:anywhere}.system-meta-block__value{color:var(--ink);min-width:0;overflow-wrap:anywhere}.system-meta-block__constraints{border-top:1px dashed var(--border);padding-top:var(--space-related);display:flex;flex-direction:column;gap:var(--space-related)}.system-meta-block__constraint{display:flex;flex-direction:column;gap:var(--space-within)}.system-meta-block__constraint-rule{color:var(--ink);overflow-wrap:anywhere}.system-meta-block__constraint-reason{color:var(--ink-secondary);overflow-wrap:anywhere}.system-meta-block__constraint-reason:before{content:"— "}.label[data-astro-cid-bzpaxggb]{display:inline-flex;align-items:center;padding:var(--space-within);color:var(--ink-secondary);box-shadow:inset 0 0 0 1px var(--border);text-decoration:none}@media(hover:hover){.label--linked[data-astro-cid-bzpaxggb]:hover{background:var(--ground);color:var(--ink)}}.label--linked[data-astro-cid-bzpaxggb]:focus-visible{color:var(--ink)}.quote-card[data-astro-cid-oe65w6pe]{display:flex;flex-direction:column;gap:var(--space-blocks);background:transparent;padding:var(--space-inset);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);text-decoration:none}.quote-card__quote[data-astro-cid-oe65w6pe]{color:var(--ink-secondary)}.system-easing-demo[data-astro-cid-oq565qgv]{display:flex;flex-direction:column;gap:var(--space-subsections)}.system-easing-demo__curve[data-astro-cid-oq565qgv]{display:flex;flex-direction:column;gap:var(--space-within);max-width:200px}.system-easing-demo__svg[data-astro-cid-oq565qgv]{width:100%;height:auto}.system-easing-demo__diagonal[data-astro-cid-oq565qgv]{stroke:var(--border);stroke-width:1;stroke-dasharray:4 4}.system-easing-demo__path[data-astro-cid-oq565qgv]{fill:none;stroke:var(--ink);stroke-width:2}.system-easing-demo__handle[data-astro-cid-oq565qgv]{fill:var(--accent)}.system-easing-demo__arm[data-astro-cid-oq565qgv]{stroke:var(--accent);stroke-width:1;opacity:.5}.system-easing-demo__labels[data-astro-cid-oq565qgv]{display:flex;justify-content:space-between;color:var(--ink-secondary)}.system-easing-demo__preview[data-astro-cid-oq565qgv]{display:flex;flex-direction:column;gap:var(--space-related);container-type:inline-size}.system-easing-demo__track[data-astro-cid-oq565qgv]{height:calc(var(--cell) * 2);background:var(--ground);outline:1px solid var(--border);outline-offset:-1px;position:relative}.system-easing-demo__box[data-astro-cid-oq565qgv]{width:calc(var(--cell) * 2);height:100%;background:var(--accent);opacity:.6}.system-easing-demo__trigger[data-astro-cid-oq565qgv]{align-self:flex-start;padding:var(--space-within) var(--space-related);color:var(--ink);background:var(--surface);outline:1px solid var(--border);outline-offset:-1px;cursor:pointer}@media(hover:hover){.system-easing-demo__trigger[data-astro-cid-oq565qgv]:hover{background:var(--ground)}}.system-easing-demo__value[data-astro-cid-oq565qgv]{color:var(--ink-secondary)}.system-grid-demo[data-astro-cid-6fefxe57]{display:flex;flex-direction:column;gap:var(--space-related)}.system-grid-demo__strip[data-astro-cid-6fefxe57]{display:flex;max-width:100%;overflow:hidden}.system-grid-demo__cell[data-astro-cid-6fefxe57]{flex:0 0 var(--cell);aspect-ratio:1;background:var(--accent);opacity:.08}.system-grid-demo__cell[data-astro-cid-6fefxe57]:nth-child(odd){opacity:.15}.system-grid-demo__measure[data-astro-cid-6fefxe57]{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.system-grid-demo__bracket[data-astro-cid-6fefxe57]{height:2px;background:var(--accent);width:var(--cell);position:relative}.system-grid-demo__bracket[data-astro-cid-6fefxe57]:before,.system-grid-demo__bracket[data-astro-cid-6fefxe57]:after{content:"";position:absolute;width:1px;height:6px;background:var(--accent);bottom:0}.system-grid-demo__bracket[data-astro-cid-6fefxe57]:before{left:0}.system-grid-demo__bracket[data-astro-cid-6fefxe57]:after{right:0}.system-grid-demo__cell-label[data-astro-cid-6fefxe57]{color:var(--accent)}.system-grid-demo__readout[data-astro-cid-6fefxe57]{display:flex;align-items:baseline;gap:var(--space-within)}.system-grid-demo__stat[data-astro-cid-6fefxe57]{color:var(--ink)}.system-grid-demo__separator[data-astro-cid-6fefxe57]{color:var(--ink-secondary)}.system-icon-specimen[data-astro-cid-67vuzxud]{display:flex;align-items:center;gap:var(--space-blocks);padding:var(--space-inset);background:var(--surface)}.system-icon-specimen__preview[data-astro-cid-67vuzxud]{flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink)}.system-icon-specimen__preview[data-astro-cid-67vuzxud] svg{width:100%;height:100%}.system-icon-specimen__info[data-astro-cid-67vuzxud]{display:flex;flex-direction:column;gap:var(--space-within)}.system-icon-specimen__name[data-astro-cid-67vuzxud]{color:var(--ink)}.system-icon-specimen__detail[data-astro-cid-67vuzxud],.system-icon-specimen__used-in[data-astro-cid-67vuzxud]{color:var(--ink-secondary)}.system-spacing-specimen[data-astro-cid-cfa2sbik]{display:flex;align-items:center;gap:var(--space-blocks)}.system-spacing-specimen__bar[data-astro-cid-cfa2sbik]{background:var(--accent);opacity:.4;min-width:var(--space-012);min-height:var(--space-012);flex-shrink:0}.system-spacing-specimen__info[data-astro-cid-cfa2sbik]{display:flex;flex-direction:column;gap:var(--space-within)}.system-spacing-specimen__token[data-astro-cid-cfa2sbik]{color:var(--ink)}.system-spacing-specimen__desc[data-astro-cid-cfa2sbik]{color:var(--ink-secondary)}.system-next[data-astro-cid-s3a5p6tn]{display:flex;flex-direction:column;gap:var(--space-heading-after)}.system-next__label[data-astro-cid-s3a5p6tn]{color:var(--ink-secondary)}.system-schema-properties[data-astro-cid-hcijto5e]{display:flex;flex-direction:column;gap:var(--space-blocks)}.system-schema-prop[data-astro-cid-hcijto5e]{display:flex;flex-direction:column;gap:var(--space-within)}.system-schema-prop[data-astro-cid-hcijto5e] code[data-astro-cid-hcijto5e]{background:var(--surface);padding:0 var(--space-within)}.system-schema-prop[data-astro-cid-hcijto5e] code[data-astro-cid-hcijto5e],.system-prose[data-astro-cid-hcijto5e] code[data-astro-cid-hcijto5e]{overflow-wrap:anywhere}.system-schema-components[data-astro-cid-hcijto5e]{display:flex;flex-wrap:wrap;gap:var(--space-related)}.system-schema-component-link[data-astro-cid-hcijto5e]{color:var(--ink-secondary);text-decoration:none;padding:0 var(--space-within);box-shadow:inset 0 0 0 1px var(--border)}@media(hover:hover){.system-schema-component-link[data-astro-cid-hcijto5e]:hover{color:var(--ink);background:var(--surface)}}