:root{
    --bg:#0A0B14;
    --bg-soft:#10111E;
    --glass:rgba(255,255,255,0.045);
    --glass-strong:rgba(255,255,255,0.075);
    --glass-border:rgba(255,255,255,0.09);
    --text:#F1F0F8;
    --muted:#8B8AA3;
    --accent:#7C5CFC;
    --accent-soft:rgba(124,92,252,0.16);
    --mint:#33E6B3;
    --mint-soft:rgba(51,230,179,0.14);
    --amber:#FFB86B;
    --radius:18px;
    --shadow:0 20px 60px -20px rgba(0,0,0,0.6);
  }
  html{ font-size:100%; }
  html[data-theme="light"]{
    --bg:#EFEFF6;
    --bg-soft:#E5E4F1;
    --glass:rgba(20,18,40,0.045);
    --glass-strong:rgba(20,18,40,0.07);
    --glass-border:rgba(20,18,40,0.1);
    --text:#191825;
    --muted:#5C5A72;
    --accent:#6845E0;
    --accent-soft:rgba(104,69,224,0.12);
    --mint:#0FA57E;
    --mint-soft:rgba(15,165,126,0.12);
    --shadow:0 20px 50px -24px rgba(30,20,60,0.25);
  }
  /* Follows the OS/browser color scheme automatically until the person picks a theme manually (JS then sets data-theme and this stops applying) */
  @media (prefers-color-scheme: light){
    html:not([data-theme]){
      --bg:#EFEFF6;
      --bg-soft:#E5E4F1;
      --glass:rgba(20,18,40,0.045);
      --glass-strong:rgba(20,18,40,0.07);
      --glass-border:rgba(20,18,40,0.1);
      --text:#191825;
      --muted:#5C5A72;
      --accent:#6845E0;
      --accent-soft:rgba(104,69,224,0.12);
      --mint:#0FA57E;
      --mint-soft:rgba(15,165,126,0.12);
      --shadow:0 20px 50px -24px rgba(30,20,60,0.25);
    }
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:
      radial-gradient(1000px 500px at 85% -10%, var(--accent-soft), transparent 60%),
      radial-gradient(800px 500px at 5% 15%, var(--mint-soft), transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing:antialiased;
    transition:background .4s ease, color .3s ease;
    min-height:100vh;
  }
  .container{max-width:min(1080px, 94vw);margin:0 auto;padding:0 clamp(16px, 3vw, 24px);}
  .mono{font-family:'JetBrains Mono', monospace;}
  .display{font-family:'Sora', sans-serif;}
  a{color:inherit;}
  button{font-family:inherit;cursor:pointer;}
  ::selection{background:var(--accent);color:#fff;}

  /* ---------- Nav ---------- */
  .nav-wrap{
    position:sticky; top:16px; z-index:50;
    display:flex; justify-content:center;
    padding:0 16px; margin-bottom:8px;
  }
  nav.pill{
    width:100%; max-width:760px;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:10px 10px 10px 20px;
    background:var(--glass-strong);
    border:1px solid var(--glass-border);
    border-radius:999px;
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:var(--shadow);
  }
  .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px;}
  .brand .dot{
    width:10px;height:10px;border-radius:3px;
    background:linear-gradient(135deg,var(--accent),var(--mint));
    box-shadow:0 0 14px var(--accent);
  }
  .nav-links{display:flex;align-items:center;gap:4px;}
  .nav-links a{
    padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;
    color:var(--muted); text-decoration:none; transition:.2s;
  }
  .nav-links a:hover{color:var(--text); background:var(--glass);}
  #theme-toggle{
    width:38px;height:38px;border-radius:50%;
    border:1px solid var(--glass-border);
    background:var(--glass);
    display:flex;align-items:center;justify-content:center;
    font-size:16px; transition:.2s;
  }
  #theme-toggle:hover{background:var(--glass-strong);}
  .nav-actions{display:flex; align-items:center; gap:8px;}
  .nav-wrap.scrolled nav.pill{ box-shadow:0 24px 50px -18px rgba(0,0,0,.55); border-color:rgba(124,92,252,.25); }

  #menu-toggle{
    display:none; width:38px;height:38px;border-radius:50%;
    border:1px solid var(--glass-border); background:var(--glass);
    align-items:center; justify-content:center; font-size:16px;
  }
  .mobile-menu{
    display:none; position:fixed; top:76px; left:16px; right:16px; z-index:49;
    background:var(--glass-strong); border:1px solid var(--glass-border);
    border-radius:16px; padding:10px; backdrop-filter:blur(18px) saturate(140%);
    box-shadow:var(--shadow); flex-direction:column; gap:2px;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{
    padding:12px 14px; border-radius:10px; font-size:14.5px; font-weight:500;
    color:var(--text); text-decoration:none;
  }
  .mobile-menu a:hover{background:var(--glass);}

  /* ---------- Hero ---------- */
  .hero{
    padding:clamp(40px, 8vw, 72px) 0 clamp(24px, 4vw, 40px);
    display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px, 4vw, 48px); align-items:center;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; color:var(--mint); font-weight:600;
    background:var(--mint-soft); border:1px solid rgba(51,230,179,.25);
    padding:6px 12px; border-radius:999px; margin-bottom:20px;
  }
  .eyebrow::before{content:"●"; font-size:8px;}
  h2.headline{
    font-size:clamp(2.1rem, 4vw, 3.1rem); line-height:1.08; margin:0 0 18px;
    font-weight:700; letter-spacing:-0.5px;
  }
  h2.headline .accent{
    background:linear-gradient(135deg,var(--accent),var(--mint));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .lede{color:var(--muted); font-size:16px; line-height:1.65; max-width:46ch; margin:0 0 28px;}
  .badges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;}
  .badge{
    font-size:12.5px; padding:6px 12px; border-radius:999px;
    background:var(--glass); border:1px solid var(--glass-border); color:var(--muted);
  }
  .source-box{
    display:flex; align-items:center; gap:10px;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:14px; padding:10px 10px 10px 16px;
    box-shadow:var(--shadow);
  }
  #source-url{
    flex:1; font-size:13px; color:var(--mint); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
  }
  #copy-btn{
    background:var(--text); color:var(--bg); border:none;
    padding:9px 16px; border-radius:10px; font-size:13.5px; font-weight:600;
    transition:.2s; white-space:nowrap;
  }
  #copy-btn:hover{opacity:.85;}
  #copy-btn.copied{background:var(--mint); color:#04241a;}
  .hero-actions{display:flex; gap:10px; margin-top:14px;}
  .btn-primary{
    background:linear-gradient(135deg,var(--accent),#5A3FE0);
    color:#fff; border:none; padding:12px 20px; border-radius:12px;
    font-weight:600; font-size:14px; box-shadow:0 12px 30px -10px rgba(124,92,252,.55);
    transition:transform .2s;
  }
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{
    background:transparent; border:1px solid var(--glass-border); color:var(--text);
    padding:12px 18px; border-radius:12px; font-weight:600; font-size:14px;
  }

  /* ---------- Terminal (signature element) ---------- */
  .terminal{
    background:var(--bg-soft); border:1px solid var(--glass-border);
    border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  }
  .terminal-bar{
    display:flex; align-items:center; gap:8px; padding:12px 16px;
    background:var(--glass); border-bottom:1px solid var(--glass-border);
  }
  .terminal-bar span{width:10px;height:10px;border-radius:50%;display:inline-block;}
  .terminal-bar .r{background:#FF5F57;} .terminal-bar .y{background:#FEBC2E;} .terminal-bar .g{background:#28C840;}
  .terminal-title{margin-left:8px; font-size:12px; color:var(--muted);}
  .terminal-body{
    padding:20px 18px; font-size:13px; line-height:1.9; min-height:220px;
    color:#C9C8DA;
  }
  html[data-theme="light"] .terminal-body{color:#3C3A55;}
  @media (prefers-color-scheme: light){
    html:not([data-theme]) .terminal-body{color:#3C3A55;}
  }
  .terminal-body .prompt{color:var(--mint);}
  .terminal-body .path{color:var(--accent);}
  .terminal-body .ok{color:var(--mint);}
  .terminal-body .muted-line{color:var(--muted);}
  .caret{display:inline-block; width:7px; height:14px; background:var(--mint); vertical-align:-2px; animation:blink 1s step-end infinite;}
  @keyframes blink{50%{opacity:0;}}

  /* ---------- Stats ---------- */
  .stats{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:8px 0 56px;
  }
  .stat{
    background:var(--glass); border:1px solid var(--glass-border); border-radius:14px;
    padding:18px 20px; text-align:left;
  }
  .stat .num{font-size:26px; font-weight:700; font-family:'Sora',sans-serif;}
  .stat .lbl{font-size:12.5px; color:var(--muted); margin-top:2px;}

  /* ---------- Packages ---------- */
  .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; flex-wrap:wrap;}
  .section-head h3{font-size:clamp(20px, 2.2vw, 24px); margin:0; font-family:'Sora',sans-serif;}
  .section-head p{margin:4px 0 0; color:var(--muted); font-size:14px;}

  .toolbar{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap;}
  .search-box{
    flex:1; min-width:220px; display:flex; align-items:center; gap:8px;
    background:var(--glass); border:1px solid var(--glass-border); border-radius:12px;
    padding:10px 14px;
  }
  .search-box input{
    border:none; background:transparent; outline:none; color:var(--text);
    font-size:14px; width:100%;
  }
  .search-box input::placeholder{color:var(--muted);}
  .filters{display:flex; gap:8px; flex-wrap:wrap;}
  .chip{
    padding:9px 14px; border-radius:999px; font-size:13px; font-weight:500;
    background:var(--glass); border:1px solid var(--glass-border); color:var(--muted);
    transition:.2s;
  }
  .chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}

  .sort-select{
    background:var(--glass); border:1px solid var(--glass-border); color:var(--text);
    padding:9px 14px; border-radius:12px; font-size:13px; font-weight:500; cursor:pointer;
  }
  .sort-select:focus-visible{outline:2px solid var(--mint);}

  .pkg-compat{display:flex; gap:6px; flex-wrap:wrap;}
  .compat-badge{
    font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:999px;
    background:var(--glass); border:1px solid var(--glass-border); color:var(--muted);
    white-space:nowrap;
  }
  .compat-badge.rootless{color:var(--mint); border-color:rgba(51,230,179,.3); background:var(--mint-soft);}
  .compat-badge.rootful{color:var(--amber); border-color:rgba(255,184,107,.3); background:rgba(255,184,107,.1);}
  .compat-badge.roothide{color:var(--accent); border-color:rgba(124,92,252,.3); background:var(--accent-soft);}

  .package-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:16px;}
  .pkg-card{
    background:var(--glass); border:1px solid var(--glass-border); border-radius:16px;
    padding:18px; display:flex; flex-direction:column; gap:12px;
    transition:transform .2s, border-color .2s, box-shadow .2s;
  }
  .pkg-card:hover{transform:translateY(-3px); border-color:rgba(124,92,252,.4); box-shadow:0 16px 40px -18px rgba(124,92,252,.35);}
  .pkg-top{display:flex; gap:12px; align-items:flex-start;}
  .pkg-icon{
    width:46px; height:46px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:16px; color:#fff;
  }
  .pkg-name{font-weight:600; font-size:15px; line-height:1.3;}
  .pkg-meta{font-size:12px; color:var(--muted); margin-top:2px;}
  .pkg-desc{font-size:13px; color:var(--muted); line-height:1.55; flex:1;}
  .pkg-footer{display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
  .pkg-price{font-size:12.5px; color:var(--mint); font-weight:600;}
  .pkg-get{
    background:var(--text); color:var(--bg); border:none; padding:8px 16px;
    border-radius:9px; font-size:12.5px; font-weight:600; transition:.2s;
  }
  .pkg-get:hover{opacity:.85;}
  .empty-state{
    grid-column:1/-1; text-align:center; padding:50px 20px; color:var(--muted);
    border:1px dashed var(--glass-border); border-radius:16px;
  }

  .schema-help{
    margin-top:22px; border:1px solid var(--glass-border); border-radius:14px;
    padding:14px 18px; background:var(--glass);
  }
  .schema-help summary{
    cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text);
    list-style:none; display:flex; align-items:center; gap:6px;
  }
  .schema-help summary::before{ content:"▸"; color:var(--muted); transition:transform .2s; }
  .schema-help[open] summary::before{ transform:rotate(90deg); }
  .schema-help summary::-webkit-details-marker{ display:none; }
  .schema-help p{ font-size:13px; color:var(--muted); line-height:1.6; }
  .schema-block{
    background:var(--bg-soft); border:1px solid var(--glass-border); border-radius:10px;
    padding:14px 16px; font-size:12px; line-height:1.7; overflow-x:auto; color:#C9C8DA;
  }
  html[data-theme="light"] .schema-block{ color:#3C3A55; }
  @media (prefers-color-scheme: light){
    html:not([data-theme]) .schema-block{ color:#3C3A55; }
  }

  footer{
    margin-top:70px; padding:30px 0 50px; border-top:1px solid var(--glass-border);
    color:var(--muted); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }
  footer a{color:var(--muted); text-decoration:none;}
  footer a:hover{color:var(--text);}

  @media (max-width:840px){
    .hero{grid-template-columns:1fr; padding-top:40px;}
    .stats{grid-template-columns:1fr;}
    nav.pill{border-radius:20px;}
    .nav-links{display:none;}
    #menu-toggle{display:flex;}
  }
  @media (prefers-reduced-motion: reduce){
    .caret{animation:none;}
    .pkg-card, .btn-primary{transition:none;}
    .pkg-card{animation:none !important; opacity:1 !important; transform:none !important;}
  }
  :focus-visible{outline:2px solid var(--mint); outline-offset:2px;}

  /* ---------- Card entrance + category chip ---------- */
  .pkg-card{ opacity:0; transform:translateY(14px); animation:pkgIn .5s ease forwards; }
  @keyframes pkgIn{ to{ opacity:1; transform:translateY(0); } }
  .pkg-section-chip{
    align-self:flex-start; font-size:11px; font-weight:600; padding:3px 9px;
    border-radius:999px; color:#fff; letter-spacing:.2px;
  }

  /* ---------- Skeleton loader ---------- */
  .skeleton-card{
    background:var(--glass); border:1px solid var(--glass-border); border-radius:16px;
    padding:18px; display:flex; flex-direction:column; gap:12px; overflow:hidden; position:relative;
  }
  .skeleton-line, .skeleton-icon{
    background:linear-gradient(90deg, var(--glass) 25%, var(--glass-strong) 50%, var(--glass) 75%);
    background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite; border-radius:8px;
  }
  .skeleton-icon{width:46px; height:46px; border-radius:12px;}
  .skeleton-line.title{height:14px; width:70%;}
  .skeleton-line.meta{height:10px; width:50%;}
  .skeleton-line.desc{height:11px; width:100%;}
  .skeleton-line.desc.short{width:65%;}
  @keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
  @media (prefers-reduced-motion: reduce){ .skeleton-line, .skeleton-icon{animation:none;} }

  /* ---------- Result count ---------- */
  .result-count{font-size:12.5px; color:var(--muted); margin:-8px 0 16px;}

  /* ---------- File type badge (Files section) ---------- */
  .file-badge{
    width:46px; height:46px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:10.5px; color:#fff; letter-spacing:.3px;
    text-transform:uppercase; text-align:center; padding:2px;
  }