:root{
      --bg:#0a0a0a;--bg2:#121212;--card:rgba(255,255,255,.05);--border:rgba(255,255,255,.12);--text:#fff;--muted:#b0b0b0;--accent:#ff0040;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);}
    
    /* Ambient animated gradient background */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        45deg,
        #0a0a0a 0%,
        #1a0000 25%,
        #330000 50%,
        #1a0000 75%,
        #0a0a0a 100%
      );
      background-size: 400% 400%;
      animation: ambientGradient 20s ease-in-out infinite;
      z-index: -1;
    }
    
    @keyframes ambientGradient {
      0% {
        background-position: 0% 50%;
      }
      25% {
        background-position: 100% 50%;
      }
      50% {
        background-position: 100% 100%;
      }
      75% {
        background-position: 0% 100%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
    
    /* Additional subtle red glow effect */
    body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(
        circle at 30% 20%,
        rgba(255, 0, 64, 0.03) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 70% 80%,
        rgba(255, 0, 64, 0.02) 0%,
        transparent 50%
      );
      animation: ambientGlow 15s ease-in-out infinite alternate;
      z-index: -1;
    }
    
    @keyframes ambientGlow {
      0% {
        opacity: 0.3;
        transform: scale(1);
      }
      100% {
        opacity: 0.7;
        transform: scale(1.1);
      }
    }
    a{color:inherit}
    /* Nav */
    .nav{display:flex;gap:24px;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:linear-gradient(180deg,rgba(10,10,10,.95),rgba(10,10,10,.75));backdrop-filter:saturate(140%) blur(6px);z-index:50}
    .brand{font-weight:900;letter-spacing:-.02em}
    .brand b{color:var(--accent)}
    .nav a{opacity:.85;text-decoration:none}
    .nav a:hover{opacity:1}
    .nav-links{display:flex;gap:16px;flex-wrap:wrap}
    .pill{background:linear-gradient(135deg,var(--accent),#cc0032);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none}
    /* Sections */
    section{padding:56px 24px;max-width:1600px;margin:0 auto}
    .hero{min-height:60vh;display:grid;place-items:center;text-align:center}
    .hero h1{font-size:clamp(32px,6vw,72px);margin:0 0 8px;text-shadow:0 0 30px rgba(255,0,64,.25)}
    .hero p{color:var(--muted);font-size:clamp(16px,2vw,20px);margin:0 auto 24px;max-width:820px}
    .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
    .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px}
    .grid{display:grid;gap:16px}
    .grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
    .grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
    h2{font-size:clamp(24px,3vw,36px);margin:0 0 16px}
    h3{margin:0 0 8px}
    .muted{color:var(--muted)}
    .btn{display:inline-block;border:1px solid var(--border);padding:10px 14px;border-radius:10px;text-decoration:none}
    .btn:hover{border-color:var(--accent)}
    .accent{color:var(--accent)}
    table{width:100%;border-collapse:collapse}
    th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
    th{background:rgba(255,0,64,.1)}
    .right{float:right}
    /* Builder */
    .builder-layout{display:grid;grid-template-columns:2fr 1fr;gap:16px}
    @media (max-width:900px){.builder-layout{grid-template-columns:1fr}}
    .summary{position:sticky;top:84px}
    .price{font-weight:900;font-size:22px}
    .tag{display:inline-block;font-size:12px;border:1px solid var(--border);padding:2px 8px;border-radius:999px;margin-right:6px;color:var(--muted)}
    /* Builder panel sizing & compact option cards */
    .builder-card{display:flex;flex-direction:column;height:70vh}
    #options{flex:1;overflow:auto}
    #options .btn{padding:6px 10px;border-radius:8px}
    
    /* Category Navigation Pills */
    .category-pills {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .category-pill {
      background: #333;
      color: white;
      padding: 8px 16px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1px solid var(--border);
    }
    
    .category-pill:hover {
      background: #444;
      border-color: var(--accent);
    }
    
    .category-pill.active {
      background: var(--accent);
      color: black;
      border-color: var(--accent);
    }
    
    /* Summary mode - expand summary to full width */
    .builder-layout.summary-mode .builder-card {
      display: none;
    }
    
    .builder-layout.summary-mode .summary {
      grid-column: 1 / -1;
      max-width: 800px;
      margin: 0 auto;
    }
    .options-header{display:flex;gap:12px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg2);z-index:1}
    .option-row{display:flex;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border)}
    .option-row.selected{background:rgba(255,0,64,.08);border-left:2px solid var(--accent)}
    .col{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
    .col-name{flex:1}
    .col-visit{width:120px;flex:0 0 120px;display:flex;justify-content:flex-start}
    .col-price{width:140px;flex:0 0 140px}
    .col-action{width:120px;flex:0 0 120px;display:flex;justify-content:flex-end}
    .price-sort{cursor:pointer}
    /* Category chooser (Step 1) */
    .category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
    .category-tile{display:grid;place-items:center;text-align:center;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--border);cursor:pointer}
    .category-tile:hover{border-color:var(--accent)}
    .category-tile .icon{font-size:28px;margin-bottom:6px}
    .category-tile .label{font-weight:600}
    /* Explainer slideshow */
    .explainer-view{width:100%;background:#fff;border-radius:12px;display:grid;place-items:center;aspect-ratio:1/1;position:relative;overflow:hidden}
    .explainer-view img{width:100%;height:100%;object-fit:contain}
    .explainer-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;padding:8px}
    .explainer-btn{pointer-events:auto;background:rgba(0,0,0,.6);color:#fff;border:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
    .explainer-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;gap:6px;justify-content:center}
    .explainer-dot{width:8px;height:8px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid rgba(0,0,0,.4);cursor:pointer}
    .explainer-dot.active{background:var(--accent);border-color:var(--accent)}

    /* Explainer thumbnails grid */
    .explainer-thumbs-wrap{display:grid;place-items:center;min-height:200px}
    .explainer-thumbs{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:10px;margin-top:12px;max-width:560px;width:100%;margin-left:auto;margin-right:auto}
    .explainer-thumb{width:100%;aspect-ratio:1/1;background:#222;border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer}
    .explainer-thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .explainer-thumb.active{outline:2px solid var(--accent);outline-offset:2px}

    /* Pin explainer CTA to bottom of the info card */
    #explainerInfoCard{display:flex;flex-direction:column}
    #explainerInfoCard .explainer-cta{margin-top:auto}

    /* Basic setup category cards in place of images */
    .explainer-mini-card{display:grid;place-items:center;text-align:center;padding:14px;border:1px solid var(--border);background:var(--bg2);border-radius:12px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03)}
    .explainer-mini-card:hover{border-color:var(--accent);box-shadow:0 10px 26px rgba(255,0,64,.12), 0 0 0 1px var(--accent)}
    .explainer-mini-card .icon{font-size:20px}
    .explainer-mini-card .label{font-weight:800;margin-top:6px}

    /* Prebuilt cards (final slide) */
    .prebuilt-card{padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));}
    .prebuilt-card .title{font-weight:900;margin-bottom:6px;letter-spacing:-.01em}
    .prebuilt-card .price{font-weight:900;color:var(--accent);margin-bottom:10px}
    .prebuilt-card .actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
    .prebuilt-card .btn{padding:6px 10px;border-radius:8px;font-size:12px;line-height:1.2}
    .prebuilt-card .btn:hover{border-color:var(--accent)}

    /* Explainer detail view when a build is expanded */
    .explainer-detail{position:absolute;inset:0;background:var(--bg2);color:var(--text);overflow:auto;padding:16px;border-top:1px solid var(--border)}
    .explainer-detail .detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
    .explainer-detail .close{border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.04);padding:6px 10px;cursor:pointer;color:var(--text)}
    .explainer-detail .close:hover{border-color:var(--accent)}
    .explainer-detail .parts{display:grid;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:10px}
    .explainer-detail .part-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding:8px 0}
    .explainer-detail .part-row:last-child{border-bottom:none}

    /* New styles for comparison pills and boxes */
    .comparison-pills {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-bottom: 24px;
      padding: 12px 24px;
      background: var(--bg2);
      border-radius: 12px;
      border: 1px solid var(--border);
    }

    .pill-label {
      font-size: 14px;
      color: var(--muted);
      font-weight: 600;
    }

    .pill-container {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .comparison-layout {
      display: flex;
      gap: 24px;
      margin-top: 24px;
    }

    .comparison-box {
      flex: 1;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .box-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 16px;
    }

    .box-header h3 {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      color: var(--text);
    }

    .box-price {
      font-size: 28px;
      font-weight: 900;
      color: var(--accent);
      margin-left: 10px;
    }

    .box-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 18px;
    }

         .placeholder-text {
       margin-top: 20px;
     }

     .comparison-pill {
       background: var(--bg);
       color: var(--text);
       padding: 8px 16px;
       border-radius: 999px;
       font-weight: 600;
       font-size: 14px;
       cursor: pointer;
       transition: all 0.2s ease;
       border: 1px solid var(--border);
       white-space: nowrap;
     }

     .comparison-pill:hover {
       background: var(--bg2);
       border-color: var(--accent);
     }

     .comparison-pill.active {
       background: var(--accent);
       color: black;
       border-color: var(--accent);
     }

     .comparison-pill.selected-left {
       background: rgba(255, 0, 64, 0.2);
       border-color: var(--accent);
       color: var(--accent);
     }

     .comparison-pill.selected-right {
       background: rgba(0, 255, 255, 0.2);
       border-color: #00ffff;
       color: #00ffff;
     }

     .parts-list {
       width: 100%;
       max-height: 400px;
       overflow-y: auto;
       text-align: left;
     }

     .part-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 12px 0;
       border-bottom: 1px solid var(--border);
     }

     .part-item:last-child {
       border-bottom: none;
     }

     .part-name {
       flex: 1;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       margin-right: 12px;
       font-weight: 500;
     }

     .part-info {
       flex: 1;
       overflow: hidden;
     }

     .part-price {
       font-weight: 700;
       color: var(--accent);
       flex-shrink: 0;
     }

     .part-category {
       font-size: 12px;
       color: var(--muted);
       margin-bottom: 4px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
     }

     .comparison-box.selected {
       border-color: var(--accent);
       box-shadow: 0 0 0 1px var(--accent);
     }

     .comparison-box.selected .box-header h3 {
       color: var(--accent);
     }

     @media (max-width: 768px) {
       .comparison-layout {
         flex-direction: column;
         gap: 16px;
       }
       
       .comparison-pills {
         flex-direction: column;
         align-items: flex-start;
         gap: 16px;
       }
       
       .pill-container {
         width: 100%;
         justify-content: flex-start;
       }
     }