.graph-paper{--fine-lines-color:color-mix(in oklab, var(--color-content-primary) 10%, transparent);--strong-lines-color:color-mix(in oklab, var(--color-content-primary) 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{pointer-events:none;background:url(/img/backdrops/noise-transparent.png);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) 10%, transparent);--strong-lines-color:color-mix(in oklab, var(--color-content-primary) 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) 10%, transparent);--strong-lines-color:color-mix(in oklab, var(--color-content-primary) 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%}
