html { scroll-behavior: smooth; }
* { margin:0; padding:0; box-sizing:border-box; }
body {
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
  font-family: -apple-system, "PingFang SC", "Noto Serif SC", "Source Han Serif SC", "Microsoft YaHei", serif;
  background: var(--bg);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(240,124,60,.04) 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 100%, rgba(77,232,160,.03) 0%, transparent 50%);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.7;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: 72px;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(240,124,60,.015) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(77,232,160,.01) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.page { display: none !important; }
.page.active { display: block !important; animation: pageEnter .35s cubic-bezier(.22,.61,.36,1); }
#page-write.page.active { display: flex !important; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }