:root{
    --accent:#5b8def;
    --card-bg:#12141a;
    --card-border:#242835;
    --text:#e9ebf1;
    --text-dim:#9aa1b2;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:#0b0c10;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color:var(--text);
    padding:60px 24px;
  }
 
  .carousel{
    position:relative;
    max-width:920px;
    margin:0 auto;
  }
 
  .carousel-viewport{
    overflow:hidden;
  }
 
  .carousel-track{
    display:flex;
    gap:20px;
    will-change:transform;
    transition:transform .45s cubic-bezier(.22,.68,0,1.01);
    cursor:grab;
  }
  .carousel-track.dragging{
    transition:none;
    cursor:grabbing;
  }
 
  .build-card{
    flex:0 0 calc(33.333% - 14px);
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:14px;
    padding:0 0 24px;
    overflow:hidden;
    min-width:220px;
  }
 
  .build-image{
    position:relative;
    width:100%;
    height:150px;
    margin-bottom:20px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .build-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .build-image svg{
    width:44px;
    height:44px;
    position:relative;
    z-index:1;
    opacity:.85;
  }
  .build-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 55%, var(--card-bg) 100%);
  }
 
  .build-card .build-tag,
  .build-card h3,
  .build-card .build-desc,
  .build-card .build-stack{
    margin-left:24px;
    margin-right:24px;
  }
 
  .build-tag{
    display:inline-block;
    font-size:12px;
    color:var(--accent);
    background:rgba(91,141,239,0.12);
    padding:4px 10px;
    border-radius:20px;
    margin-top:0;
    margin-bottom:14px;
  }
 
  .build-card h3{
    margin:0 0 8px;
    font-size:19px;
    font-weight:600;
  }
 
  .build-desc{
    margin:0 0 14px;
    font-size:14px;
    line-height:1.5;
    color:var(--text-dim);
  }
 
  .build-stack{
    margin:0;
    font-size:12.5px;
    color:var(--text-dim);
    border-top:1px solid var(--card-border);
    padding-top:12px;
  }
 
  .carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--card-border);
    background:#181b22;
    color:var(--text);
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s, border-color .2s;
    z-index:2;
  }
  .carousel-btn:hover{
    background:#20242e;
    border-color:var(--accent);
  }
  .carousel-btn:disabled{
    opacity:.3;
    cursor:default;
  }
  .carousel-btn:disabled:hover{
    background:#181b22;
    border-color:var(--card-border);
  }
  .carousel-btn.prev{ left:-52px; }
  .carousel-btn.next{ right:-52px; }
 
  .carousel-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:24px;
  }
  .carousel-dots button{
    width:8px;
    height:8px;
    border-radius:50%;
    border:none;
    background:var(--card-border);
    cursor:pointer;
    padding:0;
    transition:background .2s, transform .2s;
  }
  .carousel-dots button.active{
    background:var(--accent);
    transform:scale(1.3);
  }
 
  @media (max-width: 760px){
    .build-card{ flex:0 0 calc(50% - 10px); }
    .carousel-btn{ display:none; }
  }
  @media (max-width: 480px){
    .build-card{ flex:0 0 100%; }
  }