*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:#fafafa;color:#111;min-height:100vh;display:flex;flex-direction:column;}
a{color:#0070f3;text-decoration:none;}
a:hover{text-decoration:underline;}

.layout{display:flex;max-width:1100px;margin:0 auto;width:100%;min-height:100vh;}

/* Header */
.header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #eaeaea;padding:12px 24px;display:flex;align-items:center;gap:12px;}
.header-logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:#111;text-decoration:none;}
.header-logo svg{flex-shrink:0;}
.header-docs{font-size:14px;color:#666;font-weight:400;margin-left:4px;}

/* Sidebar */
.sidebar{width:240px;flex-shrink:0;border-right:1px solid #eaeaea;background:#fff;padding:20px 0;position:sticky;top:49px;height:calc(100vh - 49px);overflow-y:auto;}
.sidebar-section{padding:0 16px;margin-bottom:16px;}
.sidebar-title{font-size:13px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;padding:0 12px;}
.sidebar a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;color:#444;transition:background .15s,color .15s;font-weight:500;}
.sidebar a:hover{background:#f0f0f0;color:#111;text-decoration:none;}
.sidebar a.active{background:#e8f4ff;color:#0070f3;font-weight:600;}

/* Content */
.content{flex:1;padding:32px 40px 80px;max-width:760px;min-width:0;}
.breadcrumb{font-size:13px;color:#888;margin-bottom:16px;}
.breadcrumb a{color:#888;}
.breadcrumb span{margin:0 6px;}
.content h1{font-size:32px;font-weight:800;margin-bottom:20px;letter-spacing:-.02em;}
.content h2{font-size:20px;font-weight:700;margin:32px 0 12px;}
.content p{font-size:15px;line-height:1.7;color:#444;margin-bottom:14px;}
.content ol{padding-left:20px;margin-bottom:20px;}
.content ol li{font-size:15px;line-height:1.7;color:#444;margin-bottom:10px;}
.content ol li strong{color:#111;}
.content img{max-width:100%;border-radius:12px;border:1px solid #eaeaea;margin:16px 0;}
.screenshot-row{display:flex;gap:16px;margin:16px 0;}
.screenshot-row img{width:calc(50% - 8px);border-radius:12px;border:1px solid #eaeaea;}
.callout{background:#f0f7ff;border:1px solid #d0e4ff;border-radius:12px;padding:16px 20px;margin:20px 0;}
.callout p{color:#333;margin:0;font-size:14px;line-height:1.6;}
.callout strong{color:#0070f3;}
.dl-button{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;background:#111;color:#fff;font-size:14px;font-weight:600;text-decoration:none;margin:8px 4px 8px 0;transition:opacity .15s;}
.dl-button:hover{opacity:0.8;text-decoration:none;}

/* Mobile */
@media(max-width:768px){
  .sidebar{display:none;}
  .content{padding:24px 18px 60px;}
  .content h1{font-size:26px;}
  .header{padding:12px 16px;}
}