:root {
  --bg: #0d0d0d;
  --text: #f0f0f0;
  --text-muted: #999;
  --sakura: #f090a8;
  --sakura-light: #ffc8d5;
  --border: #222;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --width: 780px;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  min-height: 100vh;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@keyframes sakura-fall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(105vh) rotate(360deg); opacity: 0; }
}
@keyframes sakura-sway {
  0%,100% { margin-left: 0; }
  25%     { margin-left: 18px; }
  75%     { margin-left: -18px; }
}
.sakura-container {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.petal {
  position: absolute; top: -20px;
  border-radius: 50% 0 50% 0; opacity: 0;
  animation: sakura-fall linear infinite, sakura-sway ease-in-out infinite;
}
.petal:nth-child(1)  { left:5%;  width:7px;  height:7px;  background:#ffb7c5; animation-duration:9s,3.5s;  animation-delay:0s,0s; }
.petal:nth-child(2)  { left:15%; width:10px; height:10px; background:#ffc8d5; animation-duration:13s,4.5s; animation-delay:2s,1s; }
.petal:nth-child(3)  { left:25%; width:6px;  height:6px;  background:#e8829a; animation-duration:10s,3s;   animation-delay:4s,0.5s; }
.petal:nth-child(4)  { left:35%; width:9px;  height:9px;  background:#ffd6e0; animation-duration:12s,5s;   animation-delay:1s,2s; }
.petal:nth-child(5)  { left:45%; width:5px;  height:5px;  background:#ffb7c5; animation-duration:8s,4s;    animation-delay:3s,1.5s; }
.petal:nth-child(6)  { left:55%; width:8px;  height:8px;  background:#e8829a; animation-duration:14s,3.5s; animation-delay:0.5s,3s; }
.petal:nth-child(7)  { left:65%; width:6px;  height:6px;  background:#ffc8d5; animation-duration:11s,4s;   animation-delay:5s,0s; }
.petal:nth-child(8)  { left:75%; width:11px; height:11px; background:#ffb7c5; animation-duration:9s,3s;    animation-delay:2.5s,1s; }
.petal:nth-child(9)  { left:85%; width:7px;  height:7px;  background:#ffd6e0; animation-duration:12s,5.5s; animation-delay:6s,2s; }
.petal:nth-child(10) { left:93%; width:9px;  height:9px;  background:#e8829a; animation-duration:10s,4s;   animation-delay:1.5s,3s; }

.site-wrap {
  position: relative; z-index: 1;
  max-width: var(--width);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header { margin-bottom: 2.5rem; }

.site-name {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.site-name a {
  color: var(--sakura);
  text-decoration: none;
  transition: color 0.2s;
}

.site-name a:hover { color: var(--sakura-light); }

.site-nav {
  display: flex;
  gap: 1.4rem;
}

.site-nav a {
  color: var(--sakura);
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.2s;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--sakura-light);
  text-decoration: underline;
}

.site-main { flex: 1; }

.home-intro { margin-bottom: 3rem; }

.home-bio {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.home-bio-sub {
  font-size: 1.3rem;
  color: var(--text);
  line-height: 1.8;
}

/* 文章列表 */
.post-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.post-item {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}

.post-date {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-style: italic;
}

.post-link {
  color: var(--sakura);
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.2s;
}

.post-link:hover { color: var(--sakura-light); }

/* 文章页 */
.post-header { margin-bottom: 2rem; }

.post-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.post-date-single {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-muted);
  font-style: italic;
}

/* 文章内容 */
.post-content { color: var(--text); line-height: 1.9; }

.post-content h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 1rem;
  color: var(--text);
  font-weight: 700;
}

.post-content h3 {
  font-size: 1.2rem;
  margin: 2rem 0 0.75rem;
  color: var(--text);
}

.post-content p {
  margin-bottom: 1.4rem;
  font-size: 1.05rem;
}

.post-content a {
  color: var(--sakura);
  text-decoration: underline;
}

.post-content a:hover { color: var(--sakura-light); }

.post-content ul,
.post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.4rem;
}

.post-content li {
  margin-bottom: 0.3rem;
  font-size: 1.05rem;
}

.post-content blockquote {
  border-left: 3px solid var(--sakura);
  padding: 0.5rem 1rem;
  margin: 1.5rem 0;
  color: #f0f0f0;
  font-style: italic;
  background: #161616;
}

.post-content blockquote p { margin: 0; }

.post-content code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: #1a1a1a;
  color: var(--sakura-light);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

.post-content pre {
  background: #1a1a1a;
  border-radius: 4px;
  padding: 1.2rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.post-content pre code {
  background: none;
  padding: 0;
  color: var(--text);
  font-size: 0.875rem;
}

.post-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

.post-content img {
  max-width: 100%;
  border-radius: 4px;
  display: block;
  margin: 1.5rem auto;
}

/* 标黄高亮 */
.post-content mark {
  background: #ffff00;
  color: #000;
  padding: 0 0.2em;
  border-radius: 2px;
}

/* Notes */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.note-item {
  border-left: 2px solid var(--sakura);
  padding-left: 1.2rem;
}

.note-date {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-muted);
  font-style: italic;
  display: block;
  margin-bottom: 0.4rem;
}

.note-content {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.8;
  margin: 0;
}

/* Footer */
.site-footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.site-footer a { color: var(--sakura); text-decoration: none; }
.site-footer a:hover { color: var(--sakura-light); }

/* About */
.about-page { line-height: 1.9; }
.about-page h1 { font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--text); }
.about-page p  { margin-bottom: 1.2rem; font-size: 1.05rem; color: var(--text); }
.about-page a  { color: var(--sakura); }

/* 滚动条 */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--sakura); }

::selection { background: rgba(232,130,154,0.3); }

@media (max-width: 600px) {
  .site-wrap  { padding: 2rem 1.2rem 3rem; }
  .site-name  { font-size: 1.8rem; }
  .home-bio   { font-size: 1.4rem; }
  .post-item  { flex-direction: column; gap: 0.1rem; }
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 1rem;
}

.post-content th,
.post-content td {
  border: 1px solid #333;
  padding: 12px 14px;
  text-align: left;
}

.post-content th {
  background: #151515;
  color: var(--sakura-light);
  font-weight: 700;
}

.post-content tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}