:root {
  --theme: #7a4f2e;
  --theme-strong: #6a4226;
  --highlight: rgb(180 200 110 / 0.38);
  --mascot-ink: #8a5c3b;
  --accent: #6e4a2f;
  --capy: #9a6b45;
  --capy-dark: #6e4a2f;
  --capy-eye: #2a1d14;
  --capy-avo-skin: #4f6b2f;
  --capy-avo-flesh: #d4df92;
  --capy-avo-pit: #8a5a32;
  --capy-water: #c7ddd9;
  --capy-ripple: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme: #e0a66e;
    --theme-strong: #eab27c;
    --highlight: rgb(180 200 110 / 0.2);
    --mascot-ink: #a87650;
    --accent: #e0a66e;
    --capy: #8a5f3f;
    --capy-dark: #5e3f28;
    --capy-eye: #1a120c;
    --capy-water: #3a4f4c;
    --capy-ripple: #5c7470;
  }
}

.mascot { width: 104px; top: -57px; }

.capy-fur { fill: var(--capy); }
.capy-dark { fill: var(--capy-dark); }
.capy-eye { fill: var(--capy-eye); }
.capy-avo-skin { fill: var(--capy-avo-skin); }
.capy-avo-flesh { fill: var(--capy-avo-flesh); }
.capy-avo-pit { fill: var(--capy-avo-pit); }
.capy-water { fill: var(--capy-water); }
.capy-line { stroke: var(--capy-dark); stroke-width: 1; fill: none; stroke-linecap: round; }
.capy-closed { stroke: var(--capy-eye); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.capy-ripple { stroke: var(--capy-ripple); stroke-width: 1.2; fill: none; stroke-linecap: round; opacity: 0.8; }
.capy-steam { stroke: var(--muted); stroke-width: 1.2; fill: none; stroke-linecap: round; opacity: 0.45; }

.mascot-sleep { width: 140px; }