.design-page.design-family--design .dcp{--dcp-height:40rem;height:var(--dcp-height);grid-template-columns:14.5rem minmax(0,1fr) minmax(22rem,27rem);gap:1rem;display:grid}.design-page.design-family--design .dcp__stage,.design-page.design-family--design .dcp__stage *,.design-page.design-family--design .dcp__stage :before,.design-page.design-family--design .dcp__stage :after{text-transform:none}.design-page.design-family--design .dcp__list{align-content:start;gap:.5rem;display:grid}.design-page.design-family--design .dcp__list [role=tablist]{gap:.2rem;display:grid}.design-page.design-family--design .dcp__list button{border:0;border-left:2px solid var(--rule);color:var(--ink-faint);font:inherit;text-align:left;cursor:pointer;background:0 0;align-items:baseline;gap:.55rem;padding:.65rem .8rem;font-size:1.28rem;display:flex}.design-page.design-family--design .dcp__list button:hover{color:var(--ink)}.design-page.design-family--design .dcp__list button[aria-selected=true]{border-left-color:var(--family-accent);background:rgba(var(--family-accent-rgb), .1);color:var(--ink)}.design-page.design-family--design .dcp__list button:focus-visible{outline:2px solid var(--family-accent);outline-offset:1px}.design-page.design-family--design .dcp__more{border-left:2px dashed var(--rule);color:var(--ink-quiet);letter-spacing:.08em;margin:0;padding:.45rem .75rem;font-family:IBM Plex Mono,Consolas,SF Mono,monospace;font-size:.82rem}.design-page.design-family--design .dcp__list-title{color:var(--ink-quiet);letter-spacing:.1em;margin:0;font-family:IBM Plex Mono,Consolas,SF Mono,monospace;font-size:.88rem}.design-page.design-family--design .dcp__tab-num{color:var(--family-accent);font-family:IBM Plex Mono,Consolas,SF Mono,monospace;font-size:.9rem}.design-page.design-family--design .dcp__stage{--crop:.9rem;--crop-ink:rgba(var(--family-accent-rgb), .7);background:linear-gradient(var(--crop-ink), var(--crop-ink)) left top/var(--crop) 1px no-repeat, linear-gradient(var(--crop-ink), var(--crop-ink)) left top/1px var(--crop) no-repeat, linear-gradient(var(--crop-ink), var(--crop-ink)) right top/var(--crop) 1px no-repeat, linear-gradient(var(--crop-ink), var(--crop-ink)) right top/1px var(--crop) no-repeat, linear-gradient(var(--crop-ink), var(--crop-ink)) left bottom/var(--crop) 1px no-repeat, linear-gradient(var(--crop-ink), var(--crop-ink)) left bottom/1px var(--crop) no-repeat, linear-gradient(var(--crop-ink), var(--crop-ink)) right bottom/var(--crop) 1px no-repeat, linear-gradient(var(--crop-ink), var(--crop-ink)) right bottom/1px var(--crop) no-repeat, #080707b8;grid-template-rows:auto 1fr auto;gap:.75rem;min-width:0;padding:1.25rem 1.5rem;display:grid}.design-page.design-family--design .dcp__stage>small{color:var(--ink-quiet);letter-spacing:.08em;justify-self:center;font-family:IBM Plex Mono,Consolas,SF Mono,monospace;font-size:.8rem}.design-page.design-family--design .dcp__stage-head{gap:.25rem;display:grid}.design-page.design-family--design .dcp__stage-head h3{color:var(--ink);margin:0;font-size:1.6rem}.design-page.design-family--design .dcp__stage-head p{color:var(--ink-faint);margin:0;font-size:clamp(1.05rem,1rem + .2vw,1.15rem);line-height:1.5}.design-page.design-family--design .dcp__specimen{isolation:isolate;place-items:center;min-height:0;display:grid;overflow:hidden}.design-page.design-family--design .dcp__specimen--pad button{width:clamp(7.5rem,11vw,10rem);font:inherit}.design-page.design-family--design .dcp__specimen--pad button span{font-size:1rem}.design-page.design-family--design .dcp__props{border:1px solid var(--rule);background:#080707d1;align-content:start;gap:0;min-height:0;padding:1.1rem 1.4rem 1.3rem;font-size:1.05rem;display:grid;overflow:auto}.design-page.design-family--design .dcp__props>header{justify-content:space-between;align-items:baseline;padding-bottom:.5rem;display:flex}.design-page.design-family--design .dcp__props>header p{color:var(--family-accent);letter-spacing:.12em;margin:0;font-family:IBM Plex Mono,Consolas,SF Mono,monospace;font-size:.85rem}.design-page.design-family--design .dcp__props fieldset{border:0;gap:.4rem;margin:0;padding:0;display:grid}.design-page.design-family--design .dcp__props legend,.design-page.design-family--design .dcp__props .dcp__field>span{color:var(--ink-quiet);letter-spacing:.1em;padding:0 0 .35rem;font-family:IBM Plex Mono,Consolas,SF Mono,monospace;font-size:.78rem}.design-page.design-family--design .dcp__group{border-top:1px solid var(--rule);gap:.85rem;padding-block:1rem;display:grid}.design-page.design-family--design .dcp__field{display:grid}.design-page.design-family--design .dcp__field input:not([type=range]){border:1px solid var(--rule);width:100%;color:var(--ink);font:inherit;background:#0b0a0a;padding:.45rem .55rem;font-size:1.05rem}.design-page.design-family--design .dcp__field input[type=range]{accent-color:var(--family-accent)}.design-page.design-family--design .dcp__field input:focus-visible{outline:2px solid var(--family-accent);outline-offset:1px}.design-page.design-family--design .dcp__numbers{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;display:grid}.design-page.design-family--design .dcp__chips{flex-wrap:wrap;gap:.35rem;display:flex}.design-page.design-family--design .dcp__chips button{border:1px solid var(--rule);min-width:2.9rem;color:var(--ink-faint);cursor:pointer;background:0 0;padding:.4rem .7rem;font-family:IBM Plex Mono,Consolas,SF Mono,monospace;font-size:.85rem}.design-page.design-family--design .dcp__chips button[aria-pressed=true]{border-color:var(--family-accent);color:var(--ink);background:rgba(var(--family-accent-rgb), .12)}.design-page.design-family--design .dcp__color{align-items:center;gap:.6rem;display:flex}.design-page.design-family--design .dcp__color input[type=color]{border:1px solid var(--rule);cursor:pointer;background:#0b0a0a;width:2.8rem;height:2.4rem;padding:.15rem}.design-page.design-family--design .dcp__color input:not([type=color]){border:1px solid var(--rule);min-width:0;color:var(--ink);background:#0b0a0a;flex:1;padding:.45rem .55rem;font-family:IBM Plex Mono,Consolas,SF Mono,monospace;font-size:.95rem}.design-page.design-family--design .dcp__color input:focus-visible{outline:2px solid var(--family-accent);outline-offset:1px}.design-page.design-family--design .dcp__toggles{color:var(--ink-faint);flex-wrap:wrap;gap:.5rem 1.25rem;font-size:1.05rem;display:flex}.design-page.design-family--design .dcp__toggles label{cursor:pointer;align-items:center;gap:.4rem;display:inline-flex}.design-page.design-family--design .dcp__toggles input{width:1.05rem;height:1.05rem;accent-color:var(--family-accent)}.design-page.design-family--design .dcp__error{color:#ff9aa8;margin:0;font-size:.85rem}.design-page.design-family--design .dcp__reset{color:var(--family-accent);letter-spacing:.08em;cursor:pointer;background:0 0;border:0;padding:0;font-family:IBM Plex Mono,Consolas,SF Mono,monospace;font-size:.82rem}@media (width<=1000px){.design-page.design-family--design .dcp{grid-template-columns:minmax(0,1fr);height:auto}.design-page.design-family--design .dcp__list [role=tablist]{flex-wrap:wrap;gap:.3rem;display:flex}.design-page.design-family--design .dcp__list button{border-left:0;border-bottom:2px solid var(--rule)}.design-page.design-family--design .dcp__list button[aria-selected=true]{border-bottom-color:var(--family-accent)}.design-page.design-family--design .dcp__stage{min-height:20rem}}.design-principles[data-astro-cid-ivszti3f] ul[data-astro-cid-ivszti3f]{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.5rem 2.5rem;margin:0;padding:0;list-style:none;display:grid}.design-principles[data-astro-cid-ivszti3f] li[data-astro-cid-ivszti3f]{border-top:1px solid var(--rule);align-content:start;gap:.5rem;padding-top:.9rem;display:grid}.design-principles[data-astro-cid-ivszti3f] h3[data-astro-cid-ivszti3f]{color:var(--ink);margin:0;font-size:clamp(1.25rem,1.15rem + .35vw,1.45rem)}.design-principles[data-astro-cid-ivszti3f] p[data-astro-cid-ivszti3f]{color:var(--ink-faint);margin:0;font-size:clamp(1.05rem,1rem + .2vw,1.15rem);line-height:1.55}.design-principles[data-astro-cid-ivszti3f] a[data-astro-cid-ivszti3f]{color:var(--family-accent)}.visually-hidden[data-astro-cid-ivszti3f]{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}