.docs-page{
    min-height:100vh;
}

.docs-shell{
    max-width:1280px;
    margin:0 auto;
    padding:120px 20px 80px;
    display:grid;
    gap:28px;
}

.docs-hero,
.docs-section{
    border:1px solid var(--oopsie-border);
    border-radius:24px;
    background:rgba(17,19,23,.82);
    box-shadow:var(--oopsie-shadow);
}

.docs-hero{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:24px;
    padding:28px;
}

.docs-eyebrow{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid rgba(255,119,0,.35);
    background:rgba(255,119,0,.10);
    color:#ff9b4d;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.docs-hero h1{
    margin:16px 0 0;
    color:var(--oopsie-text);
    font-size:clamp(2rem, 3vw, 3.15rem);
    line-height:1.02;
    font-weight:900;
}

.docs-hero p{
    margin:16px 0 0;
    color:var(--oopsie-muted);
    font-size:1rem;
    line-height:1.7;
    max-width:64ch;
}

.docs-hero__actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:24px;
}

.docs-hero__panel{
    display:grid;
    gap:12px;
    align-content:start;
}

.docs-hero-stat{
    padding:18px;
    border:1px solid var(--oopsie-border);
    border-radius:18px;
    background:rgba(255,255,255,.03);
}

.docs-hero-stat strong{
    display:block;
    color:var(--oopsie-text);
    font-size:1.8rem;
    line-height:1;
}

.docs-hero-stat span{
    display:block;
    margin-top:8px;
    color:var(--oopsie-muted);
}

.docs-section{
    padding:24px;
}

.docs-section__head h2{
    margin:0;
    color:var(--oopsie-text);
    font-size:1.7rem;
}

.docs-section__head p{
    margin:8px 0 0;
    color:var(--oopsie-muted);
}

.docs-quickstart{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.docs-quickstart article{
    padding:18px;
    border:1px solid var(--oopsie-border);
    border-radius:18px;
    background:rgba(255,255,255,.03);
}

.docs-quickstart span{
    display:inline-flex;
    width:34px;
    height:34px;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,119,0,.14);
    color:#ff9d52;
    font-weight:800;
}

.docs-quickstart h3{
    margin:14px 0 0;
    color:var(--oopsie-text);
    font-size:1.05rem;
}

.docs-quickstart p{
    margin:8px 0 0;
    color:var(--oopsie-muted);
    line-height:1.55;
}

.docs-layout{
    margin-top:18px;
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:16px;
}

.docs-sidebar__card{
    position:sticky;
    top:96px;
    display:grid;
    gap:8px;
    padding:16px;
    border:1px solid var(--oopsie-border);
    border-radius:18px;
    background:rgba(255,255,255,.03);
}

.docs-sidebar__card strong{
    color:var(--oopsie-text);
    font-size:.95rem;
}

.docs-sidebar__links{
    display:grid;
    gap:8px;
}

.docs-sidebar__card a{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    color:var(--oopsie-text);
    text-decoration:none;
    background:rgba(255,255,255,.02);
    border:1px solid transparent;
}

.docs-sidebar__card a:hover{
    border-color:rgba(255,123,22,.25);
    background:rgba(255,123,22,.07);
}

.docs-sidebar__card small{
    color:var(--oopsie-muted);
}

.docs-content{
    display:grid;
    gap:16px;
}

.docs-stack-card{
    padding:20px;
    border:1px solid var(--oopsie-border);
    border-radius:20px;
    background:rgba(255,255,255,.03);
    scroll-margin-top:112px;
}

.docs-stack-card__head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
}

.docs-stack-card__head h3{
    margin:10px 0 0;
    color:var(--oopsie-text);
    font-size:1.35rem;
}

.docs-stack-card__head p{
    margin:8px 0 0;
    color:var(--oopsie-muted);
    line-height:1.6;
}

.docs-stack-meta{
    min-width:210px;
    padding:14px;
    border:1px solid var(--oopsie-border);
    border-radius:16px;
    background:rgba(255,255,255,.02);
}

