/* 在保留的模版8框架上增加本站阅读页与可读性细节。 */
:root { --ink:#15243e; --muted:#52617a; --accent:#4f46e5; }
html { scroll-padding-top:110px; }
a { text-underline-offset:4px; }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible { outline:3px solid #14b8a6;outline-offset:5px; }
.skip-link { position:fixed;left:20px;top:-100px;z-index:300;background:#fff;padding:12px 20px;border-radius:10px;color:#4338ca; }
.skip-link:focus { top:15px; }
.card h3 a,.extra-card h3 a,.drama-item h4 a { color:inherit;text-decoration:none; }
.card h3 a:hover,.extra-card h3 a:hover,.drama-item h4 a:hover { color:var(--accent);text-decoration:underline; }
.source-links { display:flex;gap:12px 22px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:.88rem; }
.source-links a { color:#4338ca; }
.logo img { width:48px;height:44px;object-fit:contain; }
.nav { gap:20px; }
.hero-badge { letter-spacing:.035em; }
.hero-image img,.card-img,.community-images img,.timeline-right img { object-fit:contain;background:#eef0ff; }
.drama-item .info h4 { white-space:normal; }
.breadcrumb { color:var(--muted);font-size:.9rem;margin:24px 0;display:flex;gap:9px;flex-wrap:wrap; }
.breadcrumb a { color:#4338ca;text-decoration:none; }
.article-hero { background:linear-gradient(125deg,#eef2ff,#faf6ff);border:1px solid #e0e7ff;border-radius:28px;padding:42px;display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center; }
.article-hero h1 { font-size:2.5rem;line-height:1.35;margin:20px 0; }
.article-hero img { width:100%;height:auto;border-radius:20px; }
.article-summary { color:#334155;font-size:1.06rem;line-height:1.95; }
.editor-note { color:#64748b;font-size:.85rem;margin-top:18px; }
.article-layout { display:grid;grid-template-columns:245px minmax(0,1fr);gap:40px;padding:42px 0 72px; }
.article-toc { align-self:start;position:sticky;top:110px;background:#fff;padding:24px;border:1px solid #e2e8f0;border-radius:18px;line-height:1.8;font-size:.92rem; }
.article-toc ol { padding-left:20px;margin:15px 0; }
.article-toc li { margin:12px 0; }
.article-toc a { color:#4338ca; }
.article-body { min-width:0;max-width:860px; }
.article-body h2 { font-size:1.55rem;line-height:1.5;margin-bottom:20px; }
.article-body p,.article-body li { font-size:1.02rem;line-height:1.95;color:#334155; }
.article-body p { margin:15px 0; }
.article-body ul { padding-left:24px; }
.article-body li { margin:9px 0; }
.reading-section { margin-top:36px;background:#fff;padding:30px;border:1px solid #e2e8f0;border-radius:20px; }
.takeaways { background:#eef2ff;border-left:4px solid #6366f1;padding:26px 30px;border-radius:0 20px 20px 0; }
.table-scroll { overflow-x:auto;margin:24px 0;border-radius:12px;border:1px solid #e2e8f0; }
table { width:100%;border-collapse:collapse;min-width:520px;font-size:.94rem; }
th,td { padding:14px;text-align:left;vertical-align:top;border-bottom:1px solid #e2e8f0;line-height:1.7; }
th { background:#eef2ff;color:#312e81; }
pre { padding:24px;background:#182440;color:#e0e7ff;border-radius:12px;overflow-x:auto;line-height:1.8;font-size:.9rem; }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.references a { color:#4338ca;overflow-wrap:anywhere; }
.related-guides { margin-top:40px;display:flex;flex-direction:column;gap:16px; }
.related-guides a { padding:20px 24px;background:#fff;border:1px solid #c7d2fe;border-radius:14px;color:#4338ca;text-decoration:none; }
@media(max-width:1100px) and (min-width:769px) { .header-inner{align-items:flex-start;gap:18px}.nav{gap:10px 16px;justify-content:flex-end}.logo{flex-shrink:0}.logo span{font-size:1.2rem}.nav a{font-size:.85rem} }
@media(max-width:768px) { html{scroll-padding-top:90px}.article-hero{grid-template-columns:1fr;padding:24px;gap:24px}.article-hero h1{font-size:1.9rem}.article-hero img{max-height:230px;object-fit:contain}.article-layout{grid-template-columns:1fr;gap:22px;padding-top:24px}.article-toc{position:static}.article-body p,.article-body li{font-size:1rem}.reading-section{padding:22px}.takeaways{padding:22px}.source-links{flex-direction:column}.drama-item .info h4{font-size:.95rem}.drama-item .info span{font-size:.8rem}.logo span{font-size:1.12rem}.hero-image img{object-fit:contain}.article-shell{padding:0 16px} }