:root { --soft-grid-width: max(1px, calc(1px / var(--site-scale, 1))); --soft-grid-ink: rgba(8, 2, 4, .14); }
.cover-view::after, .content-view::after, .stable-header::after, .transition-face::after, .native-tile-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--soft-grid-ink) 0, var(--soft-grid-ink) var(--soft-grid-width), transparent var(--soft-grid-width)), linear-gradient(to bottom, var(--soft-grid-ink) 0, var(--soft-grid-ink) var(--soft-grid-width), transparent var(--soft-grid-width));
  background-size: 180px 180px; background-repeat: repeat;
}
.cover-view::after { z-index: 7; background-position: 0 0; }
.content-view::after { z-index: 9; }
.stable-header::after { z-index: 3; }
.transition-face::after { z-index: 12; }
.transition-face:has(.cover-view)::after { display: none; }
.background-top-grid { background-image: none; }
.retired-chart-mask { background-image: none; }

.content-view { isolation: isolate; }

/* A phone's tall cover uses short flat rows instead of one giant grid surface. */
.cover-view.has-grid-rows { background-image: none; }
.cover-view.has-grid-rows::after { display: none; }
.cover-grid-rows { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.cover-grid-row {
  position: absolute; left: 0; width: 1440px; pointer-events: none;
  background-image: linear-gradient(to right, var(--soft-grid-ink) 0, var(--soft-grid-ink) var(--soft-grid-width), transparent var(--soft-grid-width)), linear-gradient(to bottom, var(--soft-grid-ink) 0, var(--soft-grid-ink) var(--soft-grid-width), transparent var(--soft-grid-width));
  background-size: 180px 180px; background-repeat: repeat;
}

.native-tile-art::after { z-index: 12; }

/* A single viewport-sized grid prevents overlaps, hidden lines and tall mobile layers. */
.cover-view::after, .content-view::after, .transition-face::after, .native-tile-art::after,
.cover-grid-rows { display: none !important; }
.cover-view { background-image: none; }
.foreground-grid {
  position: fixed; bottom: 0; z-index: 1000000; pointer-events: none;
  background-image: linear-gradient(to right, var(--soft-grid-ink) 0 var(--foreground-line, 1px), transparent var(--foreground-line, 1px)), linear-gradient(to bottom, var(--soft-grid-ink) 0 var(--foreground-line, 1px), transparent var(--foreground-line, 1px));
  background-repeat: repeat;
}
.stable-header::after {
  display: block; z-index: 4; box-sizing: border-box;
  background-image: linear-gradient(to right, var(--soft-grid-ink) 0 var(--soft-grid-width), transparent var(--soft-grid-width));
  border-bottom: var(--soft-grid-width) solid var(--soft-grid-ink);
}