.library-nav{
  position:sticky;
  top:0;
  z-index:60;
  height:48px;
  color:#f7f0e3;
  background:#203e45;
  border-bottom:1px solid rgba(255,255,255,.18);
  font-family:"Noto Sans CJK SC","Noto Sans CJK TC","Noto Sans CJK JP","Noto Sans CJK KR","Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.library-nav-inner{
  height:48px;
  width:min(1480px,100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 18px;
}
.library-wordmark{
  color:#fff7e9;
  text-decoration:none;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.18em;
}
.library-links{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  white-space:nowrap;
}
.library-links::-webkit-scrollbar{display:none}
.library-links a{
  color:#e9dfce;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:999px;
  padding:7px 10px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
}
.library-links a:hover,.library-links a:focus-visible{
  color:white;
  border-color:rgba(255,255,255,.34);
  outline:none;
}
.library-links a[aria-current="page"]{
  color:#fff;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.16);
}
@media(max-width:620px){
  .library-nav-inner{padding:0 10px;gap:8px}
  .library-wordmark{font-size:.65rem}
  .library-links a{font-size:.66rem;padding:7px 8px}
}
@media print{.library-nav{display:none!important}}

:root{
  --bg:#f2eee5;--paper:#fcfaf5;--ink:#242119;--muted:#736d62;
  --rule:#d5cbbb;--accent:#70412d;--soft:#eadfd5;
  --shadow:0 18px 50px rgba(40,32,20,.10);
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif
}
[data-theme="dark"]{
  --bg:#151613;--paper:#1d1e1a;--ink:#eee9df;--muted:#aaa397;
  --rule:#3d3c36;--accent:#d19a79;--soft:#33271f;
  --shadow:0 18px 50px rgba(0,0,0,.28)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);line-height:1.75}
.progress{position:fixed;left:0;top:48px;height:3px;background:var(--accent);width:0;z-index:99}
.reader-header{
  position:sticky;top:48px;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)
}
.topbar{
  max-width:1180px;margin:auto;padding:12px 24px;
  display:flex;gap:18px;align-items:center;justify-content:space-between
}
.brand{font:700 .76rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
select,button{
  font:600 .82rem/1 var(--sans);border:1px solid var(--rule);color:var(--ink);
  background:var(--paper);border-radius:999px;padding:10px 14px
}
button{cursor:pointer}
.hero{max-width:1040px;margin:auto;padding:66px 24px 36px}
.kicker{font:700 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.hero h1{font-size:clamp(2.5rem,5vw,5.2rem);line-height:.98;margin:0 0 18px;font-weight:600}
.dek{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--muted);max-width:720px}
.meta{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule);display:flex;gap:18px;flex-wrap:wrap;font:500 .8rem/1.35 var(--sans);color:var(--muted)}
main{max-width:1180px;margin:auto;padding:0 24px 72px;display:grid;grid-template-columns:1fr;gap:22px}
main.compare{grid-template-columns:1fr 1fr}
.panel{background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow);border-radius:18px;padding:clamp(28px,5vw,64px)}
.panel-head{padding-bottom:14px;margin-bottom:34px;border-bottom:1px solid var(--rule)}
.panel-title{font:700 .8rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.article{font-size:1.07rem}.article p{margin:0 0 1.15em}
.article p:first-of-type::first-letter{float:left;font-size:4.6rem;line-height:.77;padding:.08em .1em 0 0;color:var(--accent)}
.article h2{font-size:1.55rem;margin:2.4em 0 .7em}
.article code{font:600 .88em/1.2 var(--sans);background:var(--soft);padding:.1em .3em;border-radius:.25em}
[lang="ja"] .article,[lang="ko"] .article,[lang="zh-Hans"] .article,[lang="zh-Hant"] .article{
  font-family:"Yu Mincho","YuMyungjo","Songti SC","Songti TC",serif;line-height:1.9
}
.next-work{
  max-width:1040px;margin:0 auto 48px;padding:0 24px;
  display:flex;justify-content:flex-end
}
.next-work a{
  font:700 .82rem/1.2 var(--sans);text-decoration:none;color:var(--accent);
  border:1px solid var(--rule);border-radius:999px;padding:11px 15px;background:var(--paper)
}
.note{max-width:1040px;margin:0 auto 48px;padding:0 24px;color:var(--muted);font:500 .83rem/1.55 var(--sans)}
footer{border-top:1px solid var(--rule);padding:28px 24px 42px;color:var(--muted);font:500 .8rem/1.5 var(--sans);text-align:center}
.hidden{display:none!important}
@media(max-width:840px){
  .topbar{align-items:flex-start}.controls{justify-content:flex-end}main.compare{grid-template-columns:1fr}
  .hero{padding-top:44px}.panel{border-radius:12px}
}
@media print{
  .library-nav,.reader-header,.progress,.note,.next-work,footer{display:none!important}
  body{background:white;color:black}.hero{padding:20px 0}
  main,main.compare{display:block;padding:0}.panel{box-shadow:none;border:none;padding:0}.compare-secondary{display:none}
}