:root {
  --desk: #151311;
  --desk-2: #1d1a16;
  --chalk: #ece7de;
  --chalk-dim: #a9a296;
  --paper: #e6e3dc;
  --paper-2: #d9d5cc;
  --graphite: #2a2723;
  --orange: #ff5a1c;
  --orange-ink: #e2470d;
  --dymo: #c93c0a;
  --blue: #74b4d6;
  --tape: rgba(214, 203, 176, 0.82);
  --ring: rgba(236, 231, 222, 0.06);
  --wood: #b98c5a;
  --graphite-dust: #6f6a62;
  --crumb: #8d8a83;
}
html { background: var(--desk); overflow-x: hidden; }
body {
  margin: 0; background: var(--desk); color: var(--chalk); overflow-x: clip; position: relative;
  -webkit-font-smoothing: antialiased;
}
/* зерно столешницы: мелкий шум + крупные потёртости, не цепляет глаз */
.desk-noise {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .93  0 0 0 0 .9  0 0 0 0 .86  0 0 0 .55 -.18'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='7600'><filter id='m' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.0028 .009' numOctaves='3' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 .5 -.2'/></filter><rect width='1440' height='7600' filter='url(%23m)'/></svg>");
  background-repeat: repeat, repeat-y; background-size: 260px 260px, 1440px 7600px;
  opacity: .5; mix-blend-mode: screen;
}