/* 岛主的小站 — 纸感 + 史迪仔蓝 */
:root{
  --bg:#faf8f4; --bg2:#f3efe7; --card:#ffffff;
  --ink:#22242a; --ink2:#5c6470; --ink3:#9aa1ad;
  --line:#e8e2d6;
  --accent:#1a56db; --accent-soft:#e8effd;
  --code-bg:#f4f1ea;
  --shadow:0 6px 24px rgba(34,36,42,.07);
  --radius:16px;
}
[data-theme="dark"]{
  --bg:#14161c; --bg2:#1a1d25; --card:#1d2029;
  --ink:#e9ebf0; --ink2:#a7aeba; --ink3:#6d7482;
  --line:#2b303c;
  --accent:#6b97f5; --accent-soft:#22304f;
  --code-bg:#1a1d25;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--ink);
  min-height:100vh;display:flex;flex-direction:column;
  transition:background .25s,color .25s;
}
::selection{background:var(--accent);color:#fff}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* 顶栏 */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:860px;margin:0 auto;padding:0 22px;height:60px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:17px;font-weight:800;letter-spacing:1px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-links a{color:var(--ink2);font-size:14px;font-weight:500}
.nav-links a:hover{color:var(--accent);text-decoration:none}
.theme-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);
  width:34px;height:34px;border-radius:50%;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* 主体 */
.main{max-width:860px;width:100%;margin:0 auto;padding:0 22px;flex:1}

/* 首页 Hero */
.hero{padding:64px 0 36px;position:relative}
.hero .kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:2px;color:var(--accent);
  background:var(--accent-soft);padding:6px 14px;border-radius:99px;margin-bottom:18px}
.hero h1{font-size:clamp(34px,7vw,52px);font-weight:800;line-height:1.25;letter-spacing:1px}
.hero p{margin-top:14px;font-size:16px;color:var(--ink2);line-height:1.9;max-width:560px}
.hero::after{content:"";position:absolute;right:-40px;top:30px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%);filter:blur(10px);z-index:-1;pointer-events:none}

/* 文章列表 */
.sec-title{font-size:13px;font-weight:700;letter-spacing:3px;color:var(--ink3);margin:26px 0 16px;
  display:flex;align-items:center;gap:10px}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line)}
.post-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;margin-bottom:16px;box-shadow:var(--shadow);color:var(--ink);
  transition:transform .15s,box-shadow .15s}
.post-card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 12px 32px rgba(34,36,42,.12)}
.post-card .meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink3);margin-bottom:10px}
.post-card h2{font-size:21px;font-weight:750;line-height:1.5;margin-bottom:8px}
.post-card .sum{font-size:15px;color:var(--ink2);line-height:1.85;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag{display:inline-block;font-size:12px;color:var(--accent);background:var(--accent-soft);
  padding:3px 10px;border-radius:99px;font-weight:600}
.empty{color:var(--ink3);font-size:14px;padding:30px 0;text-align:center}

/* 文章页 */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);width:0;z-index:99}
.article{padding:48px 0 20px;max-width:720px;margin:0 auto}
.article .meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink3);margin-bottom:16px;flex-wrap:wrap}
.article h1{font-size:clamp(26px,5.5vw,36px);font-weight:800;line-height:1.45;margin-bottom:8px;letter-spacing:.5px}
.article .summary{font-size:16px;color:var(--ink2);line-height:1.9;border-left:3px solid var(--accent);
  padding:4px 0 4px 16px;margin:22px 0 8px}
.content{font-size:16.5px;line-height:2;color:var(--ink)}
.content p{margin:1.1em 0}
.content h2{font-size:22px;margin:1.8em 0 .7em;padding-bottom:.4em;border-bottom:1px solid var(--line)}
.content h3{font-size:18px;margin:1.6em 0 .6em}
.content ul,.content ol{margin:1em 0;padding-left:1.6em}
.content li{margin:.45em 0}
.content blockquote{margin:1.2em 0;padding:.6em 1.2em;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 10px 10px 0;color:var(--ink2)}
.content blockquote p{margin:.5em 0}
.content code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--code-bg);padding:.15em .45em;border-radius:6px;font-size:.88em}
.content pre{background:var(--code-bg);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;overflow-x:auto;margin:1.2em 0}
.content pre code{background:none;padding:0;font-size:14px;line-height:1.75}
.content img{max-width:100%;border-radius:12px;margin:1.2em 0;box-shadow:var(--shadow)}
.content hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.content strong{font-weight:750}
.back{display:inline-block;margin:10px 0 40px;font-size:14px}

/* 关于页 */
.about{padding:48px 0;max-width:720px;margin:0 auto}
.about h1{font-size:30px;margin-bottom:20px}
.about p{font-size:16px;line-height:2;color:var(--ink2);margin:1em 0}
.about .avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#1a56db,#6b97f5);
  display:flex;align-items:center;justify-content:center;font-size:44px;margin-bottom:20px}

/* 页脚 */
footer{border-top:1px solid var(--line);margin-top:50px}
.foot-in{max-width:860px;margin:0 auto;padding:26px 22px;display:flex;justify-content:space-between;
  align-items:center;font-size:13px;color:var(--ink3);flex-wrap:wrap;gap:8px}

@media(max-width:560px){
  .hero{padding:44px 0 24px}
  .post-card{padding:20px}
  .post-card h2{font-size:18px}
}

/* 网易云音乐悬浮挂件 */
.music-fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  font-size:22px;cursor:pointer;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.music-fab:active{transform:scale(.92)}
.music-panel{display:none;position:fixed;right:20px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;
  width:min(320px,calc(100vw - 40px));background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.music-head{display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;font-size:13px;font-weight:700;color:var(--ink2)}
.music-head button{border:0;background:none;font-size:20px;color:var(--ink3);cursor:pointer;line-height:1;padding:4px}
.music-panel iframe{width:100%;height:86px;display:block;border:0;background:#fff}