:root{
    --bg:#16141c;
    --side:#1c1b22;
    --card:#1c1b22;
    --line:#3a3744;
    --text:#f4f3f8;
    --mute:#a7a4b5;
    --accent:#6d4aff;
    --link:#b3a3ff;
    --quote:#24222d;
    --green:#2fbf85;
    --lime:#8fc93a;
     color-scheme:dark;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px)
}
 @media (prefers-color-scheme:light){
    :root:not([data-theme="dark"]){
        --bg:#f5f4f8;
        --side:#fff;
        --card:#fff;
        --line:#dcd9e6;
        --text:#1c1b22;
        --mute:#625f70;
        --accent:#6d4aff;
        --link:#5a36e0;
        --quote:#f1eefc;
        color-scheme:light
    }
}
 :root[data-theme="light"]{
    --bg:#f5f4f8;
    --side:#fff;
    --card:#fff;
    --line:#dcd9e6;
    --text:#1c1b22;
    --mute:#625f70;
    --link:#5a36e0;
    --quote:#f1eefc;
    color-scheme:light
}
 html{
    scroll-behavior:smooth;
    scroll-padding-top:env(safe-area-inset-top,0px)
}
 *,*::before,*::after{
    box-sizing:border-box
}
 body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:400 16px/1.7 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif
}
 body::before{
    content:"";
    position:fixed;
    inset:0 0 auto;
    height:env(safe-area-inset-top,0px);
    background:var(--bg);
    z-index:10
}
 .app{
    display:grid;
    grid-template-columns:272px minmax(0,1fr);
    min-height:100vh
}
 .side{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    align-self:start;
    height:100vh;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:18px 16px;
    background:var(--side);
    border-right:1px solid var(--line)
}
 .btn{
    display:block;
    text-align:center;
    background:var(--accent);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    padding:11px 14px;
    border-radius:8px
}
 .btn:hover{
    filter:brightness(1.1)
}
 nav{
    display:flex;
    flex-direction:column;
    gap:2px;
    overflow:auto
}
 nav a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:8px;
    color:var(--text);
    text-decoration:none;
    font-size:15px;
    line-height:1.35
}
 nav a:hover{
    background:rgba(127,110,255,.14)
}
 nav a.on{
    background:var(--accent);
    color:#fff
}
 nav a.sub{
    margin-left:20px;
    color:var(--mute)
}
 nav a.sub.on{
    color:#fff
}
 nav i{
    flex:none;
    width:13px;
    height:13px;
    border-radius:3px;
    background:var(--green)
}
 nav a.sub i{
    background:var(--lime)
}
 .prog{
    margin-top:auto;
    font-size:13px;
    color:var(--mute)
}
 .prog div{
    height:4px;
    border-radius:2px;
    background:var(--line);
    margin-bottom:8px;
    overflow:hidden
}
 .prog b{
    display:block;
    height:100%;
    width:0;
    background:var(--accent)
}
 main{
    padding:28px clamp(16px,4vw,48px) 64px
}
 .card{
    max-width:820px;
    margin:0 auto;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    padding:clamp(20px,4vw,44px)
}
 .foot{
    max-width:820px;
    margin:20px auto 0;
    padding:0 clamp(20px,4vw,44px);
    color:var(--mute);
    font-size:13px;
    opacity:.7
}
 .foot p{
    margin:0
}
 .foot .sig{
    margin-top:4px
}
 h1{
    margin:0 0 20px;
    font-size:clamp(28px,4.4vw,38px);
    line-height:1.2;
    font-weight:700;
    letter-spacing:-.01em
}
 h2{
    margin:48px 0 14px;
    padding-top:28px;
    border-top:1px solid var(--line);
    font-size:26px;
    line-height:1.25;
    font-weight:700
}
 h3{
    margin:36px 0 10px;
    font-size:21px;
    line-height:1.3;
    font-weight:600
}
 h4{
    margin:28px 0 8px;
    font-size:17px;
    font-weight:600
}
 h5{
    margin:24px 0 8px;
    font-size:15px;
    font-weight:600;
    color:var(--mute)
}
 h1 + p{
    margin-top:0
}
 p{
    margin:0 0 16px
}
 a{
    color:var(--link);
    text-underline-offset:3px
}
 ul,ol{
    margin:0 0 16px;
    padding-left:24px
}
 li{
    margin:4px 0
}
 blockquote{
    margin:0 0 16px;
    padding:12px 18px;
    background:var(--quote);
    border-left:3px solid var(--accent);
    border-radius:0 8px 8px 0;
    color:var(--text)
}
 blockquote p{
    margin:0
}
 .note{
    border-left-color:var(--green)
}
 .tldr{
    margin:0 0 16px;
    padding:14px 18px;
    border:1px dashed var(--line);
    border-radius:10px
}
 .tldr p{
    margin:0;
    color:var(--mute);
    font-size:14px
}
 .tldr ol{
    margin:8px 0
}
 .lede{
    color:var(--mute)
}
 .skip{
    font-style:italic;
    color:var(--mute)
}
 @media (max-width:820px){
     .app{
        grid-template-columns:1fr
    }
     .side{
        position:static;
        height:auto;
        border-right:0;
        border-bottom:1px solid var(--line)
    }
     nav,.prog{
        display:none
    }
}
 @media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
}
 :focus-visible{
    outline:2px solid var(--link);
    outline-offset:2px
}