:root {
  --accent: #d94a35;
  --accent-deep: #8f241d;
  --surface: #f5ead8;
  --ink: #291d18;
  --paper: #fffaf2;
  --muted: color-mix(in srgb, var(--ink) 58%, transparent);
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  font-family: "Noto Serif SC", "Songti SC", serif;
  color: var(--ink);
  background: #dfd9cf;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #dfd9cf;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 50% 0, #f8f4ec 0, transparent 42%),
    #dfd9cf;
}

button {
  font: inherit;
}

.page-shell {
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 70px rgb(53 39 28 / 12%);
}

.hero {
  position: relative;
  min-height: 510px;
  padding: 22px 24px 0;
  overflow: hidden;
  background:
    linear-gradient(152deg, transparent 42%, rgb(255 255 255 / 18%) 42.2%, transparent 60%),
    var(--surface);
  isolation: isolate;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.topbar,
.section-heading,
.publish-step {
  display: flex;
  align-items: center;
}

.topbar {
  gap: 11px;
  animation: reveal 600ms ease-out both;
}

.brand-mark {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%;
  color: var(--accent-deep);
  font-family: "Ma Shan Zheng", cursive;
  font-size: 20px;
}

.eyebrow,
.activity-badge,
.meta-label,
.edit-hint,
.step-number {
  font-weight: 700;
  letter-spacing: 0.12em;
}

.eyebrow {
  color: var(--accent-deep);
  font-size: 12px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: 82%;
  margin-top: 62px;
  animation: reveal 700ms 80ms ease-out both;
}

.activity-badge {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  color: white;
  background: var(--accent);
  font-size: 11px;
}

h1,
h2,
p {
  margin: 0;
}

.hero h1 {
  max-width: 7em;
  margin-top: 13px;
  font-size: clamp(44px, 13vw, 62px);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 1.08;
}

.hero-copy p {
  max-width: 22em;
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.landscape {
  position: absolute;
  inset: 185px -30px 0;
  overflow: hidden;
  animation: landscape-in 1s 160ms cubic-bezier(.2,.75,.25,1) both;
}

.sun {
  position: absolute;
  top: 18px;
  right: 50px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 78%, #f5b95d);
  box-shadow: 0 0 0 13px color-mix(in srgb, var(--accent) 9%, transparent);
}

.ridge {
  position: absolute;
  right: -15%;
  bottom: -25%;
  left: -15%;
  height: 72%;
  border-radius: 48% 56% 0 0 / 75% 85% 0 0;
  transform: rotate(-8deg);
  transform-origin: 50% 100%;
}

.ridge-back {
  bottom: 5%;
  left: 22%;
  background: color-mix(in srgb, var(--accent) 27%, var(--surface));
  transform: rotate(14deg);
}

.ridge-mid {
  right: 8%;
  bottom: -7%;
  left: -35%;
  background: color-mix(in srgb, var(--accent-deep) 65%, var(--surface));
  transform: rotate(12deg);
}

.ridge-front {
  right: -35%;
  bottom: -34%;
  left: 17%;
  background: var(--accent-deep);
  transform: rotate(-17deg);
}

.trail {
  position: absolute;
  right: 24%;
  bottom: -2%;
  width: 19%;
  height: 49%;
  border-radius: 80% 0 0;
  background: color-mix(in srgb, var(--surface) 86%, white);
  transform: rotate(16deg) skewX(-13deg);
}

.meta-card {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 18px;
  padding: 17px 20px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 18px;
  background: rgb(255 250 242 / 80%);
  box-shadow: 0 15px 45px rgb(51 28 20 / 14%);
  backdrop-filter: blur(14px);
  animation: reveal 700ms 260ms ease-out both;
}

.meta-card div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.meta-label {
  color: var(--muted);
  font-size: 9px;
}

.meta-card strong {
  font-size: 14px;
}

.meta-rule {
  background: var(--line);
}

.content {
  padding: 34px 24px 38px;
}

.section-heading {
  justify-content: space-between;
}

.section-heading > div,
.publish-step {
  gap: 12px;
}

.step-number {
  color: var(--accent);
  font-size: 11px;
}

h2 {
  font-size: 18px;
}

.edit-hint {
  color: var(--muted);
  font-size: 9px;
}

.copy-card {
  margin-top: 17px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 46%, white), white 72%);
  box-shadow: 0 15px 40px rgb(44 31 25 / 7%);
}

#copy-text {
  min-height: 120px;
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.9;
}

.copy-button,
.publish-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.copy-button:active,
.publish-button:active {
  transform: scale(0.98);
}

.copy-button {
  gap: 8px;
  margin-top: 18px;
  padding: 13px;
  border-radius: 13px;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 12%, white);
  font-size: 13px;
  font-weight: 700;
}

.button-icon {
  display: flex;
}

.copy-button svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.publish-step {
  margin: 31px 0 17px;
  align-items: flex-start;
}

.publish-step p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.publish-button {
  justify-content: space-between;
  padding: 17px 20px;
  border-radius: 16px;
  color: white;
  background: var(--accent-deep);
  box-shadow: 0 13px 28px color-mix(in srgb, var(--accent-deep) 26%, transparent);
  font-size: 15px;
  font-weight: 700;
}

.publish-button svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.status-message {
  min-height: 22px;
  margin-top: 12px;
  color: var(--accent-deep);
  font-size: 12px;
  text-align: center;
}

.footnote {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}

.error-state {
  width: min(100% - 48px, 430px);
  margin: 22vh auto 0;
  text-align: center;
}

.error-state span {
  color: var(--accent);
  font-size: 70px;
  font-weight: 900;
  opacity: 0.18;
}

.error-state h1 {
  margin-top: -20px;
  font-size: 27px;
}

.error-state p {
  margin-top: 15px;
  color: #6a625c;
  line-height: 1.8;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes landscape-in {
  from {
    opacity: 0;
    transform: translateY(35px) scale(1.04);
  }
}

@media (min-width: 700px) {
  body {
    padding: 34px 0;
  }

  .page-shell {
    min-height: auto;
    border-radius: 28px;
  }
}

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