.docs-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; align-items: start; min-width: 0; }
.docs-sidebar { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow: auto; padding: 1.4rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 1.6rem; background: rgb(255 255 255 / 3%); scrollbar-width: thin; }
.docs-sidebar h1 { margin: .8rem 0 .65rem; font-size: 2rem; line-height: 1.1; }
.docs-sidebar > p { margin: 0 0 1.2rem; color: rgb(255 255 255 / 62%); font-size: .88rem; line-height: 1.65; }
.toc { display: grid; gap: .45rem; }
.toc a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .75rem; border: 1px solid rgb(255 255 255 / 6%); border-radius: .75rem; background: rgb(255 255 255 / 2%); color: rgb(255 255 255 / 74%); font-size: .82rem; }
.toc a:hover, .toc a:focus-visible { border-color: rgb(255 41 66 / 50%); color: #fff; }
.toc small { color: rgb(255 255 255 / 35%); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; }
.api-list { display: grid; gap: 2rem; min-width: 0; max-width: 100%; }
.api-card { min-width: 0; max-width: 100%; scroll-margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgb(255 255 255 / 12%); border-radius: 1.6rem; background: rgb(255 255 255 / 3%); }
.api-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.api-card-heading h2 { margin: .45rem 0 0; font-size: 1.65rem; }
.api-card-heading > a { color: rgb(255 255 255 / 45%); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.summary { margin: 1rem 0 1.25rem; color: rgb(255 255 255 / 68%); line-height: 1.75; }
.api-options { margin: 0 0 1.25rem; padding: 1rem; border: 1px solid rgb(255 255 255 / 9%); border-radius: 1rem; background: rgb(0 0 0 / 25%); }
.api-options h3, .api-methods h3 { margin: 0 0 .7rem; color: rgb(255 255 255 / 58%); font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; }
.api-options ul { display: grid; gap: .55rem; margin: 0; padding-left: 1.1rem; color: rgb(255 255 255 / 72%); font-size: .85rem; line-height: 1.55; }
.api-options li::marker { color: #ff2942; }
.api-methods { margin-top: 1.25rem; }
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.method-card { padding: 1rem; border: 1px solid rgb(255 255 255 / 9%); border-radius: .9rem; background: rgb(0 0 0 / 22%); }
.method-card h4 { margin: 0; font-size: .88rem; }
.method-card p { margin: .45rem 0 0; color: rgb(255 255 255 / 65%); font-size: .82rem; line-height: 1.6; }
.read-more { gap: .5rem; margin-top: 1.25rem; }
@media (max-width: 840px) { .docs-layout { grid-template-columns: minmax(0, 1fr); } .docs-sidebar { position: static; max-height: none; } .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .toc, .method-grid { grid-template-columns: 1fr; } .api-card-heading { align-items: flex-start; flex-direction: column; } }