:root {
  --bgcolor: #aaa;
  --bgcolor2: #444;
  --movex: 100;
  --movey: 100;
  --opacity: .3;
  --speedx: 0.16;
  --speedy: 0.48;
}

.static-noise {
  position: absolute;
  inset: 0;
  background: url(https://i.ibb.co/77NfVB5/noise.png);
  opacity: var(--opacity);
  mix-blend-mode: multiply; /* ✅ 確保效果正常 */
  animation: static-noise-x calc(1s * var(--speedx)) steps(2, jump-start) infinite,
    static-noise-y calc(1s * var(--speedy)) steps(3, jump-start) infinite;
  pointer-events: none;
}

@keyframes static-noise-x {
  100% {
    background-position-x: calc(1px * var(--movex));
  }
}
@keyframes static-noise-y {
  100% {
    background-position-y: calc(1px * var(--movey));
  }
}

.muddle-text {
    font-size: 2.5em;
    font-weight: bold;
    color: #000;
    text-align: center;
}

.styled-button {
    display: block; 
    margin-top: 20px;
    margin: 10px auto;
    padding: 0; /* 邊距 */
    font-size: 1.5em; /*  字體 */
    font-weight: bold;
    background: none; /*  背景 */
    border: none; /*  邊框 */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s ease; /* 顏色變化 */
    cursor: pointer;
    text-align: center; /* 文字水平置中 */
}

/* hover 時*/
.styled-button:hover {
  color: #aaa;
}

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  background: linear-gradient(var(--bgcolor), var(--bgcolor2));
  font-family: sans-serif;
}

body::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(var(--s2));
  filter: url(#dither);
  /* mix-blend-mode: multiply; /* ✅ 讓 `filter` 不影響整體顏色 */ */
  content: '';
  transform: scale(1.12);
}