:root {
  --ink: #26314b;
  --muted: #69768e;
  --paper: #ffffff;
  --accent: #6657dc;
  --line: #e6eafa;
}
.locked body > :not(.login-overlay) { display: none !important; }
.login-overlay { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 410px); background: #ffffffed; border: 1px solid white; border-radius: 28px; padding: 36px; box-shadow: 0 20px 80px #61549114; }
.login-mark { display: grid; place-items: center; width: 48px; height: 48px; background: #7763de; color: white; border-radius: 16px; font-size: 24px; }
.login-card h1 { font-size: 30px; margin: 18px 0 8px; }
.login-card p, .login-card small { color: #69768e; }
.login-card label { display: block; font-size: 13px; margin-top: 24px; margin-bottom: 8px; }
.login-card input { padding: 12px 14px; width: 100%; font: inherit; }
.login-card button { width: 100%; border: 0; border-radius: 14px; padding: 14px; background: #7763de; color: white; font: inherit; margin-top: 16px; cursor: pointer; }
.login-card button:disabled { opacity: .6; cursor: wait; }
.login-card .login-message { color: #a73b3b; font-size: 13px; min-height: 20px; }
.login-card small { font-size: 11px; }
html { scroll-behavior: smooth; }
body {
  background: #f5f7ff;
  color: var(--ink);
  min-height: 100vh;
  isolation: isolate;
}
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  width: min(55vw, 650px);
  height: min(55vw, 650px);
  border-radius: 50%;
  filter: blur(70px);
  opacity: .48;
  animation: drift 14s ease-in-out infinite alternate;
}
body::before { background: #d9ceff; top: -180px; right: -100px; }
body::after { background: #bdece4; bottom: -180px; left: -180px; animation-delay: -7s; }
.wrap { max-width: 1120px; padding-top: 30px; }
.masthead { letter-spacing: .1em; }
.mark-icon { background: linear-gradient(135deg, #7763ef, #a28af8); color: white; box-shadow: 0 6px 18px #7964df30; }
.hero { position: relative; padding: 74px 0 48px; }
.hero h1, h1, h2 { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
.hero h1 { font-weight: 750; font-size: clamp(38px, 7vw, 66px); letter-spacing: -.045em; color: #303753; }
.hero .eyebrow { display: inline-block; background: #eae5ff; color: #6e58cd; border-radius: 30px; padding: 6px 13px; letter-spacing: .12em; font-size: 11px; }
.subtitle { max-width: 580px; line-height: 1.9; }
.hero::after { content: "✦"; position: absolute; right: 60px; top: 40px; font-size: 96px; color: #f2bd71; animation: drift 7s ease-in-out infinite alternate; }
.shelf { padding: 28px; background: #ffffffb8; border-color: #ffffff; box-shadow: 0 16px 60px #40478608; border-radius: 26px; }
.shelf-head h2 { font-weight: 700; font-size: 20px; }
.count { background: #eef1fc; padding: 6px 12px; border-radius: 20px; }
.search { display: block; margin-bottom: 24px; }
input { background: white; border-color: #e3e7f3; padding-top: 15px; padding-bottom: 15px; border-radius: 16px; }
input:focus { border-color: #9b8bf0; box-shadow: 0 0 0 4px #7963e914; }
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.article-card {
  position: relative;
  grid-template-columns: 1fr 24px;
  grid-template-rows: auto 1fr;
  gap: 24px 12px;
  min-height: 195px;
  padding: 24px;
  border: 1px solid #e4defb;
  border-radius: 22px;
  background: linear-gradient(135deg, #f0ebff, #faf8ff);
  box-shadow: 0 5px 20px #63549805;
  animation: arrive .65s ease both;
  transition: transform .25s, box-shadow .25s;
}
.article-card:nth-child(3n+2) { background: linear-gradient(135deg, #e0f7f1, #f3fcfa); border-color: #d3ede5; animation-delay: .08s; }
.article-card:nth-child(3n) { background: linear-gradient(135deg, #fff0da, #fffaf3); border-color: #f3e3cb; animation-delay: .16s; }
.article-card:hover { background: linear-gradient(135deg, #e9e2ff, #f9f7ff); border-color: #c9bdf2; transform: translateY(-5px); box-shadow: 0 15px 30px #63549814; }
.article-card:nth-child(3n+2):hover { background: #e1f6ef; border-color: #b6ddcf; }
.article-card:nth-child(3n):hover { background: #fff0dc; border-color: #eccc9e; }
.card-number { font: 700 12px system-ui, sans-serif; color: #7863c6; background: #ffffffae; width: fit-content; padding: 5px 11px; border-radius: 30px; }
.card-copy { grid-column: 1; grid-row: 2; gap: 10px; min-width: 0; }
.card-copy strong { font-size: 21px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.card-copy small { font-size: 13px; }
.card-arrow { grid-column: 2; grid-row: 2; align-self: end; color: #7963c3; font-size: 23px; transition: transform .25s; }
.article-card:hover .card-arrow { transform: translate(3px, -3px); }
[hidden] { display: none !important; }
a:focus-visible { outline: 3px solid #9380e9; outline-offset: 5px; }
.page { max-width: 900px; }
.back { background: white; padding: 8px 16px; border: 1px solid var(--line); border-radius: 30px; }
.paper { border-radius: 26px; border-color: white; box-shadow: 0 16px 60px #40478608; animation: arrive .6s ease both; }
.paper h1 { font-weight: 750; letter-spacing: -.02em; }
.paper > .eyebrow { color: #8876cd; }
.text-block { border-left: 3px solid #b4a4f0; padding-left: 18px; }
.media-audio { background: linear-gradient(110deg, #f0ecff, #f2f9ff); border-color: #e7e2f5; color: #7761bd; border-radius: 18px; }
.media-image img, .media-video video { background: #f0f2f8; border-radius: 18px; }
.media-image img { max-height: none; }
.footer, .foot { color: #7b88a0; }
.playback-notice { padding: 12px 16px; background: #fff4df; color: #805d2c; border-radius: 12px; font-size: 13px; }
.playback-notice a { color: #6657dc; }
.playback-error { color: #a73b3b; font-size: 13px; }
.categories { display: flex; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.category { border: 1px solid #e3e7f3; background: white; padding: 10px 20px; color: #69768e; border-radius: 30px; font: inherit; cursor: pointer; transition: background .2s, transform .2s; }
.category.active { background: #7763de; color: white; border-color: #7763de; box-shadow: 0 5px 18px #7763de26; }
.category:hover { transform: translateY(-2px); }
.category:focus-visible { outline: 3px solid #b9a9ff; outline-offset: 3px; }
.local-notice { font-size: 13px; color: #69768e; margin: 0 0 20px; }
.reading-history { margin-bottom: 24px; padding: 22px; border-radius: 22px; background: linear-gradient(110deg, #f0ecff, #edfaf5); border: 1px solid #e3e7f3; }
.reading-history h2 { margin-bottom: 14px; }
.reading-links { display: flex; gap: 12px; flex-wrap: wrap; }
.reading-links a { background: white; color: #6657b8; padding: 12px 16px; border-radius: 14px; text-decoration: none; overflow-wrap: anywhere; }
.reading-links a:hover { box-shadow: 0 5px 18px #7763de26; }
.reading-message { font-size: 13px; color: #69768e; margin: 12px 0 0; }
.reading-message:empty { display: none; }
.progress { height: 3px; background: linear-gradient(90deg, #8b6aef, #65cbb6); width: 0; position: fixed; top: 0; left: 0; z-index: 10; }
@keyframes drift { from { transform: translate(0, 0) rotate(-8deg); } to { transform: translate(20px, 20px) rotate(8deg); } }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 650px) {
  .cards { grid-template-columns: 1fr; }
  .hero { padding: 55px 0 32px; }
  .hero::after { font-size: 44px; right: 10px; top: 22px; }
  .shelf { padding: 20px 16px; }
  .article-card { min-height: 170px; padding: 22px; }
  .shelf-head { gap: 8px; }
  .count { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}