:root{
  --accent: #10A37F;
  --accent-600: #0d8a6a;
  --bg: #ffffff;
  --surface: #f7f7fb;
  --muted: #6b7280;
  --text: #0f1720;
  --shadow: 0 6px 24px rgba(16,16,20,0.06);
  --radius: 12px;
  --max-width: 1100px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Helvetica Neue", monospace;
  font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
  :root{
    --bg: #0b0c0e;
    --surface: #0f1113;
    --text: #e6e6e9;
    --muted: #9aa0a6;
    --shadow: 0 8px 30px rgba(0,0,0,0.6);
  }
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.45}

.container{max-width:var(--max-width);margin:36px auto;padding:24px;}

.site-header{display:flex;align-items:center;gap:16px;padding:18px;border-radius:14px;margin-bottom:22px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,0.04)}
@media (prefers-color-scheme: dark){ .site-header{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border:1px solid rgba(255,255,255,0.03)} }

.logo{width:56px;height:56px;object-fit:contain;border-radius:10px;background:linear-gradient(135deg, rgba(16,163,127,0.12), rgba(16,163,127,0.06));display:inline-flex;align-items:center;justify-content:center;padding:8px}
.site-title h1{margin:0;font-size:20px}
.tagline{margin:4px 0;color:var(--muted);font-size:13px}

.hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;margin:16px 0}
@media (max-width:880px){ .hero{grid-template-columns:1fr;}}
.hero h2{font-size:22px;margin:0 0 12px}
.hero p{margin:0 0 16px;color:var(--muted);max-width:70ch}

.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;background:var(--accent);color:white;text-decoration:none;font-weight:600;box-shadow:0 8px 18px rgba(16,163,127,0.12);border:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(16,163,127,0.12);box-shadow:none;font-weight:600}
.link-muted{color:var(--muted);text-decoration:none;font-size:14px}

.hero-screenshot{
  width:100%;
  border-radius:12px;
  box-shadow:0 18px 50px rgba(2,6,23,0.4);
  border:1px solid rgba(255,255,255,0.02);
  display:block;
  max-width:420px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  overflow:hidden;
}

.features{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:24px 0}
@media (max-width:880px){ .features{grid-template-columns:1fr} }
.feature-card{background:var(--surface);padding:16px;border-radius:12px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,0.04)}
.feature-card h4{margin:0 0 8px;font-size:15px}
.feature-card p{margin:0;color:var(--muted);font-size:14px}

ul.feature-list{padding-left:20px;margin:12px 0 0;color:var(--muted)}
.feature-list li{margin:10px 0;line-height:1.4}

.download{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(16,163,127,0.03), rgba(16,163,127,0.01));border:1px solid rgba(16,163,127,0.06);box-shadow:0 12px 28px rgba(16,163,127,0.06)}
.download p{margin:0;color:var(--muted)}

.site-footer{margin-top:36px;padding:24px;border-radius:10px;background:transparent;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.site-footer a{color:var(--muted);text-decoration:none}
.copyright{font-size:13px;color:var(--muted)}

.doc{background:var(--surface);padding:22px;border-radius:12px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,0.04)}
.doc h2{margin-top:0}
.doc p{color:var(--muted);line-height:1.6}
.doc ul{margin:8px 0 16px 20px;color:var(--muted)}

.kv{font-weight:600;color:var(--text)}
.badge{display:inline-block;background:rgba(16,163,127,0.12);color:var(--accent);padding:6px 10px;border-radius:999px;font-weight:600;font-size:13px}


a:hover{opacity:0.92;}

@media (max-width:560px){
  .container{padding:18px}
  .site-header{flex-direction:row;gap:12px}
  .logo{width:48px;height:48px}
  .hero-screenshot{max-width:100%}
  .btn{width:100%;justify-content:center}
}

:focus{outline:3px solid rgba(16,163,127,0.14);outline-offset:2px}

.doc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 900px;
  margin: 0 auto;
  word-wrap: break-word;
}

.doc h1, .doc h2, .doc h3 {
  color: var(--text);
  margin-top: 1.2rem;
  margin-bottom: 0.45rem;
  font-weight: 700;
  line-height: 1.2;
}
.doc h1 { font-size: 22px; }
.doc h2 { font-size: 18px; }
.doc h3 { font-size: 16px; }

.doc p { margin: 0.6rem 0; color: var(--muted); }
.doc ul, .doc ol { margin: 0.6rem 0 0.6rem 1.2rem; color: var(--muted); }
.doc li { margin: 0.45rem 0; }


.doc .meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; }

.doc .toc {
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.01), transparent);
  border: 1px solid rgba(0,0,0,0.04);
  margin-bottom: 18px;
  font-size: 14px;
}
.doc .toc a { color: var(--accent); text-decoration: none; }
.doc .toc a:hover { text-decoration: underline; }

.anchor {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  opacity: 0.0;
  transform: translateY(1px);
  transition: all .12s ease;
}
.doc h2:hover .anchor, .doc h3:hover .anchor { opacity: 0.9; transform:none; }

.doc code, .doc pre {
  font-family: var(--mono);
  background: rgba(0,0,0,0.04);
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text);
  display: inline-block;
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .btn, .hero-right { display: none !important; }
  .container { max-width: 100%; margin: 0; padding: 0; }
  .doc { box-shadow:none; border: none; background: transparent; padding: 0; }
}

@media (max-width:520px) {
  .doc { font-size:16px; padding:10px; }
  .doc .toc { font-size:14px; padding:10px; }
}