.site-grid-overlay,body{--site-grid-hatch-line:color-mix(in oklab, var(--stroke) 55%, transparent);--site-grid-hatch-fill:transparent;--site-grid-edge-line:color-mix(in oklab, var(--stroke) 80%, transparent);--site-grid-line-padding:color-mix(in oklab, var(--stroke) 80%, transparent);--site-grid-line-center:color-mix(in oklab, var(--stroke) 80%, transparent);--site-grid-line-content:color-mix(in oklab, var(--stroke) 80%, transparent)}.dark .site-grid-overlay,.dark body,:where(.dark,.dark *) .site-grid-overlay,:where(.dark,.dark *) body{--site-grid-hatch-line:color-mix(in oklab, var(--stroke) 55%, transparent);--site-grid-edge-line:color-mix(in oklab, var(--stroke) 80%, transparent);--site-grid-line-padding:color-mix(in oklab, var(--stroke) 80%, transparent);--site-grid-line-center:color-mix(in oklab, var(--stroke) 80%, transparent);--site-grid-line-content:color-mix(in oklab, var(--stroke) 80%, transparent)}.site-grid-overlay{--sg-center:min(var(--sg-max), 100%);--sg-margin:calc((100% - var(--sg-center)) / 2);--sg-inner:calc(var(--sg-center) - 2 * var(--sg-gutter));z-index:-10;pointer-events:none;width:100%;position:fixed;inset:0}.site-grid-overlay__hatch,.site-grid-overlay__line,.site-grid-overlay__columns{position:fixed;top:0;bottom:0}.site-grid-overlay[data-hatch=on][data-hatch-outer=viewport][data-hatch-inner=container] .site-grid-overlay__hatch--left{width:var(--sg-margin);left:0}.site-grid-overlay[data-hatch=on][data-hatch-outer=viewport][data-hatch-inner=container] .site-grid-overlay__hatch--right{width:var(--sg-margin);right:0}.site-grid-overlay[data-hatch=on][data-hatch-outer=viewport][data-hatch-inner=padding] .site-grid-overlay__hatch--left{width:calc(var(--sg-margin) + var(--sg-gutter));left:0}.site-grid-overlay[data-hatch=on][data-hatch-outer=viewport][data-hatch-inner=padding] .site-grid-overlay__hatch--right{width:calc(var(--sg-margin) + var(--sg-gutter));right:0}.site-grid-overlay[data-hatch=on][data-hatch-outer=container][data-hatch-inner=padding] .site-grid-overlay__hatch--left{left:calc(50% - var(--sg-center) / 2);width:var(--sg-gutter)}.site-grid-overlay[data-hatch=on][data-hatch-outer=container][data-hatch-inner=padding] .site-grid-overlay__hatch--right{right:var(--sg-margin);width:var(--sg-gutter)}.site-grid-overlay__line[data-line=margin-l]{left:calc(50% - var(--sg-center) / 2)}.site-grid-overlay__line[data-line=margin-r]{left:calc(50% + var(--sg-center) / 2)}.site-grid-overlay__line[data-line=center]{left:50%}.site-grid-overlay__line[data-line=padding-l]{left:calc(50% - var(--sg-center) / 2 + var(--sg-gutter))}.site-grid-overlay__line[data-line=padding-r]{left:calc(50% + var(--sg-center) / 2 - var(--sg-gutter))}.site-grid-overlay__line[data-line=content-l]{left:calc(50% - var(--sg-center) / 2 + var(--sg-gutter) + var(--sg-inner) * (var(--sg-read-start) - 1) / var(--sg-cols))}.site-grid-overlay__line[data-line=content-r]{left:calc(50% - var(--sg-center) / 2 + var(--sg-gutter) + var(--sg-inner) * var(--sg-read-end) / var(--sg-cols))}.site-grid-overlay__columns{left:calc(50% - var(--sg-center) / 2 + var(--sg-gutter));width:var(--sg-inner)}.site-grid-overlay__col-line{top:0;bottom:0;left:calc((100% + var(--sg-gutter)) * var(--sg-col-idx) / var(--sg-cols) - var(--sg-gutter));position:absolute}.site-grid-hatch{--site-grid-hatch-gap:6px;--site-grid-hatch-opacity:.72;background-color:var(--site-grid-hatch-fill);background-image:repeating-linear-gradient(-45deg, var(--site-grid-hatch-line) 0, var(--site-grid-hatch-line) 1px, transparent 1px, transparent var(--site-grid-hatch-gap));opacity:var(--site-grid-hatch-opacity)}.dark .site-grid-hatch,:where(.dark,.dark *) .site-grid-hatch{opacity:.5}.site-grid-guide{width:1px;transform:translate(-.5px)}.site-grid-line-margin{background-color:var(--site-grid-edge-line);opacity:.85}.site-grid-line-padding{background-color:var(--site-grid-line-padding);opacity:.85}.site-grid-line-center{background-color:var(--site-grid-line-center);opacity:.85}.site-grid-line-content{background-color:var(--site-grid-line-content);opacity:.85}.dark .site-grid-line-margin,.dark .site-grid-line-padding,.dark .site-grid-line-center,.dark .site-grid-line-content,:where(.dark,.dark *) .site-grid-line-margin,:where(.dark,.dark *) .site-grid-line-padding,:where(.dark,.dark *) .site-grid-line-center,:where(.dark,.dark *) .site-grid-line-content{opacity:.65}.site-grid-column-divider{background-color:var(--site-grid-line-padding);pointer-events:none;opacity:.85;width:1px;transform:translate(-.5px)}.dark .site-grid-column-divider,:where(.dark,.dark *) .site-grid-column-divider{opacity:.65}
