:root {
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --paper: #f3eddd;
  --paper-deep: #e7ddc5;
  --ink: #24352d;
  --ink-soft: #51645a;
  --moss: #486c4d;
  --moss-deep: #2f573b;
  --sun: #d8aa62;
  --wash: rgb(246 241 225 / 84%);
  --line: rgb(44 67 55 / 24%);
  --shadow: rgb(42 55 45 / 16%);
  --focus: #173f6f;
  background: var(--paper);
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  min-width: 320px;
  min-height: 320px;
  background:
    radial-gradient(circle at 48% 22%, rgb(255 253 241 / 92%), transparent 44%),
    linear-gradient(145deg, #eee6d2, #f8f3e7 58%, #e5dcc5);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button,
[role="button"],
input,
select {
  min-width: 44px;
  min-height: 44px;
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
#world-canvas:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

#stand-app {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#world-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

#world-canvas[data-mode="site-selection"],
#world-canvas[data-mode="inspect"] {
  cursor: crosshair;
}

#world-canvas[data-mode="nurture"] {
  cursor: pointer;
}

#world-canvas[data-mode="plant"] {
  cursor: cell;
}

#world-canvas[data-pointer-active="true"] {
  cursor: grabbing;
}

#interface-root {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

#interface-root :where(button, input, select, textarea, a, [role="button"], [data-interactive]) {
  pointer-events: auto;
}

#camera-controls {
  position: absolute;
  z-index: 4;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(138px, calc(env(safe-area-inset-bottom) + 128px));
  display: grid;
  grid-template-columns: repeat(2, 46px);
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgb(246 241 225 / 76%);
  box-shadow: 0 10px 32px var(--shadow);
  backdrop-filter: blur(12px) saturate(0.85);
}

#camera-controls button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(52 79 62 / 20%);
  border-radius: 13px;
  background: rgb(255 252 239 / 72%);
  box-shadow: inset 0 1px rgb(255 255 255 / 75%);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

#camera-controls button:hover {
  background: rgb(255 253 244 / 94%);
}

#camera-controls button:active {
  transform: translateY(1px);
}

#boot-status {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 45%, rgb(250 247 234 / 88%), rgb(233 226 207 / 92%)),
    var(--paper);
  color: var(--ink-soft);
  transition: opacity 420ms ease, visibility 420ms ease;
}

#boot-status[hidden] {
  display: none;
}

#boot-status[data-ready="true"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

#boot-status[data-error="true"] {
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 620px;
  height: auto;
  min-height: 0;
  margin: 24px;
  border: 1px solid rgb(117 72 58 / 22%);
  border-radius: 16px;
  background: rgb(250 244 229 / 96%);
  color: #68463b;
  box-shadow: 0 18px 60px rgb(45 48 39 / 18%);
}

.boot-mark {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 2px solid rgb(65 94 71 / 25%);
  border-top-color: var(--moss-deep);
  border-radius: 50%;
  animation: boot-turn 1.1s linear infinite;
}

#boot-status[data-error="true"] .boot-mark {
  border: 0;
  border-radius: 0;
  animation: none;
}

#boot-status[data-error="true"] .boot-mark::before {
  content: "!";
  font-weight: 800;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  background: #fffdf4;
  color: #14251d;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.noscript-message {
  position: fixed;
  z-index: 20;
  inset: 24px auto auto 24px;
  max-width: 520px;
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #fff8e7;
  color: #4c342d;
}

@keyframes boot-turn {
  to {
    transform: rotate(1turn);
  }
}

@media (max-width: 640px), (max-height: 520px) {
  #camera-controls {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(142px, calc(env(safe-area-inset-bottom) + 134px));
    grid-template-columns: repeat(5, 44px);
    max-width: calc(100% - 16px);
    overflow-x: auto;
  }

  #camera-controls button {
    width: 44px;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (forced-colors: active) {
  #camera-controls,
  #boot-status {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    backdrop-filter: none;
  }
}