:root{ --container:1200px; }
*{ box-sizing:border-box; }
body{ font-family:Arial,Helvetica,sans-serif; background:#f2f2f2; color:#222; margin:0; }
.container{ max-width:var(--container); margin:0 auto; padding:20px; }
.site-header{ background:#ffffff; border-bottom:1px solid #e5e5e5; padding:12px 0; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.site-header nav a{ margin-left:12px; text-decoration:none; color:#333; }
.home-hero{ text-align:center; padding:80px 20px; }
.btn{ background:#2b7cff; color:#fff; padding:10px 16px; text-decoration:none; border-radius:6px; display:inline-block; }
.btn.small{ padding:6px 10px; font-size:14px; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:12px; }
.thumb img{ width:100%; height:200px; object-fit:cover; display:block; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.footer{ text-align:center; padding:20px 0; color:#666; }
.viewer-top{ position:fixed; top:8px; left:8px; z-index:50; display:flex; gap:10px; align-items:center; }
.viewer-title{ font-weight:600; color:#333; }