.graph-paper{--fine-lines-color:color-mix(in oklab, var(--color-content-primary,currentColor) 10%, transparent);--strong-lines-color:color-mix(in oklab, var(--color-content-primary,currentColor) 15%, transparent);--strong-lines-enabled:var(--strong-lines-color);--fine-lines-size:25px;--strong-lines-size:100px;--graph-position-x:50%;--graph-position-y:50%;--fine-lines-position-x:calc(var(--graph-position-x) + var(--fine-lines-size) / 2);--fine-lines-position-y:calc(var(--graph-position-y) + var(--fine-lines-size) / 2);--strong-lines-position-x:calc(var(--graph-position-x) + var(--strong-lines-size) / 2);--strong-lines-position-y:calc(var(--graph-position-y) + var(--strong-lines-size) / 2);background-image: repeating-linear-gradient(to right, var(--fine-lines-color) 0, var(--fine-lines-color) 1px, transparent 1px, transparent var(--fine-lines-size)), repeating-linear-gradient(to bottom, var(--fine-lines-color) 0, var(--fine-lines-color) 1px, transparent 1px, transparent var(--fine-lines-size)),  repeating-linear-gradient(to right, var(--strong-lines-enabled) 0, var(--strong-lines-enabled) 1px, transparent 1px, transparent var(--strong-lines-size)), repeating-linear-gradient(to bottom, var(--strong-lines-enabled) 0, var(--strong-lines-enabled) 1px, transparent 1px, transparent var(--strong-lines-size));background-position:var(--fine-lines-position-x) var(--fine-lines-position-y), var(--fine-lines-position-x) var(--fine-lines-position-y), var(--strong-lines-position-x) var(--strong-lines-position-y), var(--strong-lines-position-x) var(--strong-lines-position-y);background-size:var(--fine-lines-size) var(--fine-lines-size), var(--fine-lines-size) var(--fine-lines-size), var(--strong-lines-size) var(--strong-lines-size), var(--strong-lines-size) var(--strong-lines-size)}
.noise{background-image:var(--noise-image-url,url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'160'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.75'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E"));pointer-events:none;background-position:0 0;background-repeat:repeat;width:200%;height:200%;animation:.2s infinite bg-noise;position:absolute;inset:-50%}@media (prefers-reduced-motion:reduce){.noise{animation:none}}@keyframes bg-noise{0%{transform:translate(0)}10%{transform:translate(-5%,-5%)}20%{transform:translate(-10%,5%)}30%{transform:translate(5%,-10%)}40%{transform:translate(-5%,15%)}50%{transform:translate(-10%,5%)}60%{transform:translate(15%)}70%{transform:translateY(10%)}80%{transform:translate(-15%)}90%{transform:translate(10%,5%)}to{transform:translate(5%)}}
.lines-horizontal{--fine-lines-color:color-mix(in oklab, var(--color-content-primary,currentColor) 10%, transparent);--strong-lines-color:color-mix(in oklab, var(--color-content-primary,currentColor) 15%, transparent);--strong-lines-enabled:var(--strong-lines-color);--fine-lines-size:25px;--strong-lines-size:75px;--lines-position-y:50%;--fine-lines-position-y:calc(var(--lines-position-y) + var(--fine-lines-size) / 2);--strong-lines-position-y:calc(var(--lines-position-y) + var(--strong-lines-size) / 2);background-image: repeating-linear-gradient(to bottom, var(--fine-lines-color) 0, var(--fine-lines-color) 1px, transparent 1px, transparent var(--fine-lines-size)),  repeating-linear-gradient(to bottom, var(--strong-lines-enabled) 0, var(--strong-lines-enabled) 1px, transparent 1px, transparent var(--strong-lines-size));background-position:0 var(--fine-lines-position-y), 0 var(--strong-lines-position-y);background-size:100% var(--fine-lines-size), 100% var(--strong-lines-size)}
.lines-vertical{--fine-lines-color:color-mix(in oklab, var(--color-content-primary,currentColor) 10%, transparent);--strong-lines-color:color-mix(in oklab, var(--color-content-primary,currentColor) 15%, transparent);--strong-lines-enabled:var(--strong-lines-color);--fine-lines-size:25px;--strong-lines-size:75px;--lines-position-x:50%;--fine-lines-position-x:calc(var(--lines-position-x) + var(--fine-lines-size) / 2);--strong-lines-position-x:calc(var(--lines-position-x) + var(--strong-lines-size) / 2);background-image: repeating-linear-gradient(to right, var(--fine-lines-color) 0, var(--fine-lines-color) 1px, transparent 1px, transparent var(--fine-lines-size)),  repeating-linear-gradient(to right, var(--strong-lines-enabled) 0, var(--strong-lines-enabled) 1px, transparent 1px, transparent var(--strong-lines-size));background-position:var(--fine-lines-position-x) 0, var(--strong-lines-position-x) 0;background-size:var(--fine-lines-size) 100%, var(--strong-lines-size) 100%}
.blueprint{--fine-lines-color:color-mix(in oklab, var(--color-content-primary,currentColor) 10%, transparent);--strong-lines-color:color-mix(in oklab, var(--color-content-primary,currentColor) 15%, transparent);--strong-lines-enabled:var(--strong-lines-color);--fine-lines-size:25px;--strong-lines-size:100px;--dot-gap:5px;--dot-radius:.5px;--graph-position-x:50%;--graph-position-y:50%;--fine-lines-position-x:calc(var(--graph-position-x) + var(--fine-lines-size) / 2);--fine-lines-position-y:calc(var(--graph-position-y) + var(--fine-lines-size) / 2);--strong-lines-position-x:calc(var(--graph-position-x) + var(--strong-lines-size) / 2);--strong-lines-position-y:calc(var(--graph-position-y) + var(--strong-lines-size) / 2);background-image: radial-gradient(circle, var(--fine-lines-color) var(--dot-radius), transparent calc(var(--dot-radius) + .5px)),  radial-gradient(circle, var(--fine-lines-color) var(--dot-radius), transparent calc(var(--dot-radius) + .5px)),  radial-gradient(circle, var(--strong-lines-enabled) var(--dot-radius), transparent calc(var(--dot-radius) + .5px)),  radial-gradient(circle, var(--strong-lines-enabled) var(--dot-radius), transparent calc(var(--dot-radius) + .5px));background-position:var(--fine-lines-position-x) var(--fine-lines-position-y), var(--fine-lines-position-x) var(--fine-lines-position-y), var(--strong-lines-position-x) var(--strong-lines-position-y), var(--strong-lines-position-x) var(--strong-lines-position-y);background-size:var(--fine-lines-size) var(--dot-gap), var(--dot-gap) var(--fine-lines-size), var(--strong-lines-size) var(--dot-gap), var(--dot-gap) var(--strong-lines-size)}