:root { color-scheme: light dark; }
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
  color: #1c1c1e;
  background: #f5f7fb;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 44px 22px 88px; }

header.site { display: flex; align-items: center; gap: 14px; }
header.site .logo { flex: 0 0 auto; }
header.site h1 { font-size: 22px; margin: 0; font-weight: 700; letter-spacing: .2px; }
header.site .sub { color: #6b7280; font-size: 13px; margin-top: 2px; }

.card {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 18px;
  padding: 30px 28px;
  margin-top: 22px;
  box-shadow: 0 6px 24px rgba(15, 40, 90, .05);
}

h2 { font-size: 23px; margin: 0 0 4px; }
.meta { color: #6b7280; font-size: 13px; margin-bottom: 18px; }
h3 { font-size: 16px; margin: 28px 0 8px; }
p, li { font-size: 15px; color: #33373f; }
ul { padding-left: 20px; }
li { margin: 4px 0; }
strong { color: inherit; }

a { color: #1f63eb; text-decoration: none; }
a:hover { text-decoration: underline; }

.note {
  background: #eef4ff;
  border: 1px solid #d6e4ff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: #274690;
  margin-top: 18px;
}

.links { display: grid; gap: 14px; margin-top: 26px; }
.linkcard {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #e6e8ee; border-radius: 16px;
  padding: 18px 20px; box-shadow: 0 6px 24px rgba(15, 40, 90, .05);
}
.linkcard:hover { border-color: #c7d6f5; text-decoration: none; }
.linkcard .t { display: block; font-size: 16px; font-weight: 600; color: #1c1c1e; }
.linkcard .d { display: block; font-size: 13px; color: #6b7280; margin-top: 3px; }
.linkcard .arrow { color: #1f63eb; font-size: 18px; }

hr { border: none; border-top: 1px solid #eceef3; margin: 24px 0; }

footer { margin-top: 30px; color: #8a909a; font-size: 13px; text-align: center; }
footer a { color: #8a909a; }

@media (prefers-color-scheme: dark) {
  body { background: #0f1115; color: #e6e8ee; }
  .card, .linkcard { background: #171a21; border-color: #272b33; box-shadow: none; }
  .linkcard:hover { border-color: #33405a; }
  .linkcard .t { color: #e6e8ee; }
  p, li { color: #c4c8d0; }
  header.site .sub, .meta, .linkcard .d, footer { color: #8a909a; }
  .note { background: #13233f; border-color: #22406e; color: #bcd2ff; }
  hr { border-top-color: #272b33; }
}