:root {
  --theme-sky: #79c9d5;
  --theme-grass: #6fae51;
  --theme-leaf: #2f7448;
  --theme-blossom: #f6a7bd;
  --theme-paper: #f7e7af;
  --theme-ink: #4c2f29;
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: var(--theme-grass);
  color: var(--theme-ink);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--theme-grass);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--theme-grass);
}

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

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.invitation {
  min-height: 100svh;
}

.section-root {
  display: contents;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: 10px 12px;
  overflow: visible;
  border: 3px solid #5d3527;
  background: #fff1bd;
  color: #4c2f29;
  clip-path: none;
}

.app-error {
  position: fixed;
  z-index: 1001;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 16px;
  margin: 0 auto;
  width: min(calc(100% - 32px), 520px);
  padding: 14px 16px;
  border: 4px solid #6f332a;
  background: #fff0bd;
  color: #7e2938;
  box-shadow: 5px 6px 0 rgb(42 39 31 / 35%);
  text-align: center;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: #d75c70;
  color: #fff8dd;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}