@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap";:root{--bg:#faf9f7;--bg-card:#fff;--bg-card-hover:#f8f7f5;--bg-article:#fff;--text:#1a1a2e;--text-secondary:#6b7280;--text-muted:#9ca3af;--border:#e8e6e1;--border-light:#f0eee8;--accent:#3b5e8b;--accent-light:#5b7fa8;--accent-bg:#eef3f8;--tag-bg:#f0f0ee;--tag-text:#555;--featured:#c9773b;--header-bg:#fff;--header-border:#e8e6e1;--glow:#3b5e8b0f;--shadow:0 1px 3px #0000000a, 0 1px 2px #0000000f;--shadow-lg:0 10px 40px #0000000f, 0 2px 8px #0000000a;--radius:12px;--radius-sm:8px;--font-sans:"Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;--font-serif:"Noto Serif SC", Georgia, serif;--max-width:1120px;--content-width:720px}@media (prefers-color-scheme:dark){:root{--bg:#0e0e12;--bg-card:#16161d;--bg-card-hover:#1c1c25;--bg-article:#16161d;--text:#e8e6e3;--text-secondary:#8b8fa3;--text-muted:#5c5f73;--border:#26262f;--border-light:#1e1e27;--accent:#8ab4d9;--accent-light:#6d9cc4;--accent-bg:#1a2330;--tag-bg:#1f1f28;--tag-text:#9a9aaa;--featured:#d4956d;--header-bg:#0e0e12;--header-border:#1e1e27;--glow:#8ab4d90d;--shadow:0 1px 3px #0003, 0 1px 2px #0000004d;--shadow-lg:0 10px 40px #0000004d, 0 2px 8px #0003}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.6}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-light)}img{max-width:100%}.header{z-index:100;background:var(--header-bg);border-bottom:1px solid var(--header-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0}.header-inner{max-width:var(--max-width);justify-content:space-between;align-items:center;height:64px;margin:0 auto;padding:0 24px;display:flex}.header-logo{color:var(--text);letter-spacing:-.02em;font-size:1.15rem;font-weight:700}.header-logo:hover,.header-logo span{color:var(--accent)}.header-nav{align-items:center;gap:24px;display:flex}.header-nav a{color:var(--text-secondary);font-size:.875rem;font-weight:500;transition:color .2s}.header-nav a:hover,.header-nav a.active{color:var(--text)}.hero{max-width:var(--max-width);margin:0 auto;padding:64px 24px 48px}.hero-title{font-family:var(--font-serif);letter-spacing:-.02em;margin-bottom:12px;font-size:2.8rem;font-weight:700;line-height:1.2}.hero-subtitle{color:var(--text-secondary);max-width:560px;font-size:1.05rem;line-height:1.7}.hero-divider{background:var(--accent);border-radius:2px;width:48px;height:3px;margin-top:24px}.featured-section{max-width:var(--max-width);margin:0 auto;padding:0 24px 48px}.featured-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:16px;font-size:.75rem;font-weight:600}.featured-card{background:linear-gradient(135deg, var(--accent-bg) 0%, var(--bg-card) 100%);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:36px 40px;transition:all .3s;position:relative;overflow:hidden}.featured-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.featured-badge{background:var(--featured);color:#fff;letter-spacing:.04em;border-radius:4px;margin-bottom:16px;padding:2px 10px;font-size:.675rem;font-weight:600;display:inline-block}.featured-card h2{font-family:var(--font-serif);margin-bottom:12px;font-size:1.6rem;font-weight:700;line-height:1.3}.featured-card .meta{color:var(--text-secondary);font-size:.825rem}.featured-card .summary{color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:12px;font-size:.95rem;line-height:1.7;display:-webkit-box;overflow:hidden}.featured-card .tags{flex-wrap:wrap;gap:6px;margin-top:16px;display:flex}.featured-card .tags span{background:var(--tag-bg);color:var(--tag-text);border-radius:12px;padding:2px 10px;font-size:.75rem}.articles-section{max-width:var(--max-width);margin:0 auto;padding:0 24px 64px}.section-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.section-title{font-family:var(--font-serif);font-size:1.2rem;font-weight:600}.article-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;display:grid}.article-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;flex-direction:column;padding:28px;transition:all .3s;display:flex}.article-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-3px)}.article-card .card-meta{color:var(--text-muted);gap:10px;margin-bottom:10px;font-size:.8rem;display:flex}.article-card h3{margin-bottom:8px;font-size:1.1rem;font-weight:600;line-height:1.4}.article-card h3:hover{color:var(--accent)}.article-card p{color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;font-size:.875rem;line-height:1.6;display:-webkit-box;overflow:hidden}.article-card .card-tags{flex-wrap:wrap;gap:4px;margin-top:14px;display:flex}.article-card .card-tags span{background:var(--tag-bg);color:var(--tag-text);border-radius:10px;padding:1px 8px;font-size:.7rem}.article-card .card-read{color:var(--accent);align-items:center;gap:4px;margin-top:14px;font-size:.8rem;font-weight:500;display:flex}.article-card:hover .card-read:after{content:"→"}.article-page{max-width:var(--max-width);margin:0 auto;padding:48px 24px 80px}.article-page-inner{max-width:var(--content-width);margin:0 auto}.back-link{color:var(--text-secondary);align-items:center;gap:6px;margin-bottom:32px;font-size:.875rem;transition:color .2s;display:inline-flex}.back-link:hover{color:var(--text)}.article-header{margin-bottom:40px}.article-header .article-tags{flex-wrap:wrap;gap:6px;margin-bottom:16px;display:flex}.article-header .article-tags span{background:var(--tag-bg);color:var(--tag-text);border-radius:12px;padding:2px 10px;font-size:.75rem}.article-header h1{font-family:var(--font-serif);margin-bottom:16px;font-size:2.2rem;font-weight:700;line-height:1.25}.article-header .article-meta{color:var(--text-secondary);align-items:center;gap:16px;font-size:.85rem;display:flex}.article-content{font-family:var(--font-sans);color:var(--text);font-size:1rem;line-height:1.85}.article-content p{margin-bottom:1.2em}.article-content h2{font-family:var(--font-serif);border-bottom:1px solid var(--border-light);margin-top:2em;margin-bottom:.6em;padding-bottom:.3em;font-size:1.5rem;font-weight:700}.article-content h3{font-family:var(--font-serif);margin-top:1.5em;margin-bottom:.5em;font-size:1.2rem;font-weight:600}.article-content h4{margin-top:1.2em;margin-bottom:.4em;font-weight:600}.article-content blockquote{border-left:3px solid var(--accent);color:var(--text-secondary);margin:1.5em 0;padding-left:20px;font-style:italic}.article-content ul,.article-content ol{margin-bottom:1.2em;padding-left:24px}.article-content li{margin-bottom:.4em}.article-content img{border-radius:var(--radius);width:100%;margin:1.5em 0}.article-content pre{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);margin:1.2em 0;padding:16px 20px;font-size:.875rem;line-height:1.6;overflow-x:auto}.article-content code{font-family:JetBrains Mono,Fira Code,monospace;font-size:.875em}.article-content p code{background:var(--accent-bg);border-radius:4px;padding:2px 6px}.article-content table{border-collapse:collapse;width:100%;margin:1.2em 0}.article-content th,.article-content td{border:1px solid var(--border);text-align:left;padding:10px 14px;font-size:.9rem}.article-content th{background:var(--accent-bg);font-weight:600}.article-content hr{border:none;border-top:1px solid var(--border);margin:2em 0}.footer{border-top:1px solid var(--border);text-align:center;color:var(--text-muted);padding:32px 24px;font-size:.8rem}.footer-inner{max-width:var(--max-width);margin:0 auto}.footer a{color:var(--text-secondary)}.footer a:hover{color:var(--accent)}.footer-social{justify-content:center;gap:20px;margin-bottom:16px;display:flex}.footer-social a{font-size:.85rem}.loading-state{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:50vh;display:flex}.spinner{border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{color:var(--text-secondary);font-size:.9rem}.empty-state{text-align:center;color:var(--text-secondary);padding:80px 24px}.empty-state span{margin-bottom:12px;font-size:2.5rem;display:block}.error-state{text-align:center;padding:80px 24px}.error-state .retry-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;margin-top:16px;padding:8px 24px;font-size:.875rem}.error-state .retry-btn:hover{background:var(--accent-light)}.fade-in{animation:.5s both fadeIn}.fade-up{animation:.5s both fadeUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.stagger>*{opacity:0;animation:.4s forwards fadeUp}.stagger>:first-child{animation-delay:50ms}.stagger>:nth-child(2){animation-delay:.1s}.stagger>:nth-child(3){animation-delay:.15s}.stagger>:nth-child(4){animation-delay:.2s}.stagger>:nth-child(5){animation-delay:.25s}.stagger>:nth-child(6){animation-delay:.3s}.about-page{max-width:720px;margin:0 auto;padding:48px 24px 80px}.about-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:48px 40px}.about-avatar{text-align:center;margin-bottom:16px;font-size:3rem}.about-card h1{font-family:var(--font-serif);text-align:center;margin-bottom:4px;font-size:1.8rem;font-weight:700}.about-tagline{text-align:center;color:var(--text-secondary);margin-bottom:40px}.about-section{margin-bottom:32px}.about-section h2{color:var(--accent);margin-bottom:12px;font-size:1.1rem;font-weight:600}.about-section p{color:var(--text-secondary);font-size:.95rem;line-height:1.8}.about-section ul{padding-left:20px}.about-section li{color:var(--text-secondary);margin-bottom:4px;font-size:.95rem;line-height:1.8}.about-section a{color:var(--accent)}.guestbook-page{max-width:600px;margin:0 auto;padding:48px 24px 80px}.guestbook-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:40px}.guestbook-card h1{font-family:var(--font-serif);margin-bottom:8px;font-size:1.6rem;font-weight:700}.guestbook-subtitle{color:var(--text-secondary);margin-bottom:32px;font-size:.95rem}.guestbook-form{flex-direction:column;gap:20px;display:flex}.guestbook-field{flex-direction:column;gap:6px;display:flex}.guestbook-field label{font-size:.875rem;font-weight:500}.guestbook-field input,.guestbook-field textarea{border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;font-family:var(--font-sans);background:var(--bg);color:var(--text);outline:none;padding:10px 14px;transition:border-color .2s}.guestbook-field input:focus,.guestbook-field textarea:focus{border-color:var(--accent)}.guestbook-field textarea{resize:vertical;min-height:100px}.guestbook-count{color:var(--text-muted);text-align:right;font-size:.75rem}.guestbook-btn{background:var(--accent);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;align-self:flex-start;padding:10px 28px;font-size:.9rem;font-weight:500;transition:background .2s}.guestbook-btn:hover{background:var(--accent-light)}.guestbook-btn:disabled{opacity:.6;cursor:not-allowed}.guestbook-error{color:#dc2626;border-radius:var(--radius-sm);background:#fef2f2;border:1px solid #fecaca;padding:10px 14px;font-size:.85rem}.guestbook-success{text-align:center;padding:40px 0}.guestbook-success-icon{color:#fff;background:#16a34a;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:12px;font-size:1.25rem;display:inline-flex}.guestbook-success p{color:var(--text-secondary);margin-bottom:20px}@media (prefers-color-scheme:dark){.guestbook-error{color:#fca5a5;background:#2d1515;border-color:#5c1a1a}.guestbook-success-icon{background:#15803d}}@media (width<=768px){.hero-title{font-size:2rem}.hero{padding:40px 20px 32px}.featured-section,.articles-section{padding-left:20px;padding-right:20px}.article-grid{grid-template-columns:1fr}.featured-card{padding:24px}.featured-card h2{font-size:1.3rem}.article-header h1{font-size:1.6rem}.article-page{padding:32px 20px 60px}.header-inner{padding:0 16px}}@media (width<=480px){.hero-title{font-size:1.6rem}.hero-subtitle{font-size:.95rem}.article-card{padding:20px}}