.system-frame{padding-bottom:var(--spacing-section);position:relative}.system-rail{top:0;bottom:0;left:calc(var(--spacing-margin) + var(--spine-x) - 5px);background:linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat;width:11px;position:absolute;overflow:clip}.system-needle{background:var(--accent);border-radius:50%;width:9px;height:9px;margin-inline:auto;display:block;position:sticky;top:50svh}.system-needle:before{content:"";background:var(--line-strong);width:1px;height:300vh;position:absolute;bottom:50%;left:4px}.system-part+.system-part{margin-top:var(--spacing-4xl)}.system-head{gap:var(--spacing-lg);padding-top:var(--spacing-3xl);padding-left:calc(var(--spine-x) + var(--spacing-lg));display:grid}.system-label{align-items:baseline;gap:var(--spacing-sm);color:var(--fg-muted);display:flex}.system-lead{max-width:34rem}.system-title{text-box:trim-both cap alphabetic;max-width:20ch;box-shadow:0 1px 0 var(--line);padding-bottom:0}.system-stages{margin-top:var(--spacing-3xl)}.stage{gap:var(--spacing-md);padding-block:var(--spacing-2xl);padding-left:calc(var(--spine-x) + var(--spacing-lg));border-bottom:1px solid var(--line);display:grid;position:relative}.stage:before{content:"";top:calc(var(--spacing-2xl) + .9rem);left:var(--spine-x);width:var(--spacing-md);background:var(--line-strong);height:1px;position:absolute}.stage-mark{align-items:baseline;gap:var(--spacing-md);display:flex}.stage-index{color:var(--fg-muted)}.stage-summary{max-width:34rem}@media (width>=64rem){.system-head,.stage{column-gap:var(--spacing-gutter);grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;padding-left:0}.system-label,.stage-mark{grid-column:2/span 4}.system-title{grid-column:6/-1}.system-lead{grid-column:6/span 6}.stage{align-items:start}.stage-body{grid-column:6/span 6}.stage:before{width:calc((100% - 11 * var(--spacing-gutter)) / 12 + var(--spacing-gutter) - var(--spine-x))}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.system-head,.stage,.discipline{animation:linear both system-assemble;animation-timeline:view();animation-range:entry 10% cover 40%}}}.system[data-still] :is(.system-head,.stage,.discipline){animation:none}@keyframes system-assemble{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}.glyph{flex:none;align-self:center;width:1.75rem;height:1.75rem;overflow:visible}.glyph :is(circle,rect,line,path){fill:none;stroke:var(--line-strong);stroke-width:1.25px;vector-effect:non-scaling-stroke;transition:stroke var(--duration-medium) var(--ease-ui), stroke-dashoffset var(--duration-slow) var(--ease-settle), transform var(--duration-slow) var(--ease-settle)}.glyph .g-point{stroke:none;fill:var(--line-strong);transition:fill var(--duration-medium) var(--ease-ui)}.glyph :is(.g-draw,.g-orbit){stroke-dasharray:1;stroke-dashoffset:.6px}.glyph .g-move{transform:translate(-5px,5px)}.glyph .g-refine{transform-box:fill-box;transform-origin:50%}.stage-index,.stage:before{transition:color var(--duration-medium) var(--ease-ui), background-color var(--duration-medium) var(--ease-ui)}.stage[data-active] .stage-index{color:var(--accent)}.stage[data-active]:before{background:var(--accent)}.stage[data-active] .glyph :is(circle,rect,line,path){stroke:var(--fg)}.stage[data-active] .glyph :is(.g-draw,.g-orbit){stroke-dashoffset:0}.stage[data-active] .glyph .g-point{fill:var(--accent)}.stage[data-active] .glyph .g-move{stroke:var(--accent);transform:translate(5px,-5px)}.stage[data-active] .glyph .g-refine{stroke:var(--accent);transform:scale(.45)}