/* ============================================
   Echo note 阅览室 — 极简 Spotify 风格
   - 无侧栏
   - 顶部 "Echo note 阅览室"
   - 多个区块（每块有标题 + 2 列长方形卡片）
   - 底部播放栏
   ============================================ */
:root{
  --bg:#000;
  --text:#fff;
  --text-mute:#b3b3b3;
  --accent:#FFC93C;
  --line:rgba(255,255,255,.08);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --player-h: 80px;        /* 包含独立进度条的总高 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:'Inter','Noto Sans SC',-apple-system,'PingFang SC',sans-serif;
  font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;background:transparent;border:0;color:inherit;cursor:pointer;padding:0}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
svg{fill:currentColor}

/* Page = scrollable, accounts for bottom player */
.page{
  max-width:1280px;
  margin:0 auto;
  padding: calc(28px + var(--safe-top)) 22px calc(100px + var(--safe-bottom));
  min-height:100dvh;
}

/* —— 顶部标题（站点名 + Logo） —— */
.head{
  margin: 8px 4px 28px;
  display:flex;align-items:center;gap:12px;
}
.head-logo{
  width:44px;height:44px;
  border-radius:6px;
  object-fit:cover;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  flex-shrink:0;
  background:#1a1a1a;
}
.title{
  margin:0;font-weight:800;font-size: 28px;letter-spacing:-.3px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.title .muted{color:var(--text-mute);font-weight:600}

/* —— 区块（每块=一个分组） —— */
.section{
  margin: 36px 0 0;
}
.section + .section{margin-top: 44px}
.section-head{
  margin: 0 4px 14px;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.section-head h2{
  margin:0;font-weight:800;font-size:24px;letter-spacing:-.3px;
}
.section-head .sub{color:var(--text-mute);font-size:13px;font-weight:500}

/* —— 网格：每行 2 张横长方形卡片 —— */
.grid-2{
  display:grid;gap:22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* —— 卡片：纯色填充 + 横长方形(2:1) + 右下"Album"封套 —— */
.card{
  position:relative;
  border-radius:2px;                       /* 更尖、像实体专辑封套 */
  overflow:hidden;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  aspect-ratio: 22 / 10;                    /* 稍窄一点的横长方形 */
  background: var(--c, #333);
  display:flex;align-items:flex-start;
  isolation:isolate;
}
.card:hover{transform: translateY(-2px); filter:brightness(1.07); box-shadow: 0 14px 28px rgba(0,0,0,.45)}
.card:active{transform: scale(.99)}
.card .label{
  padding: 24px 24px;
  font-weight:800;font-size:36px;letter-spacing:-.6px;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25);
  line-height:1.05;max-width: 78%;
}
/* 右下角倾斜"专辑封面"装饰 — 一张旋转的小黑盒 */
.album-deco{
  position:absolute;right:-12px;bottom:-26px;
  width: 80px;height:108px;
  background:linear-gradient(135deg,#1f1f1f,#0a0a0a);
  border-radius:3px;
  box-shadow: 0 14px 28px rgba(0,0,0,.5);
  transform: rotate(22deg);
  overflow:hidden;
}
.album-deco::before{
  content:'';position:absolute;left:7px;top:7px;
  width:42px;height:42px;border-radius:2px;
  background:linear-gradient(135deg,#2c2c2c,#0e0e0e);
}

/* —— 文章列表（独立"页面"，从右侧滑入） —— */
.tracks{
  padding-top: 8px;
  animation: tracks-in .28s cubic-bezier(.2,.8,.2,1);
}
.tracks.hidden{ display:none; }
#sections.hidden{ display:none; }
@keyframes tracks-in{
  from{opacity:0;transform: translateX(20px)}
  to{opacity:1;transform: translateX(0)}
}
.tracks-head{
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.tracks-head h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.3px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.tracks-title-main{font-size:24px;font-weight:800;letter-spacing:-.3px;line-height:1.2;color:#fff}
.tracks-count{font-size:12px;font-weight:600;color:var(--text-mute);letter-spacing:.2px}
.back{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;
  flex-shrink:0;
}
.back:hover{background:rgba(255,255,255,.08)}
.back svg{width:22px;height:22px}
.track-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:4px;
}
.play-all{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 4px 16px;
}
.play-all-btn{
  width:42px;height:42px;border-radius:50%;
  background:var(--accent);color:#000;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0;
  transition: filter .15s, transform .1s;
  box-shadow:0 6px 16px rgba(255,201,60,.40);
}
.play-all-btn::before{
  content:'';
  width:0;height:0;
  border-left:14px solid #000;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  margin-left:3px;
}
.play-all-btn:hover{filter:brightness(1.08)}
.play-all-btn:active{transform:scale(.94)}
.play-all-label{
  font-size:14px;font-weight:700;color:#fff;letter-spacing:.2px;
}
.track-row{
  display:grid;
  grid-template-columns: 46px 1fr auto auto;
  align-items:center;
  column-gap:14px;
  padding:8px 10px;border-radius:6px;
  color:var(--text-mute);cursor:pointer;
}
.track-row:hover{background:rgba(255,255,255,.05);color:#fff}
.track-row.playing{color:var(--accent)}
/* 未加载好:整行偏暗,提示"还没准备好" */
.track-row.is-loading{opacity:.4;pointer-events:auto}
.track-row.is-loading:hover{opacity:.7}     /* 悬停时稍微亮一点,提示可点 */
.track-row .thumb{
  width:46px;height:46px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:11px;
  flex-shrink:0;
}
.track-row .name{min-width:0}
.track-row .name .t{
  font-weight:600;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:15px;
}
.track-row .name .a{
  font-size:12px;color:var(--text-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.track-row .duration{
  font-size:12px;color:var(--text-mute);
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
  white-space:nowrap;
  min-width:42px;text-align:right;
  flex-shrink:0;
}
.track-row .play{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;
  flex-shrink:0;
  opacity:0;
  transition: opacity .15s, background .15s, color .15s, transform .1s;
}
.track-row:hover .play{opacity:1;color:var(--accent)}
.track-row .play:hover{background:rgba(255,201,60,.18)}
.track-row .play:active{transform:scale(.94)}
.track-row .play svg{width:18px;height:18px}

/* —— 底部播放栏(单浮卡:信息行 + 进度条一体) —— */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  pointer-events:none;
  padding: 0 18px calc(10px + var(--safe-bottom));
  transition: padding .2s ease;
}
.player.hidden{ display:none; }
.player-inner{
  pointer-events:auto;
  max-width:760px;margin:0 auto;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  column-gap:14px;
  padding:12px 18px;                     /* 上下对称 — 封面上/下空间一致 */
  background:rgba(var(--player-bg-rgb, 20,20,20), .72);   /* 半透明,显示磨砂后内容 */
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.08);                 /* 微细描边,玻璃感 */
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
  transition: background .5s ease;
}
/* 信息行 3 个元素都在第 2 行 */
.np-cover{grid-row:2}
.np-meta{grid-row:2}
.np-controls{grid-row:2}

/* 进度条:第 1 行(顶部),跨整行,上溢彻底贴卡顶 */
.np-progress{
  grid-column:1 / -1;
  grid-row:1;
  margin: -18px 0 6px;                    /* 上 -18px 吃掉 1px border + 圆角缝 */
  height:6px;
  background:rgba(255,255,255,.18);
  position:relative;
  cursor:pointer;
  overflow:visible;                       /* 数字在下方,允许溢出 */
  z-index:2;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  touch-action: none;                     /* 禁用浏览器默认触摸手势 */
}
/* 透明命中区:加高到 28px,让手指更容易点中 */
.np-progress::before{
  content:'';
  position:absolute;
  left:0;right:0;
  top:50%;
  height:28px;
  transform:translateY(-50%);
  /* 透明,只是占位让点击/触摸更容易命中 */
}
.np-progress .filled{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:#fff;
  transition: width .12s linear;
  z-index:1;
}
/* 时间数字:浮在进度条正下方,贴在卡内 padding 边缘 */
.np-progress .time{
  position:absolute;
  top:100%;
  font-size:10px;
  color:var(--text-mute);
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
  padding-top:3px;
  pointer-events:none;
  user-select:none;
}
.np-progress .time-l{ left:0; }
.np-progress .time-r{ right:0; }
.np-cover{
  width:52px;height:52px;border-radius:6px;
  background:linear-gradient(135deg,#FFE066,#0a0a0a);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:12px;
  flex-shrink:0;
  text-align:center;
  box-shadow:0 6px 14px rgba(0,0,0,.5);
  transform-origin: center;
  will-change: transform, box-shadow;
}
/* 播放时封面呼吸:缩放 + 阴影光晕脉动,3s 一周期 */
.player.playing .np-cover{
  animation: np-breathe 3s ease-in-out infinite;
}
@keyframes np-breathe{
  0%,100%{
    transform: scale(1);
    box-shadow: 0 6px 14px rgba(0,0,0,.5);
  }
  50%{
    transform: scale(1.13);                 /* 52 → ~59px,可见 */
    box-shadow: 0 12px 28px rgba(0,0,0,.65), 0 0 22px rgba(255,255,255,.10);
  }
}
/* 暂停/未播时移除动画(避免残留 scale) */
.player:not(.playing) .np-cover{
  animation: none !important;
  transform: scale(1) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.5) !important;
}
.np-meta{min-width:0;line-height:1.3;overflow:hidden}
.np-title{
  font-weight:700;font-size:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#fff;
}
.np-sub{
  display:flex;align-items:center;gap:6px;margin-top:3px;
  min-width:0;overflow:hidden;
}
.np-author{
  font-size:13px;color:var(--text-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex-shrink:1;min-width:0;
}
.np-tag{
  display:inline-flex;align-items:center;
  padding:1px 5px;                        /* 内边距再缩,做更窄 */
  border-radius:4px;
  background:var(--tag-c, #FFC93C);
  font-size:10px;font-weight:700;color:#fff;
  letter-spacing:.05px;
  white-space:nowrap;flex-shrink:0;
  line-height:1.4;
  transform:translateY(-1px);             /* 视觉对齐基线,不让标签字显得比作者低 */
}
.np-tag.hidden{display:none}
.np-tag-dot{display:none}
.np-controls{
  display:flex;align-items:center;gap:8px;justify-self:end;
}
.np-controls .ctrl{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;
}
.np-controls .ctrl:hover{background:rgba(255,255,255,.10)}
.np-controls .ctrl svg{width:16px;height:16px}
.np-speed{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:28px;padding:0 6px;
  border-radius:14px;
  font-size:12px;font-weight:700;letter-spacing:.3px;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;user-select:none;
  font-variant-numeric:tabular-nums;
  transition: background .15s, color .15s, transform .1s;
}
.np-speed:hover{background:rgba(255,255,255,.14);color:#fff}
.np-speed:active{transform:scale(.94)}
.np-speed.is-fast{color:var(--accent);background:rgba(255,201,60,.16);border-color:rgba(255,201,60,.45)}
.np-speed.is-slow{color:#ffb74d;background:rgba(255,183,77,.10);border-color:rgba(255,183,77,.35)}
.np-controls .play{
  width:40px;height:40px;color:#fff;
  background:transparent;
}
.np-controls .play:hover{background:rgba(255,255,255,.10);transform:none}
.np-controls .play svg{width:18px;height:18px;margin-left:2px;fill:#fff}

/* 进度条内部元素(已重构:无时间数字、极薄、贴底) */

/* —— 响应式 —— */
@media (max-width: 720px){
  .page{padding: calc(20px + var(--safe-top)) 16px calc(96px + var(--safe-bottom))}
  .title{font-size:22px}
  .section-head h2{font-size:20px}
  /* 手机屏保持两列卡片 */
  .grid-2{grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px}
  .card{aspect-ratio: 18 / 10; border-radius:2px}
  .card .label{font-size:17px;padding:12px;letter-spacing:-.3px;line-height:1.15;max-width:85%}
  .album-deco{width:36px;height:48px;right:-4px;bottom:-10px;border-radius:2px}
  .album-deco::before{width:18px;height:18px;left:3px;top:3px}

  /* 移动端播放栏:简化,信息行 + 独立进度条 */
  .player{padding:0 8px calc(8px + var(--safe-bottom))}
  .player-inner{
    grid-template-columns: auto 1fr auto;
    gap:12px;
    padding:10px 14px;
    min-height:60px;
    border-radius:10px;
  }
  .np-cover{width:44px;height:44px}
  .np-title{font-size:15px}
  .np-author{font-size:13px}
  .np-tag{font-size:11px;padding:2px 8px 2px 6px}
  .np-tag-dot{width:7px;height:7px}
  .np-controls{gap:6px}
  .np-controls .ctrl{width:32px;height:32px}
  .np-speed{min-width:32px;height:26px;font-size:11px;padding:0 5px}
  .np-controls .play{width:38px;height:38px}
  /* 移动端进度条:贴卡顶,数字在下方,加高到 8px 更明显 */
  .np-progress{margin:-16px 0 4px; height:8px}
  .np-progress::before{height:32px}        /* 移动端命中区再大一点 */
}

/* ============================================
   文章详情"专辑页"(article panel)
   - Hero 整片彩色块(高度自适应内容,可长方形)
   - 内含:标签 + 标题 + 作者 + 关乎 + 作者介绍 + 播放按钮
   - 播放按钮大圆形 + 呼吸光晕
   ============================================ */
.article{
  animation: article-in .42s cubic-bezier(.2,.8,.2,1);
}
.article.hidden{ display:none; }
@keyframes article-in{
  from{opacity:0;transform: translateY(14px)}
  to{opacity:1;transform: translateY(0)}
}
.article-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
}
.article-head h2{
  margin:0;font-size:14px;font-weight:600;color:var(--text-mute);
  letter-spacing:.2px;
  flex:1;
  min-width:0;
}

/* —— Hero 区:整片彩色,圆角 20,自带阴影 —— */
.article-hero{
  position:relative;
  border-radius:20px;
  padding:28px 26px 26px;
  margin-bottom:22px;
  color:#fff;
  overflow:hidden;          /* 防止播放按钮光晕溢出 */
  isolation:isolate;        /* 让 ::before 阴影层级独立 */
  /* 背景色由 JS 直接设置 inline style(卡片主色) */
  box-shadow:0 18px 40px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.25);
  /* Hero 区暗角渐变:让底部播放按钮更突出 */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.18) 100%);
  background-blend-mode: overlay;
}
/* 在背景色之上叠一层细微光晕(从右上到左下),让色块不呆板 */
.article-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.18) 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(0,0,0,.22) 0%, transparent 50%);
  pointer-events:none;
  z-index:0;
}
/* 所有 Hero 内部元素都浮在光晕之上 */
.article-hero > *{position:relative; z-index:1}

/* —— 标签行(在标题上方,小而精致) —— */
.hero-tag-row{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 14px;
}
.hero-tag-row:empty{display:none}     /* 没有标签就不占位 */

/* 标签 pill(在彩色背景上,用半透明白 + 微亮边) */
.article-tag{
  display:inline-flex;align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;font-weight:600;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.article-tag.kind-specials{
  color:#FFE066;border-color:rgba(255,224,102,.55);
  background:rgba(255,201,60,.20);
}
.article-tag.kind-motif{
  color:#a8d8ff;border-color:rgba(168,216,255,.55);
  background:rgba(127,200,255,.20);
}
.article-tag.kind-topic{
  color:#ffc88a;border-color:rgba(255,200,138,.55);
  background:rgba(255,183,77,.20);
}
.article-tag.kind-card{
  color:#fff;border-color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.18);
}

/* —— 标题:最大字号,Hero 的主角 —— */
.article-title{
  margin:0 0 12px;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.6px;
  line-height:1.25;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* —— 作者:小一号、灰色字 —— */
.article-meta{
  margin:0 0 18px;
  font-size:13px;
  color:rgba(255,255,255,.78);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  line-height:1.5;
}
.meta-author{font-weight:500}

/* —— 关乎:介绍段落,行间距舒服 —— */
.hero-concerning{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.75;
  color:rgba(255,255,255,.92);
  font-weight:400;
}

/* —— 关于作者:更小一号,带细分隔 —— */
.hero-author-bio{
  margin:0;
  font-size:13px;
  line-height:1.65;
  color:rgba(255,255,255,.72);
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.14);
  font-weight:400;
}
.hero-author-bio:empty{display:none}

/* —— 播放按钮:右下浮起的大圆 + 呼吸光晕 —— */
.article-play{
  position:absolute;
  right:22px;bottom:22px;
  width:64px;height:64px;
  background:var(--accent);
  color:#000;
  border-radius:50%;
  border:none;
  cursor:pointer;
  padding:0;
  outline:none;
  display:inline-flex;align-items:center;justify-content:center;
  /* 阴影 + 黄色外发光 */
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    0 0 0 0 rgba(255,201,60,.55);
  transition:
    transform .2s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease,
    filter .15s;
  z-index:2;
  overflow:visible;
  /* 默认显示 ▶,暂停时隐藏,播时显示 ❚❚ */
}
.article-play .icon-play,
.article-play .icon-pause{
  width:26px;height:26px;
  fill:#000;
  transition: opacity .18s, transform .18s;
}
.article-play .icon-play{display:block}
.article-play .icon-pause{display:none}
.article-play .play-ripple{
  display:none;
  width:24px;height:24px;
  border:2px solid rgba(0,0,0,.28);
  border-top-color:#000;
  border-radius:50%;
  animation: article-loading-spin .8s linear infinite;
}
.article-play.is-buffering .icon-play,
.article-play.is-buffering .icon-pause{display:none}
.article-play.is-buffering .play-ripple{display:block}
.article-play.is-buffering::after{content:""}
@keyframes article-loading-spin{to{transform:rotate(360deg)}}
.loading-icon{animation:article-loading-spin .8s linear infinite;fill:none}
/* 列表按钮加载态：转圈替代普通播放图标 */
.track-row .play.is-buffering{
  opacity:1;color:#000;
  background:rgba(255,201,60,.16);
}
.track-row .play.is-buffering .loading-icon{width:18px;height:18px}
/* 详情大面板按钮加载态 */
.player.in-detail-spotify .np-controls-full .play.is-buffering{
  background:rgba(255,201,60,.78);
}
.player.in-detail-spotify .np-controls-full .play.is-buffering .loading-icon{
  width:22px;height:22px;
}
/* 正在播放时:切到暂停图标 + 呼吸光晕 + 轻微缩放 */
.article-play.is-playing .icon-play{display:none}
.article-play.is-playing .icon-pause{display:block}
.article-play.is-playing{
  animation: article-play-pulse 2.2s ease-in-out infinite;
}
@keyframes article-play-pulse{
  0%,100%{
    box-shadow:
      0 10px 24px rgba(0,0,0,.35),
      0 0 0 0 rgba(255,201,60,.55);
    transform: scale(1);
  }
  50%{
    box-shadow:
      0 14px 32px rgba(0,0,0,.45),
      0 0 0 14px rgba(255,201,60,.0);
    transform: scale(1.06);
  }
}
/* 当前歌曲但暂停中:轻微高亮 */
.article-play.is-current:not(.is-playing){
  filter:brightness(1.10);
}
.article-play:hover{filter:brightness(1.12)}
.article-play:active{transform:scale(.94)}

/* —— Hero 区下方的折叠区 —— */
.article-body{
  display:flex;flex-direction:column;gap:4px;
}
.article-section{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:14px 0;
}
.article-section:first-of-type{padding-top:0}
.article-section summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:700;letter-spacing:.4px;
  color:var(--accent);text-transform:uppercase;
  user-select:none;
  padding:6px 0;
}
.article-section summary::-webkit-details-marker{display:none}
.article-section summary::after{
  content:'';
  width:10px;height:10px;
  border-right:2px solid rgba(255,255,255,.5);
  border-bottom:2px solid rgba(255,255,255,.5);
  transform:rotate(45deg) translate(-2px,-2px);
  transition: transform .2s;
}
.article-section[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.article-section summary:hover{color:#fff}
.article-section[open] summary{color:#fff;margin-bottom:10px}
.article-section p,
.article-section div{
  font-size:15px;line-height:1.75;color:rgba(255,255,255,.88);
  margin:0;
}
.article-section ol{
  margin:0;padding-left:22px;
  font-size:15px;line-height:1.75;color:rgba(255,255,255,.88);
}
.article-section ol li{margin-bottom:8px}
.article-section ol li:last-child{margin-bottom:0}

@media (max-width:720px){
  .article-hero{
    padding:22px 20px 22px;
    border-radius:18px;
    margin-bottom:18px;
  }
  .article-title{
    font-size:22px;
    line-height:1.3;
    margin-bottom:10px;
  }
  .article-meta{margin-bottom:14px;font-size:12px}
  .hero-concerning{font-size:14px;line-height:1.7;margin-bottom:12px}
  .hero-author-bio{font-size:12px;padding-top:10px}
  .article-play{
    width:54px;height:54px;
    right:18px;bottom:18px;
  }
  .article-play .icon-play,
  .article-play .icon-pause{
    width:22px;height:22px;
  }
  .article-section p,
  .article-section div,
  .article-section ol{font-size:14px}
}

/* ============================================
   ★ 播放按钮通用交互样式（播放/暂停切换 + 动画）
   ============================================ */

/* 列表行 + 播放全部按钮 播放时：轻轻光晕脉冲（文章页播放按钮走自己的 article-play-pulse）*/
.track-row .play.is-playing,
.play-all-btn.is-playing{
  background:var(--accent);
  color:#1a1a1a;
  animation: btn-playing-glow 1.8s ease-in-out infinite;
}
@keyframes btn-playing-glow{
  0%,100%{
    box-shadow: 0 0 0 0 rgba(255,201,60,0);
    transform: scale(1);
  }
  50%{
    box-shadow: 0 0 0 8px rgba(255,201,60,.18);
    transform: scale(1.04);
  }
}
/* 行级播放按钮正在播放时整行微微发光 */
.track-row.playing{
  background: rgba(255,201,60,.06);
  border-left: 3px solid var(--accent);
  padding-left: 13px;     /* 抵消 border-left 占据的空间 */
  margin-left: -3px;
}
.track-row.playing .thumb{
  animation: thumb-pulse 2.4s ease-in-out infinite;
}
@keyframes thumb-pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,201,60,.35)}
  50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(255,201,60,0)}
}

/* 详情页播放按钮:播放时节奏脉冲 */
.article-play.is-playing{
  animation: hero-btn-pulse 1.6s ease-in-out infinite;
}
@keyframes hero-btn-pulse{
  0%,100%{box-shadow:0 8px 18px rgba(255,201,60,.32), 0 0 0 0 rgba(255,201,60,0)}
  50%{box-shadow:0 10px 24px rgba(255,201,60,.46), 0 0 0 12px rgba(255,201,60,0)}
}

/* ============================================
   ★ 详情页:文字加粗(在乎 + 关于作者)
   ============================================ */
.hero-concerning{
  font-weight:600;       /* 从 400 → 600 */
  font-size:16px;        /* 从 15 → 16 */
}
/* 作者简介放在作者下面:挨得近,不需要 border-top 分隔 */
.hero-author-bio{
  font-weight:500;       /* 从 400 → 500 */
  font-size:14px;        /* 从 13 → 14 */
  border-top:none;       /* 覆盖之前的分隔线 */
  padding-top:0;
  margin-top:-4px;       /* 跟作者挨紧一点 */
  color:rgba(255,255,255,.7);
}

/* ============================================
   ★ Hero 播放按钮:从 absolute 浮起改成普通文档流
   位置:标题正下方一行,靠左,48 大圆 + 文字 "播放"
   ============================================ */
.article-play{
  position:static;       /* 覆盖之前的 absolute */
  display:inline-flex;align-items:center;gap:10px;
  width:auto;height:auto;
  margin:18px 0 4px;
  padding:10px 22px 10px 14px;     /* 左边多一点让图标居中 */
  border-radius:999px;             /* 椭圆药丸,跟 Spotify 风格一致 */
  font-size:14px;font-weight:700;color:#000;letter-spacing:.2px;
  background:var(--accent);
  box-shadow:0 6px 16px rgba(0,0,0,.30);
}
.article-play .icon-play,
.article-play .icon-pause{
  width:18px;height:18px;          /* 缩小图标,跟文字一行 */
  flex-shrink:0;
}
/* 文字:统一叫"播放",正在播的时候变"暂停"(不是音乐,不要"播放这首") */
.article-play::after{
  content:"播放";
}
.article-play.is-current.is-playing::after{
  content:"暂停";
}
/* 当前正在播放:节奏脉冲 */
.article-play.is-playing{
  animation: hero-btn-pulse 1.6s ease-in-out infinite;
}

/* ============================================
   ★ 详情页时,底部播放器的两种状态
   - .player.in-detail-spotify  → 大面板(Spotify 风,详情页歌曲 == 当前正在播放)
   - .player.in-detail-other    → 维持现状小浮条(详情页 != 当前)
   ============================================ */

/* —— 默认(小浮条):compact 控件显示,full 控件隐藏 —— */
.np-controls-full{display:none}

/* 大面板:全宽,详情页底部融入内容流 */
.player.in-detail-spotify{
  position:static;                /* 不再 fixed 浮在屏底 */
  padding:0;                       /* 去掉外边距 */
  margin:18px 0;                   /* 跟 Hero 卡片 + 关键点 留点距离 */
  pointer-events:auto;
  animation: detail-panel-in .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes detail-panel-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
/* 大面板:切换 compact/full 控件 */
.player.in-detail-spotify .np-controls-compact{display:none}
.player.in-detail-spotify .np-controls-full{display:flex}

/* 内卡:全宽,深色背景,无边框/无圆角/无阴影(用户要求"不要框") */
.player.in-detail-spotify .player-inner{
  max-width:100%;
  margin:0;
  border-radius:0;                 /* 去掉圆角 */
  background:transparent;          /* 透明背景:完全融入详情页 */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding:14px 16px 16px;
  border:none;                     /* 去掉边框 */
  box-shadow:none;
  /* 重排为纵向:进度条 / 信息行 / 控件行 */
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  row-gap:14px;
}
/* 进度条:大面板下简洁化(不要贴卡顶部圆角) */
.player.in-detail-spotify .np-progress{
  grid-column:1;grid-row:1;
  margin:0;                    /* 不要负 margin 贴卡顶 */
  border-radius:3px;           /* 普通圆角 */
}
/* 封面:大面板下隐藏(用户要求不要封面) */
.player.in-detail-spotify .np-cover{display:none}
/* 标题 + 作者:不挤左侧封面,直接铺满 + 左对齐 */
.player.in-detail-spotify .np-meta{
  grid-row:2;
  margin-left:0;
  align-self:center;
  text-align:left;          /* 左对齐 */
  min-width:0;
  overflow:visible;
}
.player.in-detail-spotify .np-title{
  font-size:16px;font-weight:700;
  text-align:left;
  /* 标题可以换行,完整显示 */
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.player.in-detail-spotify .np-sub{
  justify-content:flex-start;     /* 作者和标签左对齐 */
  text-align:left;
}
/* 控件行:主播放按钮占中间独立一列，速率按钮固定到最右侧 */
.player.in-detail-spotify .np-controls-full{
  position:relative;
  grid-column:1 / -1;
  grid-row:3;
  display:grid;
  grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);
  align-items:center;
  width:100%;
  max-width:none;
  margin:0;
  justify-self:stretch;
  align-self:center;
  place-self:stretch center;
  gap:0;
}
.player.in-detail-spotify .np-controls-full #npPrev{
  grid-column:1;
  justify-self:end;
  margin-right:20px;
}
.player.in-detail-spotify .np-controls-full #playBtnFull{
  grid-column:2;
  justify-self:center;
  align-self:center;
  transform:none;
  transform-origin:center;
}
.player.in-detail-spotify .np-controls-full #npNext{
  grid-column:3;
  justify-self:start;
  margin-left:20px;
}
.player.in-detail-spotify .np-controls-full #npSpeedFull{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
}
.player.in-detail-spotify .np-controls-full .ctrl{
  width:40px;height:40px;
}
.player.in-detail-spotify .np-controls-full .ctrl svg{
  width:20px;height:20px;
}
.player.in-detail-spotify .np-controls-full .play{
  width:54px;height:54px;
  background:var(--accent);
  color:#000;
}
.player.in-detail-spotify .np-controls-full .play:hover{
  background:var(--accent);
  filter:brightness(1.10);
}
.player.in-detail-spotify .np-controls-full .play svg{
  width:22px;height:22px;margin-left:2px;fill:#000;
}
/* 大面板里的倍速按钮:文字样式(类似小浮条) */
.player.in-detail-spotify .np-controls-full .speed{
  width:auto;                /* 宽度自适应文字 */
  min-width:40px;
  padding:0 8px;
  font-size:11px;font-weight:700;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  cursor:pointer;user-select:none;
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:.2px;
}
.player.in-detail-spotify .np-controls-full .speed:hover{
  background:rgba(255,255,255,.14);color:#fff;
}
.player.in-detail-spotify .np-controls-full .speed.is-fast{
  color:var(--accent);background:rgba(255,201,60,.16);border-color:rgba(255,201,60,.45);
}
.player.in-detail-spotify .np-controls-full .speed.is-slow{
  color:#ffb74d;background:rgba(255,183,77,.10);border-color:rgba(255,183,77,.35);
}

/* 详情页但不是当前歌:维持现状小浮条 (留个钩子以后用) */
.player.in-detail-other{
  /* 默认就是 fixed 小浮条,这里啥都不做 */
}