* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

[hidden] {
  display: none !important;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 79, 175, 0.72) 0 2.4rem, transparent 2.5rem),
    radial-gradient(circle at 88% 14%, rgba(38, 216, 201, 0.72) 0 2rem, transparent 2.1rem),
    radial-gradient(circle at 74% 40%, rgba(123, 228, 107, 0.68) 0 2.8rem, transparent 2.9rem),
    radial-gradient(circle at 18% 72%, rgba(255, 79, 175, 0.64) 0 2.2rem, transparent 2.3rem),
    radial-gradient(circle at 94% 86%, rgba(38, 216, 201, 0.62) 0 2.6rem, transparent 2.7rem),
    repeating-radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.62) 0 0.45rem, transparent 0.5rem 3rem),
    linear-gradient(135deg, #fff7fb 0%, #e5fbff 30%, #fff1fa 58%, #e8fff4 100%);
  color: #17121c;
  font-family: Impact, "Arial Black", sans-serif;
}

body::before {
  position: fixed;
  inset: -12vmax;
  z-index: -1;
  content: "";
  background:
    linear-gradient(82deg, transparent 0 12%, rgba(38, 216, 201, 0.55) 12% 16%, transparent 16% 28%, rgba(243, 93, 169, 0.58) 28% 33%, transparent 33% 48%, rgba(123, 228, 107, 0.54) 48% 53%, transparent 53%),
    linear-gradient(-18deg, transparent 0 20%, rgba(243, 93, 169, 0.42) 20% 24%, transparent 24% 44%, rgba(38, 216, 201, 0.42) 44% 48%, transparent 48%);
  opacity: 0.68;
  transform: rotate(-7deg);
}

.home-link {
  position: fixed;
  top: clamp(12px, 2vw, 24px);
  left: clamp(12px, 2vw, 24px);
  z-index: 50;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  border: 2px solid #050505;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 32%, rgba(248, 68, 163, 0.82) 0 7%, transparent 7.5%),
    radial-gradient(circle at 62% 30%, rgba(31, 214, 199, 0.78) 0 6%, transparent 6.5%),
    linear-gradient(135deg, #fff7fb 0%, #dffcff 34%, #fff0fa 68%, #e9ffe5 100%);
  box-shadow:
    inset 0 6px 10px rgba(255, 255, 255, 0.84),
    inset 0 -8px 12px rgba(74, 55, 104, 0.2),
    5px 6px 0 rgba(5, 5, 5, 0.8);
  color: #17121c;
  font-size: clamp(13px, 1.4vw, 18px);
  padding: 9px 16px;
  text-decoration: none;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85),
    1px 1px 0 rgba(21, 183, 176, 0.48),
    -1px -1px 0 rgba(255, 79, 175, 0.44);
  text-transform: uppercase;
}

.media-admin {
  position: fixed;
  top: clamp(68px, 7vw, 96px);
  left: clamp(12px, 2vw, 24px);
  z-index: 60;
  width: min(330px, calc(100vw - 24px));
}

.media-login,
.media-edit-tools {
  display: grid;
  gap: 9px;
  border: 2px solid #050505;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 20%, rgba(248, 68, 163, 0.5) 0 11%, transparent 12%),
    radial-gradient(circle at 84% 66%, rgba(38, 216, 201, 0.46) 0 13%, transparent 14%),
    rgba(255, 247, 251, 0.78);
  box-shadow:
    inset 0 6px 12px rgba(255, 255, 255, 0.72),
    inset 0 -8px 14px rgba(74, 55, 104, 0.16),
    5px 6px 0 rgba(5, 5, 5, 0.78);
  padding: 14px;
}

.media-login label,
.media-edit-tools span,
.upload-button,
.photo-tools label {
  font: 900 13px / 1.1 Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
}

.media-login input,
.photo-tools textarea,
.photo-tools input[type="range"] {
  width: 100%;
}

