.cad-demo .demo__stage{padding:calc(var(--spacing) * 5)}.cad-demo h4{font-size:var(--text-sm);color:var(--color-text-high);margin:0;font-weight:500;line-height:1.5}.cad-demo__choices{gap:calc(var(--spacing) * 2);flex-wrap:wrap;display:flex}.cad-demo__representation{align-items:center;gap:calc(var(--spacing) * 5);margin-block:calc(var(--spacing) * 4);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.cad-demo__plot,.cad-demo__window{block-size:auto;inline-size:100%;display:block;overflow:visible}.cad-demo__guide{fill:none;stroke:var(--color-line-control);stroke-width:1px;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}.cad-demo__shape{fill:var(--color-accent-subtle);stroke:var(--color-accent-ink);stroke-width:2px}.cad-demo__boundary,.cad-demo__reference{fill:none;stroke:var(--color-text-high);stroke-width:1.5px}.cad-demo__reference{stroke-dasharray:3 5}.cad-demo__point{fill:var(--color-accent-ink)}.cad-demo__inside{fill:var(--color-accent-ink);fill-opacity:.07;stroke:var(--color-accent-ink);stroke-opacity:.35}.cad-demo__outside{fill:none;stroke:var(--color-text-low);stroke-dasharray:3 5}.cad-demo__svg-label{fill:var(--color-text-high);font-size:var(--text-xl)}.cad-demo__explanation p{margin:calc(var(--spacing) * 2) 0;color:var(--color-text-mid);font-size:var(--text-sm);line-height:1.6}.cad-demo__explanation code{font-size:var(--text-xs);overflow-wrap:anywhere;color:var(--color-text-high)}.cad-demo__range{margin-block:calc(var(--spacing) * 4);font-size:var(--text-xs);color:var(--color-text-high)}.cad-demo__range>div{justify-content:space-between;gap:calc(var(--spacing) * 2);display:flex}.cad-demo__range output{white-space:nowrap;font-variant-numeric:tabular-nums}.cad-demo__range input{inline-size:100%;min-block-size:calc(var(--spacing) * 8);accent-color:var(--color-accent-ink);cursor:pointer;margin:0;display:block}.cad-demo__range input:focus-visible{outline:2px solid var(--color-accent-ink);outline-offset:var(--spacing);border-radius:var(--radius-control)}.cad-demo__pair,.cad-demo__trio{gap:calc(var(--spacing) * 4);margin-block:calc(var(--spacing) * 5);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.cad-demo__trio{grid-template-columns:repeat(3,minmax(0,1fr))}.cad-demo__pair h4,.cad-demo__trio h4{min-block-size:3em}.cad-demo__frame-shape{fill:var(--color-accent-ink)}.cad-demo__opening{fill:var(--sunk)}.cad-demo .cad-demo__measure{font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--color-text-high);line-height:1.7}.cad-demo__steps{gap:calc(var(--spacing) * 2);grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.cad-demo__steps button{inline-size:100%}.cad-demo__stage-copy{min-block-size:8em;padding-block:calc(var(--spacing) * 5)}@media (max-width:40rem){.cad-demo__representation{gap:calc(var(--spacing) * 2);grid-template-columns:1fr}.cad-demo__plot{max-inline-size:16rem;margin-inline:auto}.cad-demo__steps{grid-template-columns:repeat(2,minmax(0,1fr))}.cad-demo .demo__stage{padding:calc(var(--spacing) * 3)}}