:root {
  --ink:#3f4c57;
  --paper:#fcfcf3;
  --plum:#355f83;
  --green:#b6df66;
  --gold:#ffdc65;
  --shadow:#6d7c86;
}

* { box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin:0;
  color:var(--ink);
  background-color:#e8efee;
  background-image:conic-gradient(#f3f7f3 25%, transparent 0 50%, #f3f7f3 0 75%, transparent 0);
  background-size:20px 20px;
  font:16px/1.6 "Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}
a { color:inherit }
button { font:inherit; cursor:pointer }
[hidden] { display:none!important }
:focus-visible { outline:3px solid #1754a0; outline-offset:4px }
.wrap { width:min(1136px,calc(100% - 40px)); margin-inline:auto }
.bar { background:var(--gold); border-bottom:4px solid var(--ink); box-shadow:inset 0 -5px #edb64b }
.bar .wrap { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:74px }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:900; text-decoration:none }
.brand-icon { display:grid; place-items:center; width:34px; height:34px; background:var(--plum); color:#fff8da; border:3px solid var(--ink); box-shadow:3px 3px var(--ink); font-size:23px; line-height:1 }
.nav,.actions,.filters { display:flex; flex-wrap:wrap; gap:9px }
.nav a,.btn,.filter,.copy,.jump {
  display:inline-block;
  padding:7px 12px;
  border:2px solid var(--ink);
  background:#fff2ae;
  box-shadow:0 3px var(--shadow),inset 0 2px #fff9d8;
  font-weight:800;
  text-decoration:none;
}
.nav a,.filter,.copy,.jump { font-size:14px }
.nav a:hover,.btn:hover,.filter:hover,.copy:hover,.jump:hover { background:#fffbdc }
.nav a:active,.btn:active,.filter:active,.copy:active,.jump:active { transform:translateY(2px); box-shadow:0 1px var(--shadow) }
.hero,.section { border:4px solid var(--ink); box-shadow:6px 6px #a4b7bd; background:var(--paper); margin:28px 0 }
.hero { padding:10px; background:var(--plum) }
.hero-copy { padding:18px 22px 20px; background:#f9fcf7; border:3px solid var(--ink) }
.hero h1 { font-size:clamp(31px,5vw,60px); line-height:1.14; margin:4px 0 12px; font-weight:950; letter-spacing:-.045em }
.hero h1 span { color:#365e80; margin-left:.22em }
.kicker { margin:0; font-size:14px; font-weight:850; color:#42627c }
.lead { margin:0 0 14px; color:#543d39 }
.btn { background:var(--green) }
.btn.secondary { background:#ffd06b }
.art { margin:8px 0 0; border:3px solid var(--ink); background:#355f83; color:#fff8da }
.art img { display:block; width:100%; height:auto; image-rendering:pixelated }
.art figcaption { padding:5px 11px; font-size:13px }
.section { padding:0 17px 17px }
h2 {
  margin:-1px -18px 17px;
  padding:8px 17px;
  border-bottom:3px solid var(--ink);
  background:#a6d990;
  box-shadow:inset 0 -4px #71b55b;
  font-size:clamp(21px,3vw,29px);
  line-height:1.35;
}
h2::before { content:""; display:inline-block; width:11px; height:11px; margin-right:10px; background:var(--gold); border:2px solid var(--ink); vertical-align:2px }
#channels h2 { background:#afdafa; box-shadow:inset 0 -4px #7db4e0 }
#about h2 { background:#e8bdce; box-shadow:inset 0 -4px #db829c }
.filters { margin:0 0 16px }
.filter[aria-pressed=true] { background:var(--plum); color:white; box-shadow:0 3px var(--shadow) }
.entries { border:2px solid var(--ink) }
.entry { display:grid; grid-template-columns:118px minmax(0,1fr) auto; gap:13px; align-items:center; padding:12px; background:#fff9da }
.entry + .entry { border-top:2px dotted #8b7458 }
.entry:nth-child(even) { background:#f4edc0 }
.entry h3,.channel h3 { font-size:17px; margin:0 0 3px }
.entry p,.channel p { color:#59453c; margin:0 }
.tag { justify-self:start; padding:2px 7px; border:1px solid var(--ink); font-size:12px; font-weight:850; background:#ceec9a }
[data-kind=paid] .tag { background:#ffcf8a }
[data-kind=wiki] .tag { background:#b8dbf7 }
.jump { background:#fff0ac }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.channel { padding:0 12px 13px; border:2px solid var(--ink); background:#fffdf0; box-shadow:3px 3px #c5af7c }
.channel h3 { padding:7px 12px; margin:0 -12px 9px; border-bottom:2px solid var(--ink); background:var(--channel,#d3eead) }
.channel-bili { --channel:#f6b8d1 }
.channel-box { --channel:#b6daf3 }
.channel-wechat { --channel:#c4e99d }
.channel-wiki { --channel:#f4d286 }
.channel p { margin-bottom:9px }
.channel .jump,.channel .copy { margin:0 4px 5px 0 }
.copy-status { margin:7px 0 0 }
.copy-status:empty { display:none }
#about p { margin:0 }
.footer { padding:16px 0; border-top:4px solid var(--ink); background:var(--gold); font-size:14px; font-weight:750 }

@media (max-width:690px) {
  .wrap { width:calc(100% - 22px) }
  .bar .wrap { flex-wrap:wrap; padding:10px 0 14px }
  .hero,.section { margin:18px 0; box-shadow:3px 4px #a4b7bd }
  .hero { padding:6px }
  .hero-copy { padding:12px }
  .hero h1 span { display:block; margin-left:0 }
  .grid { grid-template-columns:1fr }
  .entry { grid-template-columns:1fr; gap:6px }
  .entry .jump { justify-self:start }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
}