:root{
  --bg:#f8fafc; --surface:#ffffff; --border:#cbd5e1;
  --txt:#1e293b; --muted:#64748b; --accent:#3b82f6; --hd-bg:#1e293b;
  --ana:#7c5cbf; --ana-tint:rgba(124,92,191,.07);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Libre Baskerville',Georgia,serif;background:var(--bg);color:var(--txt);min-height:100vh;padding-bottom:68px;}
header{background:var(--hd-bg);color:#fff;padding:9px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
header h1{font-size:.98rem;font-weight:700;line-height:1.25;}
.site-link{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0;opacity:.85;}
.site-link:hover{opacity:1;}
.site-icon{width:47px;height:47px;object-fit:contain;border-radius:8px;}
.site-label{font-family:'Source Code Pro',monospace;font-size:.65rem;color:rgba(255,255,255,.7);line-height:1.4;text-align:right;white-space:nowrap;}

.view{display:none;padding:22px 18px 28px;max-width:820px;margin:0 auto;}
.view.active{display:block;}

.back-btn{display:inline-flex;align-items:center;gap:5px;font-family:'Source Code Pro',monospace;font-size:.73rem;
  color:var(--accent);cursor:pointer;margin-bottom:20px;padding:6px 11px;border:1px solid var(--accent);
  border-radius:5px;background:none;transition:background .15s,color .15s;text-decoration:none;}
.back-btn:hover{background:var(--accent);color:#fff;}

.cat-title{font-size:1.05rem;font-weight:700;margin-bottom:6px;color:var(--ana);}
.cat-sub{font-size:.78rem;color:var(--muted);margin-bottom:20px;}

.ex-list{list-style:none;display:flex;flex-direction:column;gap:5px;}
.ex-item{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--border);border-radius:6px;
  cursor:pointer;background:var(--surface);position:relative;box-shadow:inset 4px 0 0 transparent;
  transition:box-shadow .18s,background .18s,border-color .18s,transform .18s;text-decoration:none;color:inherit;}
.ex-item:hover{box-shadow:inset 4px 0 0 var(--ana);background:var(--ana-tint);
  border-color:color-mix(in srgb,var(--ana) 30%,var(--border));transform:translateX(3px);}
.ex-badge{font-family:'Source Code Pro',monospace;font-size:.84rem;padding:4px 10px;border-radius:3px;color:#fff;
  white-space:nowrap;flex-shrink:0;opacity:.88;background:var(--ana);}
.ex-info{flex:1;min-width:0;}
.ex-title{font-size:.87rem;line-height:1.4;}
.ex-sub{font-family:'Source Code Pro',monospace;font-size:.66rem;color:var(--muted);margin-top:3px;}
.ex-arrow{font-size:.85rem;color:var(--muted);flex-shrink:0;opacity:0;transform:translateX(-4px);
  transition:opacity .18s,transform .18s;}
.ex-item:hover .ex-arrow{opacity:1;transform:translateX(0);}
.ex-fet-tag{font-family:'Source Code Pro',monospace;font-size:.58rem;font-weight:700;letter-spacing:.04em;
  color:#fff;background:#22c55e;border-radius:3px;padding:2px 7px;flex-shrink:0;}
.ex-item.is-fet{background:color-mix(in srgb,#22c55e 8%,var(--surface));
  border-color:color-mix(in srgb,#22c55e 35%,var(--border));}

.det-header{margin-bottom:16px;}
.det-header h2{font-size:.98rem;font-weight:700;line-height:1.4;}
.det-meta{font-family:'Source Code Pro',monospace;font-size:.68rem;color:var(--muted);margin-top:3px;}

.done-btn{display:inline-flex;align-items:center;gap:7px;font-family:'Libre Baskerville',serif;font-size:.84rem;
  padding:9px 18px;border-radius:6px;cursor:pointer;border:3px solid transparent;
  transition:background .18s,color .18s,border-color .18s;margin-bottom:18px;}
.done-btn.not-done{background:#94a3b8;color:#fff;}
.done-btn.is-done{background:#22c55e;color:#fff;font-weight:700;}
.done-btn:hover{border-color:#000;}

.page-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.page-fig{border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#f0ede6;}
.page-fig img{display:block;width:100%;cursor:zoom-in;}
.page-actions{display:flex;justify-content:space-between;align-items:center;margin-top:4px;}
.page-fname{font-family:'Source Code Pro',monospace;font-size:.68rem;color:var(--muted);}
.page-link{font-family:'Source Code Pro',monospace;font-size:.72rem;color:var(--accent);text-decoration:none;
  padding:5px 10px;border:1px solid var(--accent);border-radius:3px;transition:background .15s,color .15s;}
.page-link:hover{background:var(--accent);color:#fff;}

/* Lightbox */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;
  align-items:center;justify-content:center;padding:16px;cursor:zoom-out;}
.lightbox.active{display:flex;}
.lightbox img{max-width:100%;max-height:100%;border-radius:4px;}

footer{position:fixed;bottom:0;left:0;width:100%;background:#f8f9fa;border-top:1px solid #ccc;padding:9px 16px;
  padding-bottom:max(9px,env(safe-area-inset-bottom));z-index:100;display:flex;align-items:center;
  justify-content:center;gap:12px;flex-wrap:wrap;text-align:center;}
footer a{color:#333;text-decoration:underline;font-size:.83rem;}
footer span{font-size:.83rem;color:#333;font-family:'Source Code Pro',monospace;}
.cc-img{border:0;height:22px;vertical-align:middle;}

.buit{border:1px dashed var(--border);border-radius:6px;padding:26px 20px;text-align:center;
  color:var(--muted);font-size:.85rem;line-height:1.6;background:var(--surface);}