/* A single row that grows with the development catalog. No cloned cards. */
.development-carousel { --project-gap:24px; --project-width:calc((100% - 48px) / 3); }
.development-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.development-controls[hidden] { display:none; }
.development-hint { margin:0; color:var(--muted); font-size:12px; }
.development-navigation { display:flex; align-items:center; gap:10px; }
.development-position { font:500 12px var(--heading); font-variant-numeric:tabular-nums; color:var(--muted); margin-right:12px; white-space:nowrap; }
.development-position strong { color:var(--paper); font-weight:500; }
.development-arrow { display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid #626d50; border-radius:50%; color:var(--yellow); background:#1c251b; font:400 25px var(--body); transition:background .18s,color .18s,border-color .18s; }
.development-arrow:hover:not(:disabled) { background:var(--yellow); color:var(--bg); border-color:var(--yellow); }
.development-arrow:disabled { opacity:.3; cursor:default; }
.development-carousel .development-grid { display:flex; gap:var(--project-gap); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding:6px 0 12px; margin-top:-6px; }
.development-carousel .development-grid::-webkit-scrollbar { display:none; }
.development-carousel .development-card { flex:0 0 var(--project-width); width:var(--project-width); max-width:none; scroll-snap-align:start; scroll-snap-stop:always; }
.development-carousel .project-art:focus-visible { outline-offset:-4px; }
.development-carousel .development-grid:focus-visible { outline:2px solid var(--yellow); outline-offset:5px; border-radius:4px; }
.development-carousel .title-button:focus-visible,.development-carousel .inline-button:focus-visible { outline-offset:0; }
.cover-moe-pop .project-logo { height:44%; bottom:2%; }
.cover-ravenwood-files .project-logo { height:46%; bottom:2%; }
.cover-nebula-pusher .project-logo { height:54%; bottom:2%; }
.development-progress { height:2px; margin-top:18px; border-radius:2px; background:var(--line); overflow:hidden; }
.development-progress span { display:block; height:100%; background:var(--yellow); transform-origin:left; }
.development-progress[hidden] { display:none; }
@media(max-width:1100px) {
 .development-carousel { --project-gap:20px; --project-width:calc((100% - 20px) / 2); }
}
@media(max-width:600px) {
 .development-carousel { --project-gap:18px; --project-width:88%; }
 .development-controls { gap:8px; margin-bottom:18px; }
 .development-hint { max-width:110px; font-size:11px; }
 .development-navigation { gap:8px; }
 .development-position { margin-right:4px; font-size:11px; }
 .development-arrow { width:44px; height:44px; }
 .development-carousel .development-card h3 { font-size:23px; }
 .development-carousel .development-card p { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
 .development-arrow { transition:none; }
}