* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #2a2520; }

.site { background: #faf8f3; min-height: 100vh; }
.site-head { padding: 56px 24px 32px; text-align: center; }
.site-head h1 { margin: 0; font-weight: 600; font-size: 22px; letter-spacing: .08em; }
.site-head p { margin: 10px 0 0; color: #8a7f70; font-size: 13px; }

.grid { display: grid; gap: 28px; padding: 16px 24px 56px; max-width: 1180px; margin: 0 auto; }
.card { display: block; text-decoration: none; color: inherit; }
.card iframe { width: 100%; border: 1px solid #e8e0d0; border-radius: 10px; background: #fff; }
.card-title { display: block; margin-top: 10px; font-size: 13px; color: #6a5f50; text-align: center; }

.canvas-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #faf8f3; }
.canvas { border-radius: 10px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.06); }

.missing { padding: 24px; color: #b08060; font-size: 13px; }

.r-progress { padding: 32px 24px; font-family: Georgia, serif; }
.r-pages { color: #5a4a3a; font-size: 14px; margin-bottom: 18px; }
.r-bar { height: 4px; background: #e6ded0; border-radius: 2px; overflow: hidden; }
.r-bar i { display: block; height: 100%; background: #8b6f47; }
.r-pct { margin-top: 10px; font-size: 12px; color: #9a8a7a; }