html,
body {
  background-color: #f0e5d2;
}

.page-tools {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10;
}

.home-button {
  width: 132px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff9e8;
  background: #7c4827;
  border: 4px outset #96572e;
  box-shadow: 2px 2px 0 #2f160c;
  font: bold 22px Arial, sans-serif;
  text-decoration: none;
}

.home-button:hover {
  color: #fff9e8;
  background: #91552e;
}

.home-button:active {
  border-style: inset;
  box-shadow: none;
}

.site-world {
  position: relative;
  max-width: 1100px;
  isolation: isolate;
  background-color: #f0e5d2;
}

.site-world > main {
  position: relative;
  z-index: 1;
}

.home .masthead > img {
  object-position: 50% 56%;
  border: 2px ridge #d4bc69;
}

.home .brand h1 {
  text-shadow: 1px 1px #cbdfac;
}

.home .home-grid {
  margin-top: 22px;
}

.home-message .community-link {
  margin-bottom: 30px;
}

.garden-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.float-slot {
  position: absolute;
  left: var(--scatter-x, 50%);
  top: var(--scatter-y, 50%);
  width: var(--scatter-width, var(--scatter-size, 112px));
  height: var(--scatter-size, 112px);
  transform: translate(-50%, -50%) rotate(var(--scatter-tilt, 0deg));
  pointer-events: none;
}

.model-fallback {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  animation: paperfloat 7s ease-in-out infinite alternate;
}

.image-floater .model-fallback {
  mix-blend-mode: normal;
  animation-name: swimfloat;
  animation-duration: 9s;
}

.fish-floater .model-fallback {
  animation-direction: alternate-reverse;
  animation-duration: 7.5s;
}

.model-ready .model-fallback {
  visibility: hidden;
}

.floating-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  width: 100%;
  height: 100%;
}

.inner {
  width: 776px;
}

.motion-paused .model-fallback {
  animation: none;
}

@keyframes paperfloat {
  from { transform: translateY(-5px) rotate(-5deg); }
  to { transform: translateY(5px) rotate(5deg); }
}

@keyframes swimfloat {
  from { transform: translate(-10px, -5px) rotate(-4deg); }
  to { transform: translate(10px, 6px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .model-fallback {
    animation: none;
  }
}

@media (max-width: 1099px) {
  .site-world {
    max-width: 776px;
  }

  .inner {
    width: 100%;
  }
}

@media (max-width: 775px) {
  .site-world,
  .home {
    width: 100%;
    max-width: 100%;
  }

  .page-tools {
    top: 12px;
    right: 12px;
  }

  .home-button {
    width: 104px;
    min-height: 46px;
    font-size: 18px;
  }

  .home .home-grid {
    margin-top: 22px;
  }
}