/* Generated by tools/brand.py; edit that, not this. */

/* The sand band, in its theme's band colors. */
.band.sand {
  --bg: var(--sand-bg);
  --surface: var(--sand-surface);
  --line: var(--sand-line);
  --ink: var(--sand-ink);
  --dim: var(--sand-dim);
  --teal: var(--sand-teal);
  --shore-h: 20px;
}
.sand::before { background: var(--art-shore-top) 0 100% repeat-x; }
.sand::after { background: var(--art-shore-bottom) 0 0 repeat-x; }

.hero {
  --horizon-h: 208px;
  --sun-wide: -420px;
  --sun-narrow: -110px;
  --surfer-wide: 330px;
  --surfer-narrow: 115px;
}

.sun {
  top: var(--sun-top);
  width: 187.5px;
  height: var(--sun-h);
  margin-left: -93.75px;
  background: var(--art-sun) 0 0 / 100% 100% no-repeat;
}

.sea-back {
  left: -216px;
  background: var(--art-sea-back) 50% 0 repeat-x;
  animation: sea-back 30s linear infinite;
}
@keyframes sea-back { to { transform: translateX(216px); } }

.sea-mid {
  left: -336px;
  background: var(--art-sea-mid) 50% 0 repeat-x;
  animation: sea-mid 20s linear infinite;
}
@keyframes sea-mid { to { transform: translateX(336px); } }

.sea-front {
  left: -215px;
  background: var(--art-sea-front) 50% 0 repeat-x;
  animation: sea-front 9s linear infinite;
}
@keyframes sea-front { to { transform: translateX(215px); } }

.surfer {
  top: 108.13px;
  width: 85.1px;
  height: 77.1px;
  margin-left: -39.9px;
  transform-origin: 39.9px 100%;
  transform: translateY(-3.48px) rotate(-10.34deg);
  background: var(--art-surfer) 0 0 / 100% 100% no-repeat;
  animation: surf 9s linear infinite;
}
@keyframes surf {
  0.00% { transform: translateY(-3.48px) rotate(-10.34deg); }
  2.78% { transform: translateY(-1.94px) rotate(-9.77deg); }
  5.56% { transform: translateY(-0.51px) rotate(-9.09deg); }
  8.33% { transform: translateY(0.81px) rotate(-8.43deg); }
  11.11% { transform: translateY(2.04px) rotate(-7.90deg); }
  13.89% { transform: translateY(3.20px) rotate(-7.54deg); }
  16.67% { transform: translateY(4.32px) rotate(-7.34deg); }
  19.44% { transform: translateY(5.42px) rotate(-7.25deg); }
  22.22% { transform: translateY(6.50px) rotate(-7.16deg); }
  25.00% { transform: translateY(7.57px) rotate(-6.95deg); }
  27.78% { transform: translateY(8.58px) rotate(-6.47deg); }
  30.56% { transform: translateY(9.49px) rotate(-5.61deg); }
  33.33% { transform: translateY(10.24px) rotate(-4.26deg); }
  36.11% { transform: translateY(10.74px) rotate(-2.39deg); }
  38.89% { transform: translateY(10.92px) rotate(-0.01deg); }
  41.67% { transform: translateY(10.72px) rotate(2.78deg); }
  44.44% { transform: translateY(10.08px) rotate(5.78deg); }
  47.22% { transform: translateY(8.99px) rotate(8.76deg); }
  50.00% { transform: translateY(7.44px) rotate(11.49deg); }
  52.78% { transform: translateY(5.49px) rotate(13.74deg); }
  55.56% { transform: translateY(3.21px) rotate(15.37deg); }
  58.33% { transform: translateY(0.71px) rotate(16.27deg); }
  61.11% { transform: translateY(-1.87px) rotate(16.39deg); }
  63.89% { transform: translateY(-4.41px) rotate(15.71deg); }
  66.67% { transform: translateY(-6.76px) rotate(14.22deg); }
  69.44% { transform: translateY(-8.80px) rotate(11.98deg); }
  72.22% { transform: translateY(-10.41px) rotate(9.09deg); }
  75.00% { transform: translateY(-11.53px) rotate(5.74deg); }
  77.78% { transform: translateY(-12.13px) rotate(2.18deg); }
  80.56% { transform: translateY(-12.19px) rotate(-1.28deg); }
  83.33% { transform: translateY(-11.76px) rotate(-4.37deg); }
  86.11% { transform: translateY(-10.91px) rotate(-6.91deg); }
  88.89% { transform: translateY(-9.72px) rotate(-8.79deg); }
  91.67% { transform: translateY(-8.28px) rotate(-10.00deg); }
  94.44% { transform: translateY(-6.71px) rotate(-10.59deg); }
  97.22% { transform: translateY(-5.08px) rotate(-10.66deg); }
  100.00% { transform: translateY(-3.48px) rotate(-10.34deg); }
}

.board { background-image: var(--art-board); }
/* The front wave meets a point behind the surfer this much sooner. */
.legs {
  margin-left: -99.9px;
  background-image: var(--art-legs);
  animation-delay: -2.512s;
}

