@property --grid-gap {
  syntax: "<length>";
  initial-value: 12px;
  inherits: true;
}

:root {
  color-scheme: light dark;
  --cream: #edeec9;
  --beige: #dde7c7;
  --tea-green: #bfd8bd;
  --celadon: #98c9a3;
  --muted-teal: #77bfa3;
  --grid-hue: 151;
  --grid-gap: 12px;
  --grid-gap-x: var(--grid-gap);
  --grid-gap-y: var(--grid-gap);
  --grid-major-x: calc(var(--grid-gap-x) * 5);
  --grid-major-y: calc(var(--grid-gap-y) * 5);
  --grid-opacity: 0.35;
  --grid-border: 16px;
  --grid-cross-radius: min(calc(var(--grid-gap-x) / 2), calc(var(--grid-gap-y) / 2));

  --bg-light: var(--tea-green);
  --bg-light2: var(--celadon);
  --bg-dark: #21352e;
  --bg-dark2: #284238;
  --fg-light: #21352e;
  --fg-dark: var(--beige);

  --bg2: light-dark(var(--bg-light2), var(--bg-dark2));
  --fg: light-dark(var(--fg-light), var(--fg-dark));
  --grid-light: var(--tea-green);
  --grid-dark: #21352e;
  --grid-bg: light-dark(var(--grid-light), var(--grid-dark));

  --grid-minor: light-dark(
    hsl(141 34% 20% / calc(var(--grid-opacity) * 0.125)),
    hsl(140 32% 78% / calc(var(--grid-opacity) * 0.125))
  );
  --grid-major: light-dark(
    hsl(151 34% 24% / calc(var(--grid-opacity) * 0.35)),
    hsl(151 36% 66% / calc(var(--grid-opacity) * 0.35))
  );
  --grid-cross: light-dark(
    hsl(151 34% 24% / var(--grid-opacity)),
    hsl(151 36% 66% / var(--grid-opacity))
  );

  --title-fg: #fff;
  --body-fg: #fff;
  --accent: var(--muted-teal);
  --panel-border: color-mix(in srgb, var(--muted-teal) 58%, transparent);
  --panel-glass: color-mix(in srgb, var(--celadon) 10%, transparent);
  --panel-glass-hover: color-mix(in srgb, var(--muted-teal) 18%, transparent);

  --paper-lines-y: linear-gradient(var(--grid-minor) 0px 1px, transparent 1px var(--grid-gap-y));
  --paper-lines-x: linear-gradient(to right, var(--grid-minor) 0px 1px, transparent 1px var(--grid-gap-x));
  --paper-lines-y-major: linear-gradient(var(--grid-major) 0px 1px, transparent 1px var(--grid-major-y));
  --paper-lines-x-major: linear-gradient(to right, var(--grid-major) 0px 1px, transparent 1px var(--grid-major-x));
  --paper-cross-y: linear-gradient(var(--grid-cross) 0px 1px, transparent 1px var(--grid-major-y));
  --paper-cross-x: linear-gradient(to right, var(--grid-cross) 0px 1px, transparent 1px var(--grid-major-x));
  --paper-cross-mask: radial-gradient(ellipse at center, transparent var(--grid-cross-radius), var(--grid-bg) var(--grid-cross-radius) 100%);

  --paper-gradient:
    var(--paper-lines-y),
    var(--paper-lines-x),
    var(--paper-lines-y-major),
    var(--paper-lines-x-major),
    var(--paper-cross-mask),
    var(--paper-cross-y),
    var(--paper-cross-x);
}

body.grid-background {
  min-inline-size: 100vw;
  min-block-size: 100vh;
  margin: 0;
  padding: var(--grid-border);
  color: var(--body-fg);
  font-family: "TT2020 Style G", ui-monospace, "SFMono-Regular", Consolas, monospace;
  background-color: var(--grid-bg);
  background-image: var(--paper-gradient);
  background-size:
    var(--grid-gap-x) var(--grid-gap-y),
    var(--grid-gap-x) var(--grid-gap-y),
    var(--grid-major-x) var(--grid-major-y),
    var(--grid-major-x) var(--grid-major-y),
    var(--grid-major-x) var(--grid-major-y),
    var(--grid-major-x) var(--grid-major-y),
    var(--grid-major-x) var(--grid-major-y);
  background-repeat: repeat;
  background-position:
    var(--grid-border) var(--grid-border),
    var(--grid-border) var(--grid-border),
    var(--grid-border) var(--grid-border),
    var(--grid-border) var(--grid-border),
    calc(var(--grid-border) - (var(--grid-major-x) * 0.5)) calc(var(--grid-border) - (var(--grid-major-y) * 0.5)),
    var(--grid-border) var(--grid-border),
    var(--grid-border) var(--grid-border);
  box-shadow:
    inset 0 0 0 var(--grid-border) var(--grid-bg),
    inset 0 0 0 calc(var(--grid-border) + 1px) var(--grid-cross),
    inset 0 0 0 calc(var(--grid-border) + 1px) var(--bg2);
}