.specimen{font-size:var(--sp-body-size);border-radius:min(var(--sp-radius),16px)}.sp-body main{padding:calc(var(--sp-space) * 1.75)}.sp-title h2{font-family:var(--sp-display-font),system-ui,sans-serif;font-size:clamp(34px,var(--sp-display-size),72px);font-weight:var(--sp-display-weight);line-height:var(--sp-display-line);letter-spacing:var(--sp-display-track)}.sp-title button{height:var(--sp-button-height);padding:var(--sp-button-padding)}
.sp-body aside span,.sp-metrics,.sp-chart{border-radius:min(var(--sp-radius),16px)}.specimen-compact{border-radius:min(var(--sp-radius),12px)}
.applied-system{margin-top:22px;border:1px solid var(--line);background:var(--panel)}.applied-head{padding:22px 26px;display:flex;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}.applied-head p{max-width:470px;margin:0;color:var(--muted);font-size:12px}.applied-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr}.applied-grid>article{padding:26px;border-right:1px solid var(--line);min-width:0}.applied-grid>article:last-child{border:0}.applied-grid h3{margin:0 0 20px;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}.type-list{display:grid;gap:1px;background:var(--line)}.type-list>div{background:var(--panel);padding:12px;overflow:hidden}.type-list small{display:block;font:8px var(--mono);color:var(--muted);margin-bottom:5px}.space-list{display:grid;gap:12px}.space-list small{display:block;font:8px var(--mono);color:var(--muted);margin-bottom:4px}.space-list i{display:block;height:8px;max-width:100%;background:var(--signal)}.shape-title{margin-top:30px!important}.shape-list{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.shape-list>div{aspect-ratio:1;border:1px solid var(--ink);display:flex;align-items:end;padding:7px}.shape-list small{font:7px/1.4 var(--mono)}.component-demo{display:grid;gap:10px;margin-bottom:20px}.component-demo button{padding:12px;border:1px solid var(--ink);background:var(--ink);color:white;font:10px var(--mono)}.component-demo .secondary{background:transparent;color:var(--ink)}.component-demo label span{display:block;font:8px var(--mono);text-transform:uppercase;margin-bottom:5px}.component-demo input{width:100%;border:1px solid var(--line);background:white;padding:11px}.demo-badge{justify-self:start;padding:5px 9px;background:#dff6e8;color:#155c35;font:9px var(--mono);border-radius:99px}.component-list{max-height:360px;overflow:auto}.component-list details{border-top:1px solid var(--line);padding:9px 0}.component-list summary{font:9px var(--mono);cursor:pointer}.component-list details div{display:flex;justify-content:space-between;gap:10px;margin-top:7px;font-size:8px}.component-list code{overflow-wrap:anywhere;text-align:right}
@media(max-width:950px){.applied-grid{grid-template-columns:1fr}.applied-grid>article{border-right:0;border-bottom:1px solid var(--line)}}@media(max-width:620px){.applied-head{flex-direction:column}.sp-body main{padding:var(--sp-space)}}