:root{
    --purple:#6840ef;
    --purple-dark:#542bd6;
    --purple-soft:#f2efff;

    --ink:#11142b;
    --text:#343950;
    --muted:#747b91;

    --line:#e7e8ef;
    --soft:#fafafd;

    --sidebar:300px;
    --toc:260px;
    --top:72px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#fff;
    color:var(--text);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size:14px;
    line-height:1.68;
}


/* TOP */

.docs-topbar{
    position:sticky;
    z-index:100;
    top:0;

    height:var(--top);

    display:grid;
    grid-template-columns:
        var(--sidebar)
        minmax(320px,620px)
        1fr;

    align-items:center;
    gap:26px;

    padding:0 26px;

    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
}

.docs-brand{
    display:flex;
    align-items:center;
    gap:12px;

    color:var(--ink);
    text-decoration:none;
}

.docs-brand__logo{
    display:grid;
    place-items:center;

    width:40px;
    height:40px;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #7450fa,
            #5131d7
        );

    color:#fff;

    font-size:20px;
    font-weight:900;

    box-shadow:
        0 8px 20px
        rgba(92,56,220,.22);
}

.docs-brand strong{
    font-size:16px;
    font-weight:850;
}

.docs-brand small{
    display:inline-flex;

    margin-left:7px;
    padding:3px 6px;

    border-radius:5px;

    background:var(--purple);
    color:#fff;

    font-size:9px;
    font-weight:900;
    vertical-align:2px;
}


.docs-search{
    position:relative;

    display:flex;
    align-items:center;
    gap:9px;

    width:100%;
    height:42px;

    padding:0 14px;

    border:1px solid #dedfe8;
    border-radius:10px;

    background:#fff;

    box-shadow:
        0 2px 8px
        rgba(20,22,45,.025);
}

.docs-search > span{
    color:#7f8498;
    font-size:17px;
}

.docs-search input{
    width:100%;

    border:0;
    outline:0;

    color:#252a42;
    background:transparent;

    font:inherit;
}

.docs-search-results{
    position:absolute;

    top:48px;
    left:0;
    right:0;

    max-height:360px;
    overflow:auto;

    padding:7px;

    border:1px solid var(--line);
    border-radius:11px;

    background:#fff;

    box-shadow:
        0 18px 50px
        rgba(23,25,48,.15);
}

.docs-search-results a{
    display:block;
    padding:9px 10px;
    border-radius:7px;

    color:#30354c;
    text-decoration:none;
}

.docs-search-results a:hover{
    background:#f5f3ff;
    color:var(--purple);
}


.docs-topnav{
    justify-self:end;

    display:flex;
    align-items:center;
    gap:25px;
}

.docs-topnav a{
    color:#4d5268;
    text-decoration:none;

    font-size:13px;
    font-weight:700;
}

.docs-topnav a.is-active{
    color:var(--purple);
}


/* LAYOUT */

.docs-layout{
    display:grid;

    grid-template-columns:
        var(--sidebar)
        minmax(0,1fr)
        var(--toc);

    max-width:1700px;
    margin:auto;
}


/* SIDEBAR */

.docs-sidebar{
    position:sticky;
    top:var(--top);

    height:
        calc(100vh - var(--top));

    overflow:auto;

    padding:24px 20px 30px;

    border-right:1px solid var(--line);
    background:#fff;
}

.docs-nav-section{
    margin-bottom:15px;
}

.docs-nav-title{
    display:flex;
    align-items:center;
    gap:10px;

    min-height:32px;

    color:#363b53;

    font-size:13px;
    font-weight:750;
}

.docs-nav-icon{
    width:20px;
    text-align:center;
    color:#747b93;
    font-size:12px;
}

.docs-nav-title em{
    margin-left:auto;

    padding:2px 7px;

    border-radius:999px;

    background:#f2efff;
    color:#653be3;

    font-size:9px;
    font-style:normal;
}

.docs-nav-items{
    display:grid;
    gap:2px;

    margin:
        2px 0 0
        30px;
}

.docs-nav-items a{
    padding:6px 10px;

    border-radius:7px;

    color:#697086;
    text-decoration:none;

    font-size:12px;
}

.docs-nav-items a:hover{
    color:#5030c6;
    background:#faf9ff;
}

.docs-nav-items a.is-active{
    color:#5a32df;
    background:#f0edff;
    font-weight:750;
}

.docs-help{
    margin-top:36px;
    padding:18px;

    border:1px solid var(--line);
    border-radius:12px;

    background:#fff;
}

.docs-help strong{
    display:block;
    color:var(--ink);
    font-size:12px;
}

.docs-help p{
    margin:7px 0 13px;
    color:#777d91;
    font-size:11px;
    line-height:1.55;
}

.docs-help a{
    color:var(--purple);
    font-size:11px;
    font-weight:750;
    text-decoration:none;
}


/* CONTENT */

.docs-content{
    min-width:0;

    padding:
        34px
        clamp(34px,5vw,78px)
        80px;
}

.docs-breadcrumb{
    margin-bottom:22px;

    color:#8a90a2;

    font-size:11px;
}

.docs-breadcrumb span{
    margin:0 8px;
}

