:root{
  --bg:#ffffff; --panel:#f7f3ea; --ink:#2f2f33; --muted:#8a8578; --line:#e9e2d4;
  --accent:#0e9594; --bar:#f5efe3; --article-fs:17px;
}
html[data-mode="sunset"]{ --bg:#faf0dd; --panel:#f7e8d0; --ink:#43372a; --muted:#9a8567; --line:#ecd9b8; --bar:#f3e3c2; }
html[data-mode="night"]{ --bg:#17191d; --panel:#1f2228; --ink:#d9d9d9; --muted:#9aa0a6; --line:#33373f; --bar:#1f2228; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:16px; line-height:1.75; transition:background .3s,color .3s; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
#progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent); z-index:99; }

/* topbar */
#topbar{ position:sticky; top:0; z-index:50; background:var(--bar); border-bottom:1px solid var(--line); }
.topbar-in{ max-width:1100px; margin:0 auto; padding:0 18px; height:56px; display:flex; align-items:center; gap:26px; }
.brand{ font-size:20px; font-weight:800; color:var(--ink); letter-spacing:1px; white-space:nowrap; }
.brand:hover{ text-decoration:none; }
.brand-img{ height:34px; width:auto; display:block; }
.topnav{ margin-left:auto; display:flex; align-items:center; gap:20px; font-size:15px; }
.topnav a{ color:var(--ink); }
.has-drop{ position:relative; }
.has-drop .drop{ display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:8px; min-width:150px; }
.has-drop:hover .drop{ display:block; }
.has-drop .drop a{ display:block; padding:7px 12px; border-radius:6px; white-space:nowrap; }
.has-drop .drop a:hover{ background:var(--panel); text-decoration:none; }
#search-box{ display:none; max-width:1100px; margin:0 auto; padding:0 18px 12px; }
#search-box.open{ display:block; }
#search-box input{ width:100%; padding:10px 14px; font-size:16px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); }
#read-panel{ display:none; max-width:1100px; margin:0 auto; padding:0 18px 14px; color:var(--ink); font-size:14px; }
#read-panel.open{ display:block; }
#read-panel .rp-row{ display:flex; align-items:center; gap:10px; padding:4px 0; }
#read-panel button{ border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px; padding:4px 14px; cursor:pointer; font-size:14px; }
#read-panel button:hover{ border-color:var(--accent); color:var(--accent); }

/* hero */
.hero{ position:relative; height:min(500px,52vw); min-height:260px; overflow:hidden; }
.hero-art{ position:absolute; inset:0; width:100%; height:100%; }
.hero-text{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
.hero-text h1{ color:#fff; font-size:clamp(30px,5.4vw,58px); margin:0; letter-spacing:3px; text-shadow:0 4px 30px rgba(0,0,0,.45); }
.hero-text p{ color:rgba(255,255,255,.92); font-size:clamp(14px,2vw,18px); margin:14px 0 0; text-shadow:0 2px 12px rgba(0,0,0,.5); max-width:760px; }

/* list */
.wrap{ max-width:920px; margin:0 auto; padding:34px 18px 10px; }
.wrap.narrow{ max-width:760px; }
.archive-head{ text-align:center; margin:8px 0 26px; }
.archive-head h1{ font-size:clamp(24px,3.6vw,36px); margin:0; }
.card-wrap{ margin:0 0 22px; }
.card{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height:230px; padding:34px 30px 46px; border-radius:14px; overflow:hidden; color:#fff; }
.card:hover{ text-decoration:none; filter:brightness(1.05); }
.card::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% -20%, rgba(255,255,255,.35), transparent 55%); }
.card.g0{ background:linear-gradient(135deg,#654ea3,#eaafc8); }
.card.g1{ background:linear-gradient(135deg,#0e9594,#7fc8a9); }
.card.g2{ background:linear-gradient(135deg,#e2703a,#f7b267); }
.card.g3{ background:linear-gradient(135deg,#355c7d,#6c9ab0); }
.card.g4{ background:linear-gradient(135deg,#8e4a7d,#e5989b); }
.card.g5{ background:linear-gradient(135deg,#2f5d50,#95b8a4); }
.card-title{ position:relative; z-index:2; font-size:clamp(21px,3.2vw,32px); line-height:1.45; margin:0; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.35); }
.card-meta{ position:absolute; z-index:2; left:0; right:0; bottom:16px; font-size:13.5px; color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(0,0,0,.4); }
.pager{ display:flex; justify-content:space-between; gap:14px; margin:30px 0 8px; }
.pager a{ border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:10px 26px; border-radius:999px; font-size:15px; }
.pager a:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }
.pager a:empty{ display:none; }
.empty{ text-align:center; padding:60px 0; }

/* article */
.article-title{ font-size:clamp(26px,4.4vw,40px); line-height:1.35; text-align:center; margin:14px 0 10px; }
.article-meta{ text-align:center; color:var(--muted); font-size:14.5px; margin-bottom:30px; }
.article-meta a{ color:var(--accent); }
.article-body{ font-size:var(--article-fs); line-height:1.95; word-wrap:break-word; }
.article-body h1,.article-body h2{ font-size:1.45em; margin:1.5em 0 .7em; line-height:1.4; }
.article-body h3{ font-size:1.18em; margin:1.4em 0 .6em; line-height:1.45; }
.article-body p{ margin:.9em 0; }
.article-body ul,.article-body ol{ padding-left:1.4em; }
.article-body li{ margin:.35em 0; }
.article-body img{ max-width:100%; border-radius:10px; }
.article-body blockquote{ margin:1.2em 0; padding:10px 18px; border-left:3px solid var(--accent); background:var(--panel); color:var(--muted); }
.article-body table{ border-collapse:collapse; width:100%; font-size:.92em; display:block; overflow-x:auto; }
.article-body th,.article-body td{ border:1px solid var(--line); padding:7px 10px; text-align:left; }
.article-body code{ background:var(--panel); padding:1px 6px; border-radius:5px; font-size:.9em; }
.tags{ color:var(--muted); font-size:14px; margin-top:34px; }
.back-list{ margin:26px 0 6px; }
.post-near{ list-style:none; padding:0; margin:10px 0 30px; color:var(--muted); font-size:15px; }
.post-near li{ padding:4px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* archives page */
.arch-h{ margin:36px 0 12px; font-size:22px; }
.cloud a{ display:inline-block; margin:0 8px 10px 0; padding:5px 14px; border:1px solid var(--line); border-radius:999px; color:var(--ink); font-size:14px; background:var(--panel); }
.cloud a:hover{ border-color:var(--accent); color:var(--accent); text-decoration:none; }
.arch-month{ margin:26px 0 8px; font-size:19px; }
.arch-row{ display:flex; gap:14px; padding:5px 0; border-bottom:1px dashed var(--line); font-size:16px; }
.arch-day{ color:var(--muted); font-variant-numeric:tabular-nums; flex:0 0 46px; }
.arch-row a{ color:var(--ink); }
.arch-row a:hover{ color:var(--accent); }

/* comments */
#comments{ margin-top:44px; border-top:1px solid var(--line); padding-top:8px; }
#comments h3{ font-size:20px; }
.comment-list{ list-style:none; padding:0; }
.comment-list li{ border-bottom:1px solid var(--line); padding:14px 0; }
.comment-author{ font-weight:700; }
.comment-meta{ color:var(--muted); font-size:13px; }
#comment-form .text,#comment-form .textarea{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font-size:15px; }
#comment-form label{ display:block; margin-bottom:5px; font-size:14px; color:var(--muted); }
#comment-form .submit{ background:var(--accent); color:#fff; border:none; padding:10px 30px; border-radius:999px; font-size:15px; cursor:pointer; }

/* footer */
#footer{ text-align:center; color:var(--muted); font-size:14px; padding:38px 18px 30px; border-top:1px solid var(--line); margin-top:36px; background:var(--panel); }
#footer a{ color:var(--accent); }
.foot-sub{ margin-top:6px; font-size:12.5px; }

@media (max-width:640px){
  .topbar-in{ gap:14px; }
  .topnav{ gap:13px; font-size:14px; }
  .brand{ font-size:17px; }
  .brand-img{ height:27px; }
  .card{ min-height:176px; padding:26px 18px 44px; }
  .wrap{ padding-top:22px; }
}