@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.content{position:relative}.content:before{content:"";left:-100%;right:calc(var(--spacing) * -2);z-index:-1;background-image:repeating-linear-gradient(180deg, oklch(from var(--color-border-base) l c h/.2), oklch(from var(--color-border-base) l c h/.2) var(--spacing), transparent var(--spacing), transparent calc(var(--spacing) * 2));height:calc(100% + 1px);display:block;position:absolute}.font-size-demo>*{margin-bottom:var(--spacing);margin-top:0!important}.font-weight-demo{gap:calc(var(--spacing) * 2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.font-weight-demo strong{font-size:var(--font-size-h4);line-height:var(--line-height-h4);font-optical-sizing:auto;margin-bottom:0;font-family:Inter,sans-serif;font-style:normal}.font-weight-demo>div.font-100 p strong{font-weight:100}.font-weight-demo>div.font-200 p strong{font-weight:200}.font-weight-demo>div.font-300 p strong{font-weight:300}.font-weight-demo>div.font-400 p strong{font-weight:400}.font-weight-demo>div.font-500 p strong{font-weight:500}.font-weight-demo>div.font-600 p strong{font-weight:600}.font-weight-demo>div.font-700 p strong{font-weight:700}.font-weight-demo>div.font-800 p strong{font-weight:800}.font-weight-demo>div.font-900 p strong{font-weight:900}.demo-baseline-sync{position:relative}.demo-baseline-sync>div{transform-origin:0 0;width:200%;height:200%;overflow:hidden;transform:scale(.5)}.demo-baseline-sync:after{content:"";height:var(--spacing);left:var(--spacing);right:var(--spacing);top:calc(var(--spacing) * 6);background-color:oklch(from var(--color-bg-warning-primary) l c h/.1);border-top:1px solid var(--color-bg-warning-primary);border-bottom:1px solid var(--color-bg-warning-primary);display:block;position:absolute}.demo-line-length{border:1px var(--tw-border-style) var(--color-border-base);border-radius:var(--radius-md);background-image:linear-gradient(90deg, var(--color-bg-danger-tertiary), var(--color-bg-base) calc(17.5ch + var(--spacing) * 2 - 1px), var(--color-bg-base) calc(22.5ch + var(--spacing) * 2 - 1px), var(--color-bg-success-secondary) calc(22.5ch + var(--spacing) * 2 - 1px), var(--color-bg-success-secondary) calc(22.5ch + 1px + var(--spacing) * 2 - 1px), var(--color-bg-base) calc(22.5ch + 1px + var(--spacing) * 2 - 1px), var(--color-bg-success-tertiary) calc(25ch + var(--spacing) * 2 - 1px), var(--color-bg-success-tertiary) calc(35ch + var(--spacing) * 2 - 1px), var(--color-bg-base) calc(37.5ch + var(--spacing) * 2 - 1px), var(--color-bg-success-secondary) calc(37.5ch + var(--spacing) * 2 - 1px), var(--color-bg-success-secondary) calc(37.5ch + 1px + var(--spacing) * 2 - 1px), var(--color-bg-base) calc(37.5ch + 1px + var(--spacing) * 2 - 1px), var(--color-bg-danger-tertiary) calc(47.5ch + var(--spacing) * 2 - 1px));position:relative}.demo-line-length>div{transform-origin:0 0;width:200%;margin-bottom:-25%;transform:scale(.5)}.demo-line-length>div .long{max-width:100%}.demo-line-length>div .normal{max-width:62ch}.demo-line-length>div .short{max-width:20ch;margin-bottom:0}.demo-line-length>span.start,.demo-line-length>span.end{border-top-left-radius:0;border-bottom-left-radius:0;display:block;position:absolute;bottom:25%}.demo-line-length>span.start{left:calc(22.5ch + var(--spacing) * 2 - 1px)}.demo-line-length>span.end{left:calc(37.5ch + var(--spacing) * 2 - 1px)}