* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; line-height:1.5; margin:0; color:#222; background:#f7f8fb; }
.container { max-width:900px; margin:0 auto; padding:24px; }
.site-header { background:linear-gradient(90deg,#0b5fff,#00b4ff); color:white; padding:36px 0; margin-bottom:18px; }
.site-header h1 { margin:0; font-size:28px; }
.tagline { margin:6px 0 0; opacity:0.95; }

.header-inner { display:flex; align-items:center; gap:18px; }
.logo { width:56px; height:56px; display:block; }
.title-block { flex:1; }
.site-nav { display:flex; gap:14px; align-items:center; }
.site-nav a { color:rgba(255,255,255,0.95); text-decoration:none; padding:8px 10px; border-radius:6px; }
.site-nav a:hover { background:rgba(255,255,255,0.08); }
h2 { margin-top:18px; }
ul { padding-left:20px; }
code { background:#eee; padding:2px 6px; border-radius:4px; }
pre { background:#272b30; color:#e6eef8; padding:12px; border-radius:6px; overflow:auto; }
.site-footer { text-align:center; padding:18px 0; color:#666; margin-top:28px; }

.screenshots { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:12px; }
.screenshot { background:#fff; border-radius:8px; padding:6px; box-shadow:0 2px 8px rgba(16,24,40,0.06); }
.screenshot img { width:100%; height:auto; display:block; border-radius:6px; }
.docs-section pre { background:#0f1724; color:#dbeafe; }

.version { font-size:14px; font-weight:600; background:rgba(255,255,255,0.12); color:#fff; padding:4px 8px; border-radius:10px; margin-left:8px; vertical-align:middle; }
.current-version { margin-top:8px; font-weight:600; color:#0b5fff; }