:root{
  --bg:#05060a;
  --fg:#e9ecf2;
  --dim:#7b8496;
  --faint:#4a5261;
  --line:rgba(255,255,255,.09);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  background:var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100%;
}

body{
  background:
    radial-gradient(120% 70% at 50% -8%,#101a30 0%,rgba(5,6,10,0) 60%),
    var(--bg);
}

main{
  max-width:720px;
  margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 56px) 22px calc(env(safe-area-inset-bottom,0px) + 48px);
}

header{margin-bottom:38px}

.kicker{
  font-family:var(--mono);
  font-size:10.5px;letter-spacing:.2em;
  color:#22d3ee;opacity:.85;
  margin-bottom:16px;
}

header h1{
  font-size:clamp(28px,8vw,40px);
  font-weight:500;letter-spacing:-.015em;line-height:1.2;
}

header p{
  margin-top:14px;
  font-size:14px;line-height:1.75;color:var(--dim);
  max-width:520px;
}

.card{
  display:block;
  text-decoration:none;color:inherit;
  background:rgba(255,255,255,.032);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  margin-bottom:20px;
  transition:transform .18s ease,border-color .25s ease,background .25s ease;
}
.card:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.card:active{transform:scale(.985)}

/* ---------- 缩略图 ---------- */

.thumb{
  position:relative;
  height:172px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.thumb-smash{
  background:
    radial-gradient(80% 120% at 50% 120%,#2a1014 0%,rgba(5,6,10,0) 70%),
    linear-gradient(160deg,#1a1020 0%,#0a0c14 100%);
}
.thumb-smash .w{
  position:absolute;
  font-size:38px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.thumb-smash .w1{left:16%;top:56%;transform:rotate(-18deg)}
.thumb-smash .w2{left:38%;top:24%;font-size:52px;transform:rotate(24deg)}
.thumb-smash .w3{left:62%;top:52%;transform:rotate(-8deg)}
.thumb-smash .w4{left:80%;top:22%;font-size:30px;transform:rotate(16deg)}
.thumb-smash .poke{
  position:absolute;left:50%;top:52%;
  width:96px;height:96px;margin:-48px 0 0 -48px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#ffd9a0 0%,#f0a24a 55%,#8a4a12 100%);
  box-shadow:0 0 40px rgba(255,150,60,.3),inset 0 -8px 18px rgba(0,0,0,.35);
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:translateY(0) scale(1,1)}
  45%{transform:translateY(4px) scale(1.06,.94)}
  70%{transform:translateY(-3px) scale(.97,1.03)}
}

.thumb-lab{
  background:linear-gradient(160deg,#06131c 0%,#0a0d16 100%);
}
.thumb-lab .blob{
  position:absolute;border-radius:50%;filter:blur(2px);
  mix-blend-mode:screen;
}
.thumb-lab .b1{
  width:120px;height:120px;left:8%;top:34%;
  background:radial-gradient(circle at 40% 40%,#22d3ee 0%,rgba(34,211,238,0) 70%);
  animation:drift1 7s ease-in-out infinite;
}
.thumb-lab .b2{
  width:150px;height:150px;left:40%;top:8%;
  background:radial-gradient(circle at 50% 50%,#a855f7 0%,rgba(168,85,247,0) 70%);
  animation:drift2 9s ease-in-out infinite;
}
.thumb-lab .b3{
  width:110px;height:110px;left:66%;top:44%;
  background:radial-gradient(circle at 50% 50%,#f472b6 0%,rgba(244,114,182,0) 70%);
  animation:drift1 8s ease-in-out infinite reverse;
}
@keyframes drift1{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(22px,-16px)}
}
@keyframes drift2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-26px,14px) scale(1.12)}
}
.thumb-lab .grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(120,200,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,200,255,.07) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
}

.thumb-guide{
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:0 28px;
  background:linear-gradient(160deg,#0c121c 0%,#080a12 100%);
  font-family:var(--mono);
}
.thumb-guide .ln{
  font-size:13.5px;color:#5d6b7e;white-space:nowrap;overflow:hidden;
  letter-spacing:.01em;
}
.thumb-guide .indent{padding-left:22px}
.thumb-guide i{font-style:normal;color:#57c8f0}
.thumb-guide .ln:nth-child(2) i{color:#c4a7f5}
.thumb-guide .ln:nth-child(3) i{color:#7ee787}

/* ---------- 卡片正文 ---------- */
.card .body{padding:22px 24px 24px}

.tag{
  display:inline-block;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--dim);
  border:1px solid var(--line);
  padding:3px 9px;border-radius:100px;
  margin-bottom:12px;
}

.card h2{font-size:21px;font-weight:500;letter-spacing:-.01em}

.card p{
  margin-top:9px;
  font-size:13.5px;line-height:1.72;color:var(--dim);
}

.go{
  margin-top:16px;
  font-size:13px;color:#22d3ee;
  display:flex;align-items:center;gap:6px;
}
.go span{transition:transform .2s ease}
.card:hover .go span{transform:translateX(4px)}

footer{
  margin-top:30px;
  text-align:center;
  font-size:11.5px;color:var(--faint);
  letter-spacing:.03em;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
}