.media-login input,
.photo-tools textarea {
  border: 2px solid #050505;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  color: #17121c;
  font: 800 14px / 1.25 Arial, Helvetica, sans-serif;
  padding: 10px;
}

.media-login button,
.media-edit-tools button,
.upload-button,
.photo-tools button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 2px solid #050505;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 255, 255, 0.95) 0 16%, transparent 17%),
    radial-gradient(circle at 78% 62%, rgba(248, 68, 163, 0.56) 0 12%, transparent 13%),
    linear-gradient(135deg, #fff7fb 0%, #dffcff 34%, #fff0fa 68%, #e9ffe5 100%);
  box-shadow:
    inset 0 4px 8px rgba(255, 255, 255, 0.82),
    inset 0 -6px 9px rgba(74, 55, 104, 0.2),
    3px 4px 0 rgba(5, 5, 5, 0.78);
  color: #17121c;
  cursor: pointer;
  font: 900 13px / 1 Impact, "Arial Black", sans-serif;
  padding: 8px 12px;
  text-transform: uppercase;
}

.media-login button:active,
.media-edit-tools button:active,
.upload-button:active,
.photo-tools button:active {
  box-shadow:
    inset 0 4px 7px rgba(255, 255, 255, 0.76),
    inset 0 -5px 8px rgba(74, 55, 104, 0.24),
    1px 2px 0 rgba(5, 5, 5, 0.8);
  transform: translateY(2px);
}

.upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

#media-status {
  min-height: 16px;
  color: #9d004a;
  font: 900 13px / 1.2 Arial, Helvetica, sans-serif;
}

.media-field {
  position: relative;
  min-height: 626rem;
  overflow: hidden;
  touch-action: pan-y;
}

.media-field::before,
.media-field::after {
  position: absolute;
  z-index: 0;
  content: "";
  border-radius: 50%;
  pointer-events: none;
}

.media-field::before {
  top: 22rem;
  right: -14rem;
  width: 34rem;
  height: 34rem;
  background: rgba(243, 93, 169, 0.22);
  clip-path: polygon(50% 0, 62% 26%, 89% 11%, 75% 38%, 100% 50%, 74% 62%, 90% 90%, 62% 75%, 50% 100%, 38% 74%, 10% 90%, 25% 62%, 0 50%, 26% 38%, 11% 11%, 38% 26%);
}

.media-field::after {
  bottom: 36rem;
  left: -9rem;
  width: 28rem;
  height: 28rem;
  background: rgba(38, 216, 201, 0.2);
  clip-path: polygon(48% 0, 57% 20%, 78% 10%, 74% 33%, 100% 38%, 80% 55%, 96% 77%, 68% 73%, 56% 100%, 42% 75%, 14% 90%, 23% 62%, 0 50%, 24% 36%, 12% 12%, 38% 22%);
}

.photo-splat {
  position: absolute;
  top: var(--top);
  left: var(--left);
  z-index: 1;
  --splat-shape: polygon(8% 17%, 25% 5%, 44% 13%, 65% 2%, 81% 17%, 97% 31%, 88% 51%, 98% 72%, 78% 86%, 58% 94%, 43% 84%, 21% 98%, 9% 78%, 0 59%, 11% 40%);
  width: var(--w);
  margin: 0;
  transform: rotate(var(--rot));
  filter: drop-shadow(0.8rem 1rem 0 rgba(5, 5, 5, 0.84)) drop-shadow(0 1.3rem 1.3rem rgba(0, 0, 0, 0.34));
  user-select: none;
}

