*,:before,:after{box-sizing:border-box;margin:0}html{font-size:calc(var(--root-font-size)/16*100%);line-height:var(--global-line-height);background-color:var(--global-backgroundColor);font-family:var(--global-font-family-alpha);color:var(--global-text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background-color:var(--global-selection-backgroundColor);color:var(--global-selection-color)}a:hover{color:var(--global-link-hover-color)}a:focus-visible{outline:1px solid var(--global-accent-color);outline-offset:.2em}.back-link{--back-link-color: var(--global-text-color);color:var(--back-link-color);text-decoration:none;display:inline-flex;align-items:center;gap:var(--global-whitespace-2xs);padding:var(--global-whitespace);width:fit-content}.back-link:hover{--back-link-color: var(--global-title-color)}.back-link .icon{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;stroke:var(--back-link-color);transform:rotate(-90deg);stroke-linecap:round;stroke-width:var(--global-icon-stroke)}.demo-header{margin-bottom:var(--global-whitespace);display:flex;align-items:center;color:var(--global-text-color);*{--fs: var(--ms-1);font-size:calc(var(--fs) / var(--root-font-size) * 1rem);font-weight:400;line-height:calc(var(--global-baseline) * 5)}h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.demo{padding:var(--global-whitespace)}:root{--root-font-size: 16;--root-container-min-width: 320;--root-container-max-width: 960;--root-fluid-min-ratio: 1.125;--root-fluid-max-ratio: 1.333;--root-fluid-min-font-size: var(--root-font-size);--root-fluid-max-font-size: 18;--root-fluid-min-font-size-0: calc(var(--root-fluid-min-font-size));--root-fluid-min-font-size-1: calc(var(--root-fluid-min-font-size-0) * var(--root-fluid-min-ratio));--root-fluid-min-font-size-2: calc(var(--root-fluid-min-font-size-1) * var(--root-fluid-min-ratio));--root-fluid-min-font-size-3: calc(var(--root-fluid-min-font-size-2) * var(--root-fluid-min-ratio));--root-fluid-min-font-size-4: calc(var(--root-fluid-min-font-size-3) * var(--root-fluid-min-ratio));--root-fluid-min-font-size-5: calc(var(--root-fluid-min-font-size-4) * var(--root-fluid-min-ratio));--root-fluid-max-font-size-0: calc(var(--root-fluid-max-font-size));--root-fluid-max-font-size-1: calc(var(--root-fluid-max-font-size-0) * var(--root-fluid-max-ratio));--root-fluid-max-font-size-2: calc(var(--root-fluid-max-font-size-1) * var(--root-fluid-max-ratio));--root-fluid-max-font-size-3: calc(var(--root-fluid-max-font-size-2) * var(--root-fluid-max-ratio));--root-fluid-max-font-size-4: calc(var(--root-fluid-max-font-size-3) * var(--root-fluid-max-ratio));--root-fluid-max-font-size-5: calc(var(--root-fluid-max-font-size-4) * var(--root-fluid-max-ratio))}.fluid-text-demo+.fluid-text-demo{margin-top:var(--global-whitespace)}.fluid-text{--fluid-text-min-width: var(--this-min-width, var(--root-container-min-width));--fluid-text-max-width: var(--this-max-width, var(--root-container-max-width));--fluid-text-min-font-size: var(--this-min-font-size);--fluid-text-max-font-size: var(--this-max-font-size);--fluid-text-relative-unit: var(--this-relative-unit, 100cqi);--fluid-text-slope: calc(calc(var(--fluid-text-max-font-size) - var(--fluid-text-min-font-size)) / calc(var(--fluid-text-max-width) - var(--fluid-text-min-width)));--fluid-text-intercept: calc(var(--fluid-text-min-font-size) - var(--fluid-text-slope) * var(--fluid-text-min-width));--fluid-text-font-size: clamp(var(--fluid-text-min-font-size) / var(--root-font-size) * 1rem, var(--fluid-text-slope) * var(--fluid-text-relative-unit) + var(--fluid-text-intercept) / var(--root-font-size) * 1rem, var(--fluid-text-max-font-size) / var(--root-font-size) * 1rem);font-size:var(--fluid-text-font-size)}@function --fluid-text(--min-font-size,--max-font-size,--min-width: var(--root-container-min-width),--max-width: var(--root-container-max-width),--relative-unit: 100cqi){result: clamp(var(--min-font-size) / var(--root-font-size) * 1rem,(var(--max-font-size) - var(--min-font-size)) / (var(--max-width) - var(--min-width)) * var(--relative-unit) + (var(--min-font-size) - ((var(--max-font-size) - var(--min-font-size)) / (var(--max-width) - var(--min-width))) * var(--min-width)) / var(--root-font-size) * 1rem,var(--max-font-size) / var(--root-font-size) * 1rem);}.fluid-type-function-0{font-size:--fluid-text(20,32)}.fluid-type-function-1{font-size:--fluid-text(20,40)}.fluid-type-function-2{font-size:--fluid-text(24,40)}.fluid-text-demo p:nth-child(2){color:var(--global-title-color);line-height:1.2em}.fluid-text--step-0{--this-min-font-size: var(--root-fluid-min-font-size-0);--this-max-font-size: var(--root-fluid-max-font-size-0)}.fluid-text--step-10{--this-min-font-size: var(--root-fluid-min-font-size-1);--this-max-font-size: var(--root-fluid-max-font-size-1)}.fluid-text--step-20{--this-min-font-size: var(--root-fluid-min-font-size-2);--this-max-font-size: var(--root-fluid-max-font-size-2)}.fluid-text--step-30{--this-min-font-size: var(--root-fluid-min-font-size-3);--this-max-font-size: var(--root-fluid-max-font-size-3)}.fluid-text--step-40{--this-min-font-size: var(--root-fluid-min-font-size-4);--this-max-font-size: var(--root-fluid-max-font-size-4)}.fluid-text--step-50{--this-min-font-size: var(--root-fluid-min-font-size-5);--this-max-font-size: var(--root-fluid-max-font-size-5)}.fluid-text--0{--this-min-font-size: 20;--this-max-font-size: 32}.fluid-text-min-0{--this-min-font-size: 20}.fluid-text-min-1{--this-min-font-size: 24}.fluid-text-max-0{--this-max-font-size: 32}.fluid-text-max-1{--this-max-font-size: 40}.computed-font-size{margin-bottom:var(--global-whitespace-3xs)}.computed-font-size,.container-width{--fs: var(--ms-3);font-size:calc(var(--fs) / var(--root-font-size) * 1rem);font-family:var(--global-font-family-code);color:var(--global-muted-color);font-feature-settings:"tnum";text-transform:uppercase}.container{--container-max-width: var(--root-container-max-width);--container-border-color: var(--root-border-color-lighter);max-width:calc(var(--container-max-width) / var(--root-font-size) * 1rem);container-type:inline-size;margin:0 auto}.container-width{--this-border-color: var(--global-borderColor2);position:relative;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--this-border-color);text-align:center}.container-width:after,.container-width:before{content:"";display:block;width:8px;height:8px;border:1px solid var(--this-border-color);border-width:1px 1px 0 0;position:absolute;bottom:-4.5px;left:1px;transform:rotate(-135deg)}.container-width:after{border-width:0 0 1px 1px;left:auto;right:1px}