:root{
  --velo:rgba(0,180,224,.075);
  --rejilla:rgba(125,212,240,.05);
  --rejilla2:rgba(125,212,240,.10);
  --regla:rgba(125,212,240,.42);
}
html[data-tema=claro]{
  --velo:rgba(0,121,160,.09);
  --rejilla:rgba(0,100,127,.065);
  --rejilla2:rgba(0,100,127,.10);
  --regla:rgba(0,100,127,.40);
}

html{background:var(--carbon)}
body{background-color:transparent; background-image:none}

body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(180deg,var(--velo) 0,transparent 48%),
    linear-gradient(var(--rejilla) 1px,transparent 1px),
    linear-gradient(90deg,var(--rejilla) 1px,transparent 1px),
    linear-gradient(var(--rejilla2) 1px,transparent 1px),
    linear-gradient(90deg,var(--rejilla2) 1px,transparent 1px);
  background-size:100% 100%,24px 24px,24px 24px,120px 120px,120px 120px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,rgba(0,0,0,.3) 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 45%,rgba(0,0,0,.3) 100%);
}

body::after{
  content:''; position:fixed; top:0; bottom:0; left:0; width:20px; z-index:-1; pointer-events:none;
  background-image:
    repeating-linear-gradient(180deg,var(--regla) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(180deg,var(--regla) 0 1px,transparent 1px 60px);
  background-size:7px 100%,20px 100%;
  background-position:left top,left top;
  background-repeat:no-repeat;
}
@media (max-width:820px){
  body::after{width:10px; background-size:4px 100%,10px 100%}
}
@media (prefers-contrast:more){
  body::before,body::after{display:none}
}