:root{--bg-surface:#FFFFFF;--bg-canvas:#F8F9FA;--text-primary:#202124;--text-secondary:#5F6368;--border-light:#DADCE0;--status-red:#D93025;--status-amber:#E37400;--status-green:#1E8E3E;--radius-container:12px;--radius-badge:6px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-surface);color:var(--text-primary);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--text-primary)}
.top{display:flex;align-items:center;padding:16px;max-width:880px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;font-weight:500;text-decoration:none;font-size:18px}
.hero,.doc,.section{max-width:880px;margin:0 auto;padding:0 16px}
.hero{padding-top:40px;padding-bottom:32px}
h1{font-size:34px;line-height:1.2;font-weight:500;margin:0 0 12px}
h2{font-size:20px;font-weight:500;margin:32px 0 8px}
.lead{font-size:19px;color:var(--text-secondary);max-width:640px;margin:0 0 24px}
.muted{color:var(--text-secondary)}
.cta{display:inline-block;padding:10px 18px;border:1px solid var(--text-primary);border-radius:var(--radius-badge);text-decoration:none;font-weight:500}
.cta[aria-disabled=true]{border-color:var(--border-light);color:var(--text-secondary)}
.demo{border:1px solid var(--status-red);border-radius:var(--radius-container);overflow:hidden;margin:32px 0;background:var(--bg-canvas)}
.demo pre{margin:0;padding:14px 16px;overflow-x:auto;font:13px/1.6 "SF Mono",Menlo,monospace;background:#fff}
.demo .bar{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;border-top:1px solid var(--border-light);font-size:14px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:0 8px;border-radius:var(--radius-badge);background:#FCE8E6;font-size:12px;font-weight:500;white-space:nowrap}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--status-red);display:inline-block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:16px 0}
.card{border:1px solid var(--border-light);border-radius:var(--radius-container);padding:16px;background:var(--bg-canvas)}
.card h3{font-size:15px;font-weight:500;margin:0 0 6px}
.card p{margin:0;font-size:14px;color:var(--text-secondary)}
.doc{padding-bottom:40px}
.doc li{margin:4px 0}
.foot{max-width:880px;margin:40px auto 24px;padding:16px;border-top:1px solid var(--border-light);font-size:14px;color:var(--text-secondary)}
.foot a{color:var(--text-secondary)}
@media (max-width:480px){h1{font-size:28px}}