/* Container widths and navbar copied from the original Bootstrap-based site. */
:root{--primary:#417afe;--gradient:linear-gradient(135deg,#5184F9 0%,#9A54FB 100%);--bg:#f5f7ff;--text:#353535}
.mq-site-container,.mq-guide-wrap,.mq-site-footer .container{box-sizing:border-box;width:100%;padding-left:12px;padding-right:12px;margin-left:auto;margin-right:auto;max-width:none}
@media(min-width:576px){.mq-site-container,.mq-guide-wrap,.mq-site-footer .container{max-width:540px}}
@media(min-width:768px){.mq-site-container,.mq-guide-wrap,.mq-site-footer .container{max-width:720px}}
@media(min-width:992px){.mq-site-container,.mq-guide-wrap,.mq-site-footer .container{max-width:960px}}
@media(min-width:1200px){.mq-site-container,.mq-guide-wrap,.mq-site-footer .container{max-width:1140px}}
@media(min-width:1400px){.mq-site-container,.mq-guide-wrap,.mq-site-footer .container{max-width:1320px}}

        .navbar {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255,255,255,0.97);
            backdrop-filter: blur(12px);
            box-shadow: 0 2px 16px rgba(65,122,254,0.10);
            padding: 0;
        }
        .navbar-inner {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            height: 64px;
            padding: 0 16px;
            width: 100%;
        }
        /* Brand logo area */
        .nav-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            flex-shrink: 0;
        }
        .nav-brand-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            object-fit: cover;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(255,100,60,.25);
        }
        .nav-brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1.15;
        }
        .nav-brand-name {
            font-size: 19px;
            font-weight: 900;
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 3px;
        }
        .nav-brand-sub {
            font-size: 10px;
            color: #aab;
            letter-spacing: 1.5px;
            margin-top: 1px;
        }
        /* Desktop links */
        .nav-links { display: flex; align-items: center; justify-content: center; gap: 2px; }
        .nav-links a {
            color: #444;
            font-size: 14px;
            font-weight: 600;
            padding: 6px 11px;
            border-radius: 7px;
            transition: all .2s;
            white-space: nowrap;
        }
        .nav-links a:hover { background: var(--bg); color: var(--primary); }
        .nav-links a.active { color: var(--primary); }
        .nav-btn {
            background: var(--gradient) !important;
            color: #fff !important;
            border: none !important;
            border-radius: 20px !important;
            padding: 7px 18px !important;
            font-weight: 700 !important;
            font-size: 14px !important;
            font-family: inherit !important;
            box-shadow: 0 3px 12px rgba(81,132,249,.35);
            white-space: nowrap;
            cursor: pointer;
        }
        .nav-btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 5px 16px rgba(81,132,249,.45) !important; }
        .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
        /* Mobile toggle */
        .nav-toggle {
            display: none;
            border: none;
            background: var(--bg);
            font-size: 20px;
            color: var(--text);
            cursor: pointer;
            padding: 6px 10px;
            border-radius: 8px;
            line-height: 1;
        }
        /* Mobile nav drawer */
        .mobile-nav {
            display: none;
            padding: 6px 8px 10px;
            border-top: 1px solid #eef2ff;
        }
        .mobile-nav.open { display: block; }
        .mobile-nav a {
            display: block;
            padding: 11px 14px;
            color: #444;
            font-size: 15px;
            font-weight: 600;
            border-radius: 8px;
            transition: all .15s;
        }
        .mobile-nav a:hover, .mobile-nav a:active { background: var(--bg); color: var(--primary); }
        .mobile-nav-sep { height: 1px; background: #eef2ff; margin: 6px 0; }

        
.navbar a{text-decoration:none;line-height:1.7}
.navbar .navbar-inner{grid-template-columns:auto 1fr auto;gap:14px}
.navbar .nav-links{display:flex;justify-content:center}
.navbar .nav-links a[aria-current]{color:var(--primary)}
.mq-site-menu{display:none;line-height:1}
.mq-site-menu summary{list-style:none}
.mq-site-menu summary::-webkit-details-marker{display:none}
.navbar .mq-site-container{position:relative}
.mq-site-menu .mobile-nav{position:absolute;top:64px;left:0;right:0;background:rgba(255,255,255,.98);box-shadow:0 10px 20px rgba(65,122,254,.10);display:none;line-height:1.7}
.mq-site-menu[open] .mobile-nav{display:block}
@media(max-width:991px){.navbar .nav-links{display:none!important}.navbar .nav-right .nav-btn{display:none}.navbar .nav-toggle{display:block}.navbar .navbar-inner{grid-template-columns:1fr auto;height:64px}.navbar .nav-right{grid-column:2}.mq-site-menu{display:block}}
/* Stretch article and index containers with the same gutters as the homepage. */
.mq-guide-layout{grid-template-columns:minmax(0,1fr) 240px}
.mq-guide-index-content{padding:32px 12px 48px}
@media(max-width:991px){.mq-guide-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.mq-guide-index-content{padding:24px 12px 32px}}