*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fff;--text:#1e293b;--muted:#64748b;--line:#e2e8f0;
  --accent:#0284c7;--accent-soft:#e0f2fe;
  --tab1:#0284c7;--tab2:#0891b2;--tab3:#0d9488;--tab4:#059669;
  --tab5:#ca8a04;--tab6:#ea580c;--tab7:#dc2626;
  --max:1120px;--radius:10px;
}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans SC",system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.75;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(var(--max),100% - 2rem);margin-inline:auto}

.site-header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:100}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--text);font-weight:500;text-decoration:none}
.brand:hover{text-decoration:none}
.brand b{color:var(--accent)}
.site-nav ul{display:flex;gap:1.25rem;list-style:none}
.site-nav a{color:var(--muted);font-size:.95rem}
.site-nav a.active,.site-nav a:hover{color:var(--accent)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.25rem}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;transition:.2s}

.ads-top-bar{background:#f8fafc;border-bottom:1px solid var(--line);padding:.75rem 0}
#applist{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.applist-title{font-size:.85rem;color:var(--muted);white-space:nowrap}
#ads{display:flex;flex-wrap:wrap;gap:.5rem}
.ads-item figure{text-align:center;margin:0}
.ads-item img{border-radius:8px}
.ads-item .caption{font-size:.7rem;color:var(--muted);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.hero-bookmark{padding:2.5rem 0 1.5rem}
.hero-bookmark h1{font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.35;margin-bottom:1rem;font-weight:700}
.hero-bookmark .lead{color:var(--muted);margin-bottom:.85rem;font-size:1.02rem}
.hero-bookmark .lead strong{color:var(--text)}

.bookmark-shell{display:grid;grid-template-columns:220px 1fr;gap:2rem;padding-bottom:3rem;align-items:start}
.bookmark-rail{position:sticky;top:5.5rem}
.bookmark-rail ol{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.bookmark-rail a{
  display:block;position:relative;padding:.55rem .75rem .55rem 1.1rem;
  font-size:.88rem;color:var(--muted);border-radius:0 var(--radius) var(--radius) 0;
  background:#f8fafc;border:1px solid var(--line);border-left:4px solid var(--accent);
  transition:.2s;text-decoration:none;margin-left:.5rem;
}
.bookmark-rail a::before{
  content:"";position:absolute;left:-.5rem;top:50%;transform:translateY(-50%);
  width:.5rem;height:70%;border-radius:3px 0 0 3px;background:var(--accent);opacity:.35;
}
.bookmark-rail li:nth-child(1) a,.bookmark-rail li:nth-child(1) a::before{border-color:var(--tab1);background-color:color-mix(in srgb,var(--tab1) 8%,#fff)}
.bookmark-rail li:nth-child(1) a::before{background:var(--tab1);opacity:1}
.bookmark-rail li:nth-child(2) a,.bookmark-rail li:nth-child(2) a::before{border-color:var(--tab2)}
.bookmark-rail li:nth-child(2) a::before{background:var(--tab2);opacity:1}
.bookmark-rail li:nth-child(3) a,.bookmark-rail li:nth-child(3) a::before{border-color:var(--tab3)}
.bookmark-rail li:nth-child(3) a::before{background:var(--tab3);opacity:1}
.bookmark-rail li:nth-child(4) a,.bookmark-rail li:nth-child(4) a::before{border-color:var(--tab4)}
.bookmark-rail li:nth-child(4) a::before{background:var(--tab4);opacity:1}
.bookmark-rail li:nth-child(5) a,.bookmark-rail li:nth-child(5) a::before{border-color:var(--tab5)}
.bookmark-rail li:nth-child(5) a::before{background:var(--tab5);opacity:1}
.bookmark-rail li:nth-child(6) a,.bookmark-rail li:nth-child(6) a::before{border-color:var(--tab6)}
.bookmark-rail li:nth-child(6) a::before{background:var(--tab6);opacity:1}
.bookmark-rail li:nth-child(7) a,.bookmark-rail li:nth-child(7) a::before{border-color:var(--tab7)}
.bookmark-rail li:nth-child(7) a::before{background:var(--tab7);opacity:1}
.bookmark-rail a.is-active,.bookmark-rail a:hover{color:var(--text);background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06);text-decoration:none}

.bookmark-panels{display:flex;flex-direction:column;gap:2rem}
.bookmark-panel{
  padding:1.5rem 1.75rem;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;scroll-margin-top:6rem;
}
.bookmark-panel:nth-child(odd){border-left:4px solid var(--accent)}
.bookmark-panel:nth-child(even){border-left:4px solid var(--tab3)}
.chap-badge{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.05em;
  color:var(--accent);background:var(--accent-soft);padding:.2rem .65rem;border-radius:999px;margin-bottom:.65rem;
}
.bookmark-panel h2{font-size:1.25rem;margin-bottom:.85rem;line-height:1.4}
.bookmark-panel p{margin-bottom:.85rem;color:var(--text)}
.bookmark-panel figure{margin:1.25rem 0}
.bookmark-panel figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem}
.note-box{
  background:#fffbeb;border:1px solid #fde68a;border-radius:var(--radius);
  padding:1rem 1.15rem;font-size:.95rem;color:#92400e;margin:1rem 0;
}

.site-footer{border-top:1px solid var(--line);padding:1.5rem 0;margin-top:1rem;color:var(--muted);font-size:.9rem}
.footer-links{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:.5rem}
.footer-links a{color:var(--muted)}

.prose-page{padding:2rem 0 3rem;max-width:720px}
.prose-page h1{font-size:1.6rem;margin-bottom:1rem}
.prose-page h2{font-size:1.15rem;margin:1.25rem 0 .65rem}
.prose-page p{margin-bottom:.85rem;color:var(--text)}

.error-page{text-align:center;padding:3rem 0 1rem}
.error-page h1{font-size:3rem;color:var(--accent)}

@media(max-width:860px){
  .bookmark-shell{grid-template-columns:1fr}
  .bookmark-rail{position:static}
  .bookmark-rail ol{flex-direction:row;flex-wrap:wrap;gap:.5rem}
  .bookmark-rail a{margin-left:0;padding:.45rem .75rem;border-left-width:3px;border-radius:var(--radius)}
  .bookmark-rail a::before{display:none}
}
@media(max-width:640px){
  .nav-toggle{display:block}
  .site-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:1rem;display:none}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;gap:.75rem}
  .header-row{position:relative}
}