:root {
  --color-surface: #161c24;
  --color-abyss: #000000;
  --color-ink: #eef1f4;
  --color-silver: #aab3bd;
  --color-line: #2a3340;
  --color-glow: #4de3cf;
  --color-glow-soft: rgba(77, 227, 207, 0.55);
  --color-glow-faint: rgba(77, 227, 207, 0.16);

  /* 深さ 0（水面）〜 1（底）。JS が更新する */
  --t: 0;
  --bg: #161c24;

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ja: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-note: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;

  --margin: 5vw;
  --margin-end: 5vw;
  --gap: 2vw;
  --header-height: 64px;
  --space-section: clamp(96px, 14vw, 200px);
  --space-block: clamp(40px, 5vw, 80px);

  --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 深さに応じて、水面の暗い青から、底の完全な黒へ（未対応ブラウザは水面色のまま） */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  :root {
    --bg: color-mix(in srgb, var(--color-surface), var(--color-abyss) calc(var(--t) * 100%));
  }
}

/* PCでは、右端の水深計の分だけ、右の余白を広げる */
@media (min-width: 1100px) {
  :root {
    --margin-end: calc(5vw + 64px);
  }
}

@media (max-width: 767px) {
  :root {
    --margin: 24px;
    --margin-end: 24px;
    --gap: 12px;
    --header-height: 76px;
  }
}