.docs-main{min-height:100vh;overflow-x:clip;background:var(--dc-bg);color:var(--dc-text)}
.docs-hero{padding-bottom:92px}
.docs-projects-section{min-height:54vh;padding-bottom:110px}
.docs-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.docs-project-card{position:relative;display:block;overflow:hidden;border:1px solid var(--dc-line);border-radius:16px;background:var(--dc-panel);color:var(--dc-text);text-decoration:none;box-shadow:0 12px 30px color-mix(in srgb,#000 14%,transparent);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
.docs-project-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--dc-accent) 30%,var(--dc-line));box-shadow:0 17px 36px color-mix(in srgb,#000 19%,transparent)}
.docs-project-card:focus-visible{outline:2px solid var(--dc-accent);outline-offset:3px}
.docs-project-banner{position:relative;display:grid;height:120px;place-items:center;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--dc-accent) 9%,var(--dc-soft)),color-mix(in srgb,var(--dc-accent) 2%,var(--dc-soft)))}
.docs-project-banner::before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--dc-text) 2.8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--dc-text) 2.8%,transparent) 1px,transparent 1px);background-size:24px 24px}
.docs-project-banner::after{content:"";position:absolute;width:190px;height:190px;border:1px solid color-mix(in srgb,var(--dc-accent) 9%,transparent);border-radius:50%}
.docs-project-icon{position:relative;z-index:1;display:grid;width:58px;height:58px;place-items:center;border:1px solid var(--dc-line);border-radius:14px;background:var(--dc-soft);color:var(--dc-accent);font:700 17px var(--dc-font);box-shadow:0 10px 26px color-mix(in srgb,#000 20%,transparent);transition:transform .2s,box-shadow .2s}
.docs-project-card:hover .docs-project-icon{transform:scale(1.03);box-shadow:0 12px 28px color-mix(in srgb,#000 24%,transparent)}
.docs-project-content{padding:20px}.docs-project-content h2{margin:0 0 16px;text-align:center;font-size:19px;font-weight:650;letter-spacing:-.025em;transition:color .25s}.docs-project-card:hover h2{color:color-mix(in srgb,var(--dc-accent) 76%,var(--dc-text))}
.docs-project-content ul{margin:0;padding:0;list-style:none}.docs-project-content li{display:flex;align-items:center;gap:9px;margin:7px 0;color:var(--dc-muted);font-size:11px}.docs-project-content li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--dc-accent)}.docs-project-content li:last-child{overflow:hidden;font-family:var(--dc-mono);text-overflow:ellipsis;white-space:nowrap}
.docs-project-button{display:flex;min-height:38px;align-items:center;justify-content:center;gap:8px;margin-top:19px;padding-top:17px;border-top:1px solid var(--dc-line);color:var(--dc-text);font-size:11px;transition:color .25s}.docs-project-button i{color:var(--dc-accent);font-style:normal}
.docs-state-card{cursor:default}

@media(max-width:900px){.docs-hero{padding-bottom:74px}.docs-projects{grid-template-columns:repeat(2,minmax(0,1fr))}.docs-project-button{min-height:44px}}
@media(max-width:620px){.docs-hero{padding-bottom:64px}.docs-projects-section{padding-bottom:78px}.docs-projects{grid-template-columns:1fr;gap:14px}}
@media(prefers-reduced-motion:reduce){.docs-project-card,.docs-project-icon{transition:none}}