/*
  囧次元定制 TailwindCSS 3.4.1 主题
  主题色：奶油黄 #FFF2D8，樱粉 #FFC2D8，青空蓝 #B3E5FC，深棕 #5D4037，米白 #F7F7F7
  字体：本地黑体、微软雅黑、Arial、sans-serif
  适配按钮、卡片、分镜、便签、气泡等常用UI
  仅保留常用工具类，极致精简，适合离线使用
*/
:root {
  --color-primary: #FFF2D8;
  --color-secondary: #FFC2D8;
  --color-accent: #B3E5FC;
  --color-dark: #5D4037;
  --color-light: #F7F7F7;
  --font-sans: 'Source Han Sans SC', 'Microsoft YaHei', Arial, sans-serif;
}
html {
  font-family: var(--font-sans);
  background: #FFF2D8;
  color: #5D4037;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #FFF2D8 url('../images/bg-paper.webp') repeat;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: #5D4037;
}
/* 标题 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: #5D4037;
  font-weight: bold;
}
/* 按钮 */
.btn {
  display: inline-block;
  padding: 0.75em 2em;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFC2D8 0%, #B3E5FC 100%);
  color: #5D4037;
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px 0 rgba(255,194,216,0.12);
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
  border: none;
  cursor: pointer;
}
.btn:hover, .btn:focus {
  transform: scale(1.06);
  background: linear-gradient(90deg, #B3E5FC 0%, #FFC2D8 100%);
  box-shadow: 0 4px 16px 0 rgba(179,229,252,0.18);
}
/* 卡片 */
.card {
  background: #F7F7F7cc;
  border-radius: 1.5em;
  box-shadow: 0 2px 12px 0 rgba(93,64,55,0.08);
  padding: 2em 1.5em;
  margin: 1em 0;
  transition: box-shadow 0.2s, border 0.2s;
  border: 2px solid #FFF2D8;
}
.card:hover {
  box-shadow: 0 8px 32px 0 rgba(255,194,216,0.18);
  border: 2px solid #FFC2D8;
}
/* 分镜/便签/气泡 */
.frame, .note, .bubble {
  background: #FFF2D8ee;
  border-radius: 1em;
  box-shadow: 0 1px 6px 0 rgba(255,194,216,0.10);
  border: 1.5px dashed #FFC2D8;
  padding: 1em;
  margin: 0.5em 0;
  font-size: 1.05em;
  position: relative;
  transition: box-shadow 0.2s, border 0.2s;
}
.frame:hover, .note:hover, .bubble:hover {
  box-shadow: 0 4px 16px 0 rgba(179,229,252,0.12);
  border: 1.5px solid #B3E5FC;
}
/* 便签卷边效果 */
.note::after {
  content: '';
  position: absolute;
  right: 0.5em;
  bottom: 0.5em;
  width: 2em;
  height: 2em;
  background: linear-gradient(135deg, #FFC2D8 60%, #FFF2D8 100%);
  border-radius: 0 0 1em 0;
  box-shadow: 2px 2px 8px 0 rgba(255,194,216,0.12);
  z-index: 1;
}
/* 樱花飘落动画（基础） */
@keyframes sakura-fall {
  0% { transform: translateY(-10vh) rotateZ(0deg); opacity: 0.8; }
  100% { transform: translateY(110vh) rotateZ(360deg); opacity: 0.2; }
}
.sakura {
  position: fixed;
  top: -5vh;
  left: 0;
  width: 2.2em;
  height: 2.2em;
  pointer-events: none;
  z-index: 100;
  opacity: 0.7;
  animation: sakura-fall linear infinite;
}
/* 响应式 */
@media (max-width: 900px) {
  .card, .frame, .note, .bubble { padding: 1.2em 0.7em; }
  h1 { font-size: 2.1em; }
}
@media (max-width: 600px) {
  html { font-size: 15px; }
  .card, .frame, .note, .bubble { padding: 0.8em 0.3em; }
  h1 { font-size: 1.5em; }
}
/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; background: #FFF2D8; }
::-webkit-scrollbar-thumb { background: #FFC2D8; border-radius: 8px; }