/* The app's `dusk` theme. */
:root,
[data-theme="dusk"] {
  color-scheme: dark;
  --bg: #1c161f;
  --surface: #261e29;
  --line: #362c3a;
  --keycap: #5a4c58;
  --ink: #f0e6e2;
  --dim: #9e8f98;
  --teal: #3fb8a0;
  --coral: #ff8c69;
  --bg-rgb: 28, 22, 31;
  --teal-rgb: 63, 184, 160;
  --coral-rgb: 255, 140, 105;
  --teal-hover: #56c1ab;
  --band: #211a24;
  --sand: #e6dccb;
  --sand-bg: #f1eadf;
  --sand-surface: #ddd2be;
  --sand-line: #cfc2ab;
  --sand-ink: #16171a;
  --sand-dim: #5c5f66;
  --sand-teal: #196657;
  --sun-y: 110.4px;
  --sun-top: 16.65px;
  --sun-h: 119.5px;
  --art-sun: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZHVzay9zdW4uc3Zn");
  --art-seam: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZHVzay9zZWFtLnN2Zw");
  --art-shore-top: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZHVzay9zaG9yZS10b3Auc3Zn");
  --art-shore-bottom: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZHVzay9zaG9yZS1ib3R0b20uc3Zn");
  --art-sea-back: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZHVzay9zZWEtYmFjay5zdmc");
  --art-sea-mid: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZHVzay9zZWEtbWlkLnN2Zw");
  --art-sea-front: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZHVzay9zZWEtZnJvbnQuc3Zn");
  --art-surfer: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZHVzay9zdXJmZXIuc3Zn");
  --art-board: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZHVzay9ib2FyZC5zdmc");
  --art-legs: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZHVzay9sZWdzLnN2Zw");
}

/* The app's `night` theme. */
[data-theme="night"] {
  color-scheme: dark;
  --bg: #16171a;
  --surface: #1e2024;
  --line: #2a2d33;
  --keycap: #555555;
  --ink: #ececea;
  --dim: #8a8f98;
  --teal: #3fb8a0;
  --coral: #ff8c69;
  --bg-rgb: 22, 23, 26;
  --teal-rgb: 63, 184, 160;
  --coral-rgb: 255, 140, 105;
  --teal-hover: #56c1ab;
  --band: #1a1b1f;
  --sand: #e6dccb;
  --sand-bg: #f1eadf;
  --sand-surface: #ddd2be;
  --sand-line: #cfc2ab;
  --sand-ink: #16171a;
  --sand-dim: #5c5f66;
  --sand-teal: #196657;
  --sun-y: 96px;
  --sun-top: 2.25px;
  --sun-h: 133.9px;
  --art-sun: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc3VuLnN2Zw");
  --art-seam: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2VhbS5zdmc");
  --art-shore-top: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2hvcmUtdG9wLnN2Zw");
  --art-shore-bottom: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2hvcmUtYm90dG9tLnN2Zw");
  --art-sea-back: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2VhLWJhY2suc3Zn");
  --art-sea-mid: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2VhLW1pZC5zdmc");
  --art-sea-front: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2VhLWZyb250LnN2Zw");
  --art-surfer: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc3VyZmVyLnN2Zw");
  --art-board: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvYm9hcmQuc3Zn");
  --art-legs: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvbGVncy5zdmc");
}

/* The app's `oled` theme. */
[data-theme="oled"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #101113;
  --line: #222428;
  --keycap: #555555;
  --ink: #ececea;
  --dim: #8a8f98;
  --teal: #3fb8a0;
  --coral: #ff8c69;
  --bg-rgb: 0, 0, 0;
  --teal-rgb: 63, 184, 160;
  --coral-rgb: 255, 140, 105;
  --teal-hover: #56c1ab;
  --band: #080809;
  --sand: #e6dccb;
  --sand-bg: #f1eadf;
  --sand-surface: #ddd2be;
  --sand-line: #cfc2ab;
  --sand-ink: #16171a;
  --sand-dim: #5c5f66;
  --sand-teal: #196657;
  --sun-y: 126px;
  --sun-top: 32.25px;
  --sun-h: 103.9px;
  --art-sun: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvb2xlZC9zdW4uc3Zn");
  --art-seam: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvb2xlZC9zZWFtLnN2Zw");
  --art-shore-top: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvb2xlZC9zaG9yZS10b3Auc3Zn");
  --art-shore-bottom: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvb2xlZC9zaG9yZS1ib3R0b20uc3Zn");
  --art-sea-back: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvb2xlZC9zZWEtYmFjay5zdmc");
  --art-sea-mid: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvb2xlZC9zZWEtbWlkLnN2Zw");
  --art-sea-front: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvb2xlZC9zZWEtZnJvbnQuc3Zn");
  --art-surfer: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvb2xlZC9zdXJmZXIuc3Zn");
  --art-board: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvb2xlZC9ib2FyZC5zdmc");
  --art-legs: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvb2xlZC9sZWdzLnN2Zw");
}

/* The app's `sand` theme. */
[data-theme="sand"] {
  color-scheme: light;
  --bg: #e6dccb;
  --surface: #f1eadf;
  --line: #cfc2ab;
  --keycap: #bdb098;
  --ink: #16171a;
  --dim: #5c5f66;
  --teal: #196657;
  --coral: #d96645;
  --bg-rgb: 230, 220, 203;
  --teal-rgb: 25, 102, 87;
  --coral-rgb: 217, 102, 69;
  --teal-hover: #35786b;
  --band: #ebe3d5;
  --sand: #f1eadf;
  --sand-bg: #fbf7f0;
  --sand-surface: #ddd2be;
  --sand-line: #cfc2ab;
  --sand-ink: #16171a;
  --sand-dim: #5c5f66;
  --sand-teal: #196657;
  --sun-y: 42px;
  --sun-top: -51.75px;
  --sun-h: 187.5px;
  --art-sun: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zdW4uc3Zn");
  --art-seam: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zZWFtLnN2Zw");
  --art-shore-top: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zaG9yZS10b3Auc3Zn");
  --art-shore-bottom: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zaG9yZS1ib3R0b20uc3Zn");
  --art-sea-back: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zZWEtYmFjay5zdmc");
  --art-sea-mid: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zZWEtbWlkLnN2Zw");
  --art-sea-front: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zZWEtZnJvbnQuc3Zn");
  --art-surfer: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zdXJmZXIuc3Zn");
  --art-board: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9ib2FyZC5zdmc");
  --art-legs: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9sZWdzLnN2Zw");
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #e6dccb;
    --surface: #f1eadf;
    --line: #cfc2ab;
    --keycap: #bdb098;
    --ink: #16171a;
    --dim: #5c5f66;
    --teal: #196657;
    --coral: #d96645;
    --bg-rgb: 230, 220, 203;
    --teal-rgb: 25, 102, 87;
    --coral-rgb: 217, 102, 69;
    --teal-hover: #35786b;
    --band: #ebe3d5;
    --sand: #f1eadf;
    --sand-bg: #fbf7f0;
    --sand-surface: #ddd2be;
    --sand-line: #cfc2ab;
    --sand-ink: #16171a;
    --sand-dim: #5c5f66;
    --sand-teal: #196657;
    --sun-y: 42px;
    --sun-top: -51.75px;
    --sun-h: 187.5px;
    --art-sun: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zdW4uc3Zn");
    --art-seam: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zZWFtLnN2Zw");
    --art-shore-top: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zaG9yZS10b3Auc3Zn");
    --art-shore-bottom: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zaG9yZS1ib3R0b20uc3Zn");
    --art-sea-back: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zZWEtYmFjay5zdmc");
    --art-sea-mid: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zZWEtbWlkLnN2Zw");
    --art-sea-front: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zZWEtZnJvbnQuc3Zn");
    --art-surfer: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9zdXJmZXIuc3Zn");
    --art-board: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9ib2FyZC5zdmc");
    --art-legs: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvc2FuZC9sZWdzLnN2Zw");
  }
}

/* The app's `dmg` theme. */
[data-theme="dmg"] {
  color-scheme: light;
  --bg: #9bbc0f;
  --surface: #8bac0f;
  --line: #306230;
  --keycap: #306230;
  --ink: #0f380f;
  --dim: #306230;
  --teal: #306230;
  --coral: #0f380f;
  --bg-rgb: 155, 188, 15;
  --teal-rgb: 48, 98, 48;
  --coral-rgb: 15, 56, 15;
  --teal-hover: #497549;
  --band: #93b40f;
  --sand: #8bac0f;
  --sand-bg: #8bac0f;
  --sand-surface: #8bac0f;
  --sand-line: #306230;
  --sand-ink: #0f380f;
  --sand-dim: #306230;
  --sand-teal: #306230;
  --sun-y: 96px;
  --sun-top: 2.25px;
  --sun-h: 133.9px;
  --art-sun: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZG1nL3N1bi5zdmc");
  --art-seam: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZG1nL3NlYW0uc3Zn");
  --art-shore-top: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZG1nL3Nob3JlLXRvcC5zdmc");
  --art-shore-bottom: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZG1nL3Nob3JlLWJvdHRvbS5zdmc");
  --art-sea-back: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZG1nL3NlYS1iYWNrLnN2Zw");
  --art-sea-mid: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZG1nL3NlYS1taWQuc3Zn");
  --art-sea-front: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZG1nL3NlYS1mcm9udC5zdmc");
  --art-surfer: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZG1nL3N1cmZlci5zdmc");
  --art-board: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZG1nL2JvYXJkLnN2Zw");
  --art-legs: url("/api/public/p/aHR0cHM6Ly9yZXRzdXJmLmFwcC9pbWFnZXMvYnJhbmQvZG1nL2xlZ3Muc3Zn");
}