:root { color: #142840; background: #edf4fb; font: 16px/1.75 system-ui, "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #155384; text-underline-offset: .18em; }
a:focus-visible { outline: 2px solid #0879b4; outline-offset: 3px; }
.reader-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(18px,calc((100% - 980px)/2)); background: #102942; }
.reader-top a { display: flex; align-items: center; gap: 9px; color: #fff; white-space: nowrap; text-decoration: none; }
.reader-top img { object-fit: contain; border-radius: 4px; background: #fff; }
main { max-width: 980px; margin: auto; padding: clamp(14px, 4vw, 34px); }
article { padding: clamp(16px, 5vw, 58px); background: white; border: 1px solid #cbddeb; border-radius: 16px; }
.reader-crumb { display: flex; flex-wrap: wrap; gap: 9px; color: #58728b; font-size: .87rem; }
.reader-title { margin: 24px 0; padding-bottom: 14px; border-bottom: 1px solid #d7e5f1; }
.reader-title span { font-weight: 700; color: #176088; font-size: .9rem; }
.reader-title:has(.reader-cover) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 60%);
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
}
.reader-cover {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
@media (max-width: 620px) {
  .reader-title:has(.reader-cover) { grid-template-columns: 1fr; }
  .reader-cover { aspect-ratio: 16 / 9; }
}
h1 { font-size: clamp(1.7rem, 4.8vw, 3rem); line-height: 1.22; margin: .35em 0; }
h2 { font-size: clamp(1.15rem, 2.6vw, 1.5rem); margin: 0 0 .45em; }
p { margin: .45em 0 .85em; }
.reader-section { margin-block: 25px; }
.reader-flow { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 0; }
.reader-flow li { min-width: 0; padding: 12px; border: 1px solid #b9d5e9; border-radius: 8px; background: #ebf5fc; font-weight: 650; }
.reader-flow span { display: block; color: #21618a; font-size: .85rem; }
figure { margin: 22px 0; }
figure img { display: block; width: 100%; max-height: 390px; object-fit: contain; background: #edf4fa; border-radius: 8px; }
figcaption { color: #506a83; font-size: .85rem; margin-top: 5px; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
td,th { padding: 8px; border: 1px solid #cddfec; text-align: left; vertical-align: top; }
thead { background: #e8f3fb; }
.reader-related,.reader-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.reader-actions { border-top: 1px solid #d7e5f1; margin-top: 25px; padding-top: 16px; }
.reader-actions a:last-child { font-weight: 700; }
.reader-devices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.reader-device-tile { display: grid; align-content: start; gap: 7px; padding: 10px; border: 1px solid #c8dceb; border-radius: 8px; text-decoration: none; }
.reader-device-tile:hover { border-color: #2a76aa; }
.reader-device-tile img { width: 100%; height: 112px; object-fit: contain; background: #eaf3fa; border-radius: 4px; }
.reader-device-tile span { font-size: .86rem; }
.reader-footer { padding: 0 16px 24px; text-align: center; color: #4d6681; font-size: .85rem; }
@media(max-width:600px) { .reader-devices { grid-template-columns: repeat(2,minmax(0,1fr)); } .reader-flow { grid-template-columns: 1fr; } .reader-flow span { display: inline; margin-inline-end: .5em; } }
article { overflow-wrap: anywhere; }