.docs-article{
    max-width:850px;
}

.docs-article h1{
    margin:
        0 0
        15px;

    color:#0e1127;

    font-size:38px;
    line-height:1.08;

    letter-spacing:-.04em;

    font-weight:900;
}

.docs-article h2{
    margin:
        44px 0
        12px;

    padding-top:4px;

    color:#11142b;

    font-size:23px;
    line-height:1.25;

    letter-spacing:-.025em;

    font-weight:850;
}

.docs-article h3{
    margin:
        28px 0
        10px;

    color:#1b1f35;

    font-size:17px;
    line-height:1.3;

    font-weight:800;
}

.docs-article p{
    margin:0 0 15px;

    color:#4f566d;

    font-size:14px;
    line-height:1.78;
}

.docs-article ul,
.docs-article ol{
    margin:
        10px 0 20px;
    padding-left:23px;
}

.docs-article li{
    margin:6px 0;
    color:#434a61;
}

.docs-article a{
    color:#5c36db;
    text-decoration:none;
    font-weight:650;
}

.docs-article a:hover{
    text-decoration:underline;
}

.docs-article code{
    padding:2px 5px;

    border-radius:5px;

    background:#f3f1fb;
    color:#5932d6;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size:.91em;
}

.docs-article pre{
    overflow:auto;

    margin:
        18px 0 24px;

    padding:20px;

    border:1px solid #23243a;
    border-radius:11px;

    background:#151626;
    color:#f5f4fb;

    box-shadow:
        0 10px 30px
        rgba(20,22,38,.08);
}

.docs-article pre code{
    padding:0;

    background:transparent;
    color:inherit;

    font-size:12px;
    line-height:1.7;
}

.docs-callout{
    margin:18px 0 24px;

    padding:14px 16px;

    border:
        1px solid #ddd7fb;

    border-left:
        3px solid var(--purple);

    border-radius:8px;

    background:#faf9ff;

    color:#4f536a;

    font-size:13px;
    line-height:1.65;
}

.docs-bottom{
    display:flex;
    justify-content:space-between;
    gap:20px;

    max-width:850px;

    margin-top:70px;
    padding-top:22px;

    border-top:1px solid var(--line);

    color:#979cad;

    font-size:11px;
}

.docs-bottom strong{
    color:#5a6075;
}


/* RIGHT TOC */

.docs-toc{
    position:sticky;
    top:var(--top);

    height:
        calc(100vh - var(--top));

    overflow:auto;

    padding:34px 25px;

    border-left:1px solid var(--line);
}

.docs-toc > strong{
    display:block;

    margin-bottom:13px;

    color:#1d2137;

    font-size:12px;
}

.docs-toc nav{
    display:grid;
    gap:3px;

    padding-left:12px;

    border-left:1px solid #e6e7ee;
}

.docs-toc nav a{
    padding:5px 0;

    color:#777d91;

    text-decoration:none;

    font-size:11px;
    line-height:1.45;
}

.docs-toc nav a:hover{
    color:var(--purple);
}

.docs-toc nav a.is-sub{
    padding-left:11px;
    font-size:10px;
}

.docs-side-card{
    margin-top:38px;
    padding:17px;

    border:1px solid var(--line);
    border-radius:11px;
}

.docs-side-card > span{
    display:inline-block;

    margin-bottom:10px;

    color:var(--purple);

    font-size:11px;
    font-weight:800;
}

.docs-side-card strong{
    display:block;

    color:#20243a;

    font-size:12px;
}

.docs-side-card p{
    margin:8px 0 12px;

    color:#7c8194;

    font-size:10px;
    line-height:1.6;
}

.docs-side-card a{
    color:var(--purple);

    font-size:10px;
    font-weight:750;

    text-decoration:none;
}


/* RESPONSIVE */

@media(max-width:1150px){

    :root{
        --toc:0px;
    }

    .docs-layout{
        grid-template-columns:
            var(--sidebar)
            minmax(0,1fr);
    }

    .docs-toc{
        display:none;
    }

}

@media(max-width:820px){

    .docs-topbar{
        grid-template-columns:
            auto 1fr;

        height:auto;
        min-height:66px;

        padding:11px 14px;
    }

    .docs-search{
        height:40px;
    }

    .docs-topnav{
        display:none;
    }

    .docs-layout{
        display:block;
    }

    .docs-sidebar{
        display:none;
    }

    .docs-content{
        padding:
            26px 20px
            60px;
    }

    .docs-article h1{
        font-size:32px;
    }

}

/* =========================================================
   MTG DOCS · BRANDING OFICIAL
   ========================================================= */

.docs-brand__logo{
    display:flex;
    align-items:center;
    justify-content:center;

    width:auto;
    height:42px;

    padding:0;
    border-radius:0;

    background:none;
    box-shadow:none;

    flex:0 0 auto;
}

.docs-brand__logo img{
    display:block;

    width:auto;
    height:38px;
    max-width:190px;

    object-fit:contain;
}

@media (max-width:700px){
    .docs-brand{
        gap:9px;
    }

    .docs-brand__logo{
        height:36px;
    }

    .docs-brand__logo img{
        height:32px;
        max-width:150px;
    }
}