.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}.spaces-demo .grid{margin-bottom:var(--spacing);background-position:0;background-image:linear-gradient(180deg, oklch(from var(--color-bg-additional5-primary) l c h/1) 0px, oklch(from var(--color-bg-additional5-primary) l c h/1) 1px, oklch(from var(--color-bg-additional5-primary) l c h/.1) 1px, oklch(from var(--color-bg-additional5-primary) l c h/.1) calc(var(--spacing) - 1px), oklch(from var(--color-bg-additional5-primary) l c h/1) var(--spacing), oklch(from var(--color-bg-additional4-primary) l c h/.1) var(--spacing), oklch(from var(--color-bg-additional4-primary) l c h/.1) calc(var(--spacing) * 2 - 1px), oklch(from var(--color-bg-additional4-primary) l c h/1) calc(var(--spacing) * 2), oklch(from var(--color-bg-additional3-primary) l c h/.1) calc(var(--spacing) * 2), oklch(from var(--color-bg-additional3-primary) l c h/.1) calc(var(--spacing) * 3 - 1px), oklch(from var(--color-bg-additional3-primary) l c h/1) calc(var(--spacing) * 3), oklch(from var(--color-bg-additional2-primary) l c h/.1) calc(var(--spacing) * 3), oklch(from var(--color-bg-additional2-primary) l c h/.1) calc(var(--spacing) * 4 - 1px), oklch(from var(--color-bg-additional2-primary) l c h/1) calc(var(--spacing) * 4), oklch(from var(--color-bg-additional1-primary) l c h/.1) calc(var(--spacing) * 4), oklch(from var(--color-bg-additional1-primary) l c h/.1) calc(var(--spacing) * 5 - 1px), oklch(from var(--color-bg-additional1-primary) l c h/1) calc(var(--spacing) * 5), oklch(from var(--color-bg-additional0-primary) l c h/.1) calc(var(--spacing) * 5), oklch(from var(--color-bg-additional0-primary) l c h/.1) calc(var(--spacing) * 6 - 1px), oklch(from var(--color-bg-additional0-primary) l c h/1) calc(var(--spacing) * 6), transparent calc(var(--spacing) * 6));margin-top:-1px}.spaces-demo .grid>div{flex-direction:column;display:flex}.spaces-demo .grid>div>p:first-child{flex:1;align-items:flex-end;display:flex}.spaces-demo .grid>div strong{text-indent:-100rem;display:block}.spaces-demo .grid>div.space-1 strong{height:calc(var(--spacing) * 1);width:calc(var(--spacing) * 1);background:var(--color-bg-additional0-primary)}.spaces-demo .grid>div.space-2 strong{height:calc(var(--spacing) * 2);width:calc(var(--spacing) * 2);background:var(--color-bg-additional1-primary)}.spaces-demo .grid>div.space-3 strong{height:calc(var(--spacing) * 3);width:calc(var(--spacing) * 3);background:var(--color-bg-additional2-primary)}.spaces-demo .grid>div.space-4 strong{height:calc(var(--spacing) * 4);width:calc(var(--spacing) * 4);background:var(--color-bg-additional3-primary)}.spaces-demo .grid>div.space-5 strong{height:calc(var(--spacing) * 5);width:calc(var(--spacing) * 5);background:var(--color-bg-additional4-primary)}.spaces-demo .grid>div.space-6 strong{height:calc(var(--spacing) * 6);width:calc(var(--spacing) * 6);background:var(--color-bg-additional5-primary)}.demoModularGrid{flex-direction:column;display:flex}.demoModularGrid .tab-content{background:var(--color-bg-base);flex-direction:column;display:flex}.demoModularGrid .tab-content>.active{flex-direction:column;display:flex}.demoModularGrid .tab-content figure{height:100%;margin:0}.demoModularGrid #web,.demoModularGrid #printing{flex:1;height:100%;margin:0}.demoModularGrid #web .col,.demoModularGrid #printing .col{padding:0}.demoModularGrid #web>div{border-top:var(--spacing) solid var(--color-border-base);background:var(--color-bg-surface-secondary);border-radius:var(--radius-sm);padding:var(--spacing);position:relative}.demoModularGrid #web>div>div{background:linear-gradient(180deg, oklch(from var(--color-bg-warning-primary) l c h/.5), oklch(from var(--color-bg-warning-primary) l c h/0) 100%)}.demoModularGrid #web>div:after{content:"∞";text-align:center;font-size:var(--font-size-h3);line-height:var(--font-size-h3);color:var(--color-text-warning-tertiary);text-shadow:0 0 5px var(--color-bg-surface-secondary), 0 0 10px var(--color-bg-surface-secondary), 0 0 20px var(--color-bg-surface-secondary), 0 0 30px var(--color-bg-surface-secondary);display:block;position:absolute;bottom:0;left:0;right:0}.demoModularGrid #printing>div{border:var(--spacing) solid var(--color-bg-surface-secondary);background-image:repeating-linear-gradient(180deg, oklch(from var(--color-bg-warning-primary) l c h/.3), oklch(from var(--color-bg-warning-primary) l c h/.3) 20%, transparent 20%, transparent 27%)}.demoModularGrid #printing>div>div{background:oklch(from var(--color-bg-warning-primary) l c h/.3)}.demo-grid-sizes{--grid-color:oklch(from var(--color-bg-warning-primary) l c h / .2);--line-height-color:oklch(from var(--color-bg-warning-primary) l c h / .05)}.demo-grid-sizes>div{background-image:repeating-linear-gradient(180deg, var(--line-height-color), var(--line-height-color) calc(var(--spacing) * 2), transparent calc(var(--spacing) * 2), transparent calc(var(--spacing) * 4))}.demo-grid-sizes>div>div{padding-bottom:calc(var(--spacing) * 2)}.demo-grid-sizes .demo-grid-x1{background-image:repeating-linear-gradient(180deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent calc(var(--spacing) * 2))}.demo-grid-sizes .demo-grid-x2{background-image:repeating-linear-gradient(180deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--spacing))}.demo-grid-sizes .demo-grid-x3{background-image:repeating-linear-gradient(180deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent calc(var(--spacing) * 2 / 3))}.demo-grid-sizes .demo-grid-x4{background-image:repeating-linear-gradient(180deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent calc(var(--spacing) / 2))}.demo-grid-sizes .demo-grid-x6{background-image:repeating-linear-gradient(180deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent calc(var(--spacing) / 3));margin-bottom:-1px;padding-bottom:1px}.demo-border-radius>div>div>div{border-left:4px solid var(--color-bg-warning-primary);border-top:4px solid var(--color-bg-warning-primary)}.demo-border-radius>div>div>div.demo-rounded-sm{width:var(--spacing);height:var(--spacing);border-top-left-radius:var(--radius-sm)}.demo-border-radius>div>div>div.demo-rounded-md{width:var(--spacing);height:var(--spacing);border-top-left-radius:var(--radius-md)}.demo-border-radius>div>div>div.demo-rounded-lg{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2);border-top-left-radius:var(--radius-lg)}.demo-border-radius>div>div>div.demo-rounded-xl{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3);border-top-left-radius:var(--radius-xl)}.demo-border-radius>div>div>div.demo-rounded-2xl{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);border-top-left-radius:var(--radius-2xl)}.demo-border-radius>div>div>div.demo-rounded-full{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6);border:4px solid var(--color-bg-warning-primary);border-right:0;border-top-left-radius:3.40282e38px;border-bottom-left-radius:3.40282e38px}.demo-border-radius-hierarchy div{padding-top:calc(var(--spacing) - 4px);padding-left:calc(var(--spacing) - 4px);border-left:4px solid var(--color-bg-warning-primary);border-top:4px solid var(--color-bg-warning-primary);-webkit-mask:linear-gradient(to right, black calc(var(--spacing) * 6), transparent 100%)}.demo-border-radius-hierarchy>div{height:calc(var(--spacing) * 6);border-top-left-radius:var(--radius-2xl)}.demo-border-radius-hierarchy>div>div{border-top-left-radius:var(--radius-xl);height:100%}.demo-border-radius-hierarchy>div>div>div{border-top-left-radius:var(--radius-lg);height:100%}.demo-border-radius-hierarchy>div>div>div>div{border-top-left-radius:var(--radius-md);height:100%}.demo-border-radius-hierarchy>div>div>div>div>div{border-top-left-radius:var(--radius-sm);height:100%}