.docs-stack-meta small{
    display:block;
    color:var(--oopsie-muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    font-size:.68rem;
}

.docs-stack-meta strong{
    display:block;
    margin-top:6px;
    color:var(--oopsie-text);
    font-size:.96rem;
    line-height:1.45;
}

.docs-stack-inline-meta{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.docs-inline-card{
    padding:12px 14px;
    border:1px solid var(--oopsie-border);
    border-radius:14px;
    background:rgba(255,255,255,.02);
}

.docs-inline-card strong{
    display:block;
    color:var(--oopsie-text);
    font-size:.78rem;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.docs-chip-list{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.docs-chip-list span{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    color:var(--oopsie-text);
    background:rgba(255,255,255,.04);
    font-size:.78rem;
}

.docs-track-pill{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 10px;
    border-radius:999px;
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.docs-track-pill.is-browser{
    color:#7dd3fc;
    border:1px solid rgba(125,211,252,.36);
    background:rgba(125,211,252,.10);
}

.docs-track-pill.is-backend{
    color:#93c5fd;
    border:1px solid rgba(96,165,250,.34);
    background:rgba(96,165,250,.10);
}

.docs-track-pill.is-hybrid{
    color:#fcd34d;
    border:1px solid rgba(245,158,11,.36);
    background:rgba(245,158,11,.10);
}

.docs-code-grid{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.docs-stack-steps{
    margin-top:18px;
    display:grid;
    gap:12px;
}

.docs-step-card{
    border:1px solid var(--oopsie-border);
    border-radius:18px;
    overflow:hidden;
    background:rgba(10,13,18,.78);
    position:relative;
}

.docs-step-card__head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:14px 54px 10px 14px;
    border-bottom:1px solid var(--oopsie-border);
}

.docs-step-marker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:42px;
    padding:0 8px;
    border-radius:12px;
    border:1px solid rgba(255,123,22,.22);
    background:rgba(255,123,22,.12);
    color:#ffb36b;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
}

.docs-step-copy{
    flex:1 1 auto;
    min-width:0;
}

.docs-step-copy strong{
    display:block;
    color:var(--oopsie-text);
    font-size:.98rem;
}

.docs-step-copy small{
    display:block;
    margin-top:4px;
    color:var(--oopsie-muted);
    font-size:.72rem;
    line-height:1.4;
}

.docs-code-card{
    border:1px solid var(--oopsie-border);
    border-radius:16px;
    overflow:hidden;
    background:rgba(10,13,18,.78);
    position:relative;
}

.docs-code-card__head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 54px 12px 14px;
    border-bottom:1px solid var(--oopsie-border);
}

.docs-code-card__head strong{
    color:var(--oopsie-text);
    font-size:.9rem;
}

.docs-code-card__head small{
    display:block;
    margin-top:4px;
    color:var(--oopsie-muted);
    font-size:.72rem;
    line-height:1.4;
}

.docs-code-card__hint{
    padding:10px 14px 0;
    color:var(--oopsie-muted);
    font-size:.78rem;
    line-height:1.45;
}

.docs-copy-btn{
    position:absolute;
    top:10px;
    right:10px;
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:rgba(255,255,255,.04);
    color:var(--oopsie-muted, rgba(255,255,255,.72));
    font-size:0;
    transition:.18s ease;
    z-index:2;
}

.docs-copy-btn:hover{
    background:rgba(255,255,255,.08);
    color:var(--oopsie-text, rgba(255,255,255,.95));
    border-color:rgba(255,255,255,.14);
}

.docs-copy-btn.is-copied{
    background:rgba(34,197,94,.12);
    color:#86efac;
    border-color:rgba(34,197,94,.24);
}

.docs-copy-btn::before{
    content:"⧉";
    font-size:12px;
    line-height:1;
}

.docs-code-card pre{
    margin:0;
    padding:22px 22px 22px 28px;
    color:#ffffff !important;
    font-size:.83rem;
    line-height:1.72;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border-left:3px solid rgba(255,123,22,.10);
}

.docs-code-card pre code{
    color:#ffffff !important;
    background:transparent !important;
    display:block;
    white-space:inherit;
    opacity:1 !important;
    -webkit-text-fill-color:#ffffff !important;
    text-shadow:0 0 1px rgba(255,255,255,.18);
}

.docs-note{
    margin-top:14px;
    padding:14px 16px;
    border:1px solid rgba(255,123,22,.18);
    border-radius:16px;
    background:rgba(255,123,22,.06);
}

.docs-note strong{
    display:block;
    color:#ffb36b;
    font-size:.82rem;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.docs-note p{
    margin:8px 0 0;
    color:var(--oopsie-text);
    line-height:1.6;
}

:root[data-theme="light"] .docs-hero,
:root[data-theme="light"] .docs-section{
    background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,251,255,.98));
    border-color:rgba(15,23,42,.12);
}

:root[data-theme="light"] .docs-hero-stat,
:root[data-theme="light"] .docs-quickstart article,
:root[data-theme="light"] .docs-sidebar__card,
:root[data-theme="light"] .docs-stack-card,
:root[data-theme="light"] .docs-stack-meta,
:root[data-theme="light"] .docs-inline-card{
    background:rgba(255,255,255,.76);
    border-color:rgba(15,23,42,.10);
}

:root[data-theme="light"] .docs-code-card{
    background:#0f172a;
    border-color:rgba(15,23,42,.12);
}

:root[data-theme="light"] .docs-step-card{
    background:#0f172a;
    border-color:rgba(15,23,42,.12);
}

:root[data-theme="light"] .docs-code-card pre{
    color:#ffffff !important;
}

:root[data-theme="light"] .docs-code-card pre code{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

@media (max-width: 1100px){
    .docs-hero,
    .docs-layout,
    .docs-code-grid{
        grid-template-columns:1fr;
    }

    .docs-sidebar__card{
        position:static;
    }

    .docs-stack-card__head{
        flex-direction:column;
    }

    .docs-stack-meta{
        min-width:0;
        width:100%;
    }

    .docs-stack-inline-meta{
        grid-template-columns:1fr;
    }
}

@media (max-width: 700px){
    .docs-shell{
        padding:92px 14px 64px;
        gap:18px;
    }

    .docs-hero,
    .docs-section{
        border-radius:20px;
    }

    .docs-hero{
        gap:18px;
        padding:18px;
    }

    .docs-eyebrow{
        padding:6px 10px;
        font-size:.66rem;
    }

    .docs-hero h1{
        font-size:clamp(1.65rem, 8vw, 2.15rem);
        line-height:1.08;
        letter-spacing:-.02em;
    }

    .docs-hero p,
    .docs-section__head p,
    .docs-quickstart p,
    .docs-stack-card__head p,
    .docs-note p{
        font-size:.92rem;
        line-height:1.55;
    }

    .docs-hero__actions{
        gap:10px;
        margin-top:18px;
    }

    .docs-hero__actions .btn{
        width:100%;
    }

    .docs-hero__panel{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .docs-hero-stat{
        padding:12px 10px;
        border-radius:14px;
    }

    .docs-hero-stat strong{
        font-size:1.45rem;
    }

    .docs-section{
        padding:18px;
    }

    .docs-section__head h2{
        font-size:1.35rem;
        line-height:1.15;
    }

    .docs-section__head p{
        margin-top:6px;
    }

    .docs-quickstart{
        margin-top:14px;
        gap:10px;
    }

    .docs-quickstart article{
        padding:14px;
        border-radius:16px;
    }

    .docs-quickstart span{
        width:30px;
        height:30px;
        font-size:.78rem;
    }

    .docs-layout{
        margin-top:14px;
        gap:12px;
    }

    .docs-sidebar{
        overflow:hidden;
    }

    .docs-sidebar__card{
        position:static;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        padding:12px;
    }

    .docs-sidebar__card strong{
        font-size:.82rem;
        letter-spacing:.06em;
    }

    .docs-sidebar__links{
        display:flex;
        gap:8px;
        overflow-x:auto;
        padding-bottom:2px;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    .docs-sidebar__links::-webkit-scrollbar{
        display:none;
    }

    .docs-sidebar__links a{
        flex:0 0 auto;
        align-items:center;
        min-width:132px;
        padding:10px 12px;
    }

    .docs-sidebar__links a span{
        display:block;
        font-size:.9rem;
        line-height:1.15;
        white-space:nowrap;
    }

    .docs-sidebar__links small{
        display:none;
    }

    .docs-stack-card{
        padding:16px;
        border-radius:18px;
    }

    .docs-stack-card__head{
        gap:12px;
    }

    .docs-stack-card__head h3{
        margin-top:8px;
        font-size:1.15rem;
        line-height:1.15;
    }

    .docs-stack-card__head p{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        margin-top:6px;
    }

    .docs-stack-meta{
        padding:12px;
        border-radius:14px;
    }

    .docs-stack-meta small{
        font-size:.6rem;
    }

    .docs-stack-inline-meta{
        margin-top:12px;
    }

    .docs-inline-card{
        padding:11px 12px;
    }

    .docs-chip-list{
        margin-top:8px;
        gap:6px;
    }

    .docs-chip-list span{
        min-height:26px;
        padding:0 9px;
        font-size:.72rem;
    }

    .docs-code-grid{
        margin-top:14px;
        gap:10px;
    }

    .docs-stack-steps{
        margin-top:14px;
        gap:10px;
    }

    .docs-step-card__head{
        padding:12px 50px 9px 12px;
    }

    .docs-step-marker{
        min-width:36px;
        height:36px;
        border-radius:10px;
        font-size:.7rem;
    }

    .docs-step-copy strong{
        font-size:.9rem;
    }

    .docs-step-copy small{
        font-size:.66rem;
    }

    .docs-code-card__head{
        padding:11px 50px 11px 12px;
        align-items:flex-start;
    }

    .docs-code-card__hint{
        padding:9px 12px 0;
        font-size:.72rem;
    }

    .docs-code-card__head strong{
        font-size:.82rem;
    }

    .docs-code-card__head small{
        margin-top:3px;
        font-size:.66rem;
        line-height:1.35;
    }

    .docs-copy-btn{
        top:8px;
        right:8px;
        width:26px;
        height:26px;
    }

    .docs-code-card pre{
        padding:18px 16px 18px 20px;
        font-size:.74rem;
        line-height:1.55;
    }

    .docs-note{
        margin-top:12px;
        padding:12px 13px;
        border-radius:14px;
    }

    .docs-quickstart{
        grid-template-columns:1fr;
    }
}