.photo-splat::before {
  position: absolute;
  inset: -0.7rem;
  z-index: -1;
  content: "";
  background:
    radial-gradient(circle at 23% 22%, #f35da9 0 10%, transparent 10.7%),
    radial-gradient(circle at 78% 26%, #26d8c9 0 8%, transparent 8.7%),
    radial-gradient(circle at 56% 82%, #7be46b 0 9%, transparent 9.8%),
    #fff7fb;
  clip-path: var(--splat-shape);
}

.photo-splat img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid #050505;
  clip-path: var(--splat-shape);
  filter: contrast(1.06) saturate(1.05);
}

.photo-splat figcaption {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: 92%;
  margin: 0.55rem auto 0;
  border: 2px solid #050505;
  border-radius: 999px;
  background: rgba(255, 247, 251, 0.84);
  box-shadow: 0.25rem 0.35rem 0 rgba(5, 5, 5, 0.72);
  color: #17121c;
  font: 900 clamp(12px, 1.6vw, 18px) / 1.1 Impact, "Arial Black", sans-serif;
  padding: 0.45rem 0.7rem;
  text-align: center;
  text-transform: uppercase;
}

.photo-tools {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 8px;
  margin-top: 0.7rem;
  border: 2px solid #050505;
  border-radius: 22px;
  background: rgba(255, 247, 251, 0.88);
  box-shadow: 0.35rem 0.45rem 0 rgba(5, 5, 5, 0.74);
  padding: 10px;
}

.photo-tools textarea {
  margin-top: 6px;
  resize: vertical;
}

.photo-tool-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.is-editing-media .photo-splat {
  cursor: grab;
}

.is-editing-media .photo-splat.is-dragging {
  z-index: 20;
  cursor: grabbing;
  filter: drop-shadow(1.1rem 1.2rem 0 rgba(5, 5, 5, 0.88)) drop-shadow(0 1.5rem 1.5rem rgba(0, 0, 0, 0.38));
}

.splat-a {
  --splat-shape: polygon(8% 17%, 25% 5%, 44% 13%, 65% 2%, 81% 17%, 97% 31%, 88% 51%, 98% 72%, 78% 86%, 58% 94%, 43% 84%, 21% 98%, 9% 78%, 0 59%, 11% 40%);
}

.splat-b {
  --splat-shape: polygon(17% 4%, 38% 13%, 55% 0, 72% 14%, 91% 9%, 96% 30%, 87% 48%, 100% 67%, 83% 89%, 60% 82%, 45% 99%, 28% 84%, 8% 88%, 2% 65%, 13% 47%, 0 25%);
}

.splat-c {
  --splat-shape: polygon(6% 29%, 18% 8%, 37% 16%, 53% 4%, 73% 8%, 86% 25%, 99% 36%, 90% 57%, 96% 78%, 72% 85%, 57% 100%, 39% 88%, 18% 94%, 9% 75%, 0 58%);
}

.splat-d {
  --splat-shape: polygon(10% 9%, 29% 18%, 45% 3%, 64% 12%, 84% 5%, 91% 28%, 100% 47%, 88% 63%, 94% 87%, 68% 83%, 52% 98%, 36% 86%, 14% 93%, 4% 72%, 11% 52%, 0 31%);
}

.splat-e {
  --splat-shape: polygon(13% 16%, 33% 3%, 48% 18%, 70% 6%, 89% 19%, 85% 39%, 99% 57%, 82% 72%, 78% 95%, 55% 86%, 37% 99%, 23% 80%, 2% 83%, 8% 60%, 0 43%);
}

@media (max-width: 760px) {
  .media-admin {
    position: sticky;
    top: 0.8rem;
    margin: 5.8rem 1rem 1rem;
  }

  .media-field {
    display: grid;
    min-height: auto;
    gap: 2.8rem;
    padding: 1rem 1rem 3rem;
  }

  .photo-splat {
    position: relative;
    top: auto;
    left: auto;
    width: min(92vw, 34rem);
    justify-self: center;
  }

  .photo-splat:nth-child(3n + 1) {
    justify-self: start;
    transform: rotate(-5deg);
  }

  .photo-splat:nth-child(3n + 2) {
    justify-self: end;
    transform: rotate(5deg);
  }

  .is-editing-media .media-field {
    display: block;
    padding: 0;
  }

  .is-editing-media .photo-splat {
    position: absolute;
    top: var(--top);
    left: var(--left);
    width: var(--w);
    justify-self: auto;
    transform: rotate(var(--rot));
  }
}