:root{
     --mm-light:#6AAFE6;
     --mm-base:#3B82F6;
     --mm-dark:#1E3A8A;
     --accent:var(--mm-base);
}
/* Buttons, surfaces, small utilities */
 .btn-primary{
     background: linear-gradient(90deg,var(--mm-base),var(--mm-dark));
}
 .btn-primary:hover{
     filter:brightness(.96) 
}
 .code-surface{
     color: #e6eef8;
     border-radius: 12px;
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
     font-size:13px;
     line-height:1.5;
     overflow:auto;
}
 .copy-toast{
    position:fixed;
     left:50%;
     transform:translateX(-50%);
     bottom:28px;
     background:#0f1724;
     color:#e6eef8;
     padding:.6rem .9rem;
     border-radius:10px;
     box-shadow:0 10px 30px rgba(2,6,23,.6);
     opacity:0;
     transition:opacity .18s ease;
     z-index:80
}
 .copy-toast.show{
    opacity:1
}
/* subtle mega-mendung background */
 .bg-mega {
     background: radial-gradient(800px 450px at -10% -20%, rgba(106,175,230,0.08), transparent 30%), radial-gradient(900px 550px at 110% 10%, rgba(59,130,246,0.06), transparent 35%), linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
     background-attachment: local;
}
/* responsive hero reorder on very small screens */
 @media (max-width:640px) {
     .hero-grid{
         gap:1.25rem;
         grid-template-columns:1fr 
    }
     .hero-code{
         order:2 
    }
     .hero-copy{
         order:1 
    }
}
/* video responsive wrapper 16:9 */
 .video-wrapper {
     position: relative;
     width: 100%;
     padding-top: 56.25%;
}
/* 16:9 */
 .video-wrapper iframe, .video-wrapper video, .video-wrapper img {
     position: absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     object-fit:cover;
     border-radius: 8px;
}
/* code surface small tweaks */
 pre.code {
     border-radius: 10px;
     overflow:auto;
     font-size:13px;
}
 .toc-link.active {
     color: var(--mm-dark);
     font-weight:600;
}
/* mobile sidebar animation */
 .mobile-drawer {
     transition: transform .18s ease, opacity .18s ease;
     transform-origin: top right;
}
 .mobile-drawer.hidden {
     transform: translateY(-10px);
     opacity:0;
     pointer-events:none;
}
 .copy-toast{
    position:fixed;
     left:50%;
     transform:translateX(-50%);
     bottom:28px;
     background:#0f1724;
     color:#e6eef8;
     padding:.6rem .9rem;
     border-radius:10px;
     box-shadow:0 10px 30px rgba(2,6,23,.6);
     opacity:0;
     transition:opacity .18s ease;
     z-index:80
}
 .copy-toast.show{
    opacity:1
}
/* responsive tweaks for hero / title row */
 @media (max-width: 767px){
     .desktop-only {
         display:none;
    }
     main{
         padding-top: calc(var(--header-h) + 12px);
    }
}
 header {
     height: var(--header-h);
}
 main {
     padding-top: calc(var(--header-h) + 20px);
}
/* Sidebar scroll area */
 .docs-sidebar {
     height: calc(100vh - var(--header-h-12px));
     overflow:auto;
     -webkit-overflow-scrolling:touch;
}