@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');

.hc{
  --ink:#0B0B0A;
  --ink-soft:#616159;
  --paper:#FAFAF8;
  --surface:#FFFFFF;
  --line:#E6E5DE;
  --line-strong:#C9C8BE;
  --accent:#E8A419;
  --accent-deep:#7A5308;
  --accent-tint:#FCF1D8;
  --font-sans:'Inter',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.hc input,.hc button,.hc textarea{font-family:inherit;}
.hc a{color:var(--ink);}
.hc .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.hc .crumb{font-size:12.5px;color:var(--ink-soft);padding:16px 0 0;}
.hc .crumb a{color:var(--ink-soft);text-decoration:none;}
.hc .crumb a:hover{text-decoration:underline;}
.hc .crumb span{opacity:.5;padding:0 6px;}
.hc .hero{padding:22px 0 28px;}
.hc .hero h1{font-size:clamp(26px,3.6vw,34px);font-weight:700;margin:0 0 8px;letter-spacing:-.015em;color:var(--ink);}
.hc .hero .lede{max-width:560px;color:var(--ink-soft);font-size:15px;margin:0 0 22px;line-height:1.6;}
.hc .welcome{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin:26px 0 0;}
.hc .welcome p{max-width:760px;color:var(--ink-soft);font-size:14px;margin:0 0 12px;line-height:1.6;}
.hc .welcome p:last-child{margin-bottom:0;}
.hc .welcome p a{color:var(--ink);text-decoration:underline;}
.hc .search-shell{position:relative;max-width:640px;}
.hc .searchbar{position:relative;}
.hc .searchbar input{
  width:100%;font-size:16px;padding:14px 16px 14px 46px;
  border:1.5px solid var(--ink);border-radius:10px;background:var(--surface);color:var(--ink);
}
.hc .searchbar input:focus{outline:none;box-shadow:0 0 0 3px var(--accent-tint);}
.hc .searchbar .ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-soft);pointer-events:none;}
.hc .searchbar .clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:13px;padding:4px 8px;display:none;}
.hc .searchbar .clear.show{display:block;}
.hc .results-panel{
  position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--surface);
  border:1px solid var(--ink);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.14);
  z-index:50;max-height:min(70vh,560px);overflow-y:auto;display:none;
}
.hc .results-panel.open{display:block;}
.hc .results-panel .rp-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);position:sticky;top:0;background:var(--surface);}
.hc .results-panel .rp-empty{padding:28px 16px;text-align:center;color:var(--ink-soft);font-size:14px;}
.hc .rp-item{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:13px 16px;cursor:pointer;}
.hc .rp-item:last-child{border-bottom:none;}
.hc .rp-item:hover,.hc .rp-item.kbd-active{background:var(--paper);}
.hc .rp-item .rp-q{font-size:14.5px;font-weight:600;margin:0 0 3px;color:var(--ink);}
.hc .rp-item .rp-q mark{background:var(--accent-tint);color:var(--accent-deep);border-radius:3px;padding:0 1px;}
.hc .rp-item .rp-snippet{font-size:12.5px;color:var(--ink-soft);margin:0 0 5px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.hc .rp-item .rp-cat{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
.hc .filters{margin-top:16px;}
.hc .filter-group{margin-bottom:14px;}
.hc .filter-label{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:0 0 8px;}
.hc .pill-row{display:flex;gap:8px;flex-wrap:wrap;}
.hc .pill-row.scroll-x{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.hc .pill-row.scroll-x::-webkit-scrollbar{display:none;}
.hc .pill{
  flex-shrink:0;font-size:13px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap;
}
.hc .pill:hover{border-color:var(--ink);}
.hc .pill.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.hc .popular{margin:26px 0 8px;}
.hc .popular ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);}
.hc .popular li a{display:flex;justify-content:space-between;gap:10px;padding:11px 2px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);font-size:14px;}
.hc .popular li:nth-child(odd) a{border-right:1px solid var(--line);padding-right:16px;}
.hc .popular li:nth-child(even) a{padding-left:16px;}
.hc .popular li a:hover .arr{transform:translateX(2px);}
.hc .popular li a .arr{color:var(--ink-soft);transition:transform .12s;flex-shrink:0;}
.hc .layout{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;padding:36px 0 64px;}
.hc .sidebar{position:sticky;top:72px;}
.hc .sidebar nav a{
  display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;
  text-decoration:none;color:var(--ink-soft);font-size:14px;border-bottom:1px solid transparent;
}
.hc .sidebar nav a:hover{color:var(--ink);}
.hc .sidebar nav a.active{color:var(--ink);font-weight:600;}
.hc .sidebar nav a .count{font-family:var(--font-mono);font-size:11px;opacity:.6;}
.hc .sidebar .contact-card{margin-top:26px;border-top:1px solid var(--line);padding-top:18px;}
.hc .sidebar .contact-card h3{font-size:13.5px;margin:0 0 6px;}
.hc .sidebar .contact-card p{font-size:12.5px;color:var(--ink-soft);margin:0 0 12px;}
.hc .sidebar .contact-card a.btn{display:block;text-align:center;background:var(--ink);color:#fff;text-decoration:none;padding:9px;border-radius:7px;font-size:13px;}
.hc .mobile-cat-bar{display:none;}
.hc .cat-section{margin-bottom:40px;scroll-margin-top:80px;}
.hc .cat-head{display:flex;align-items:baseline;gap:10px;margin-bottom:5px;}
.hc .cat-head .idx{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);}
.hc .cat-head h2{font-size:20px;font-weight:700;margin:0;letter-spacing:-.01em;color:var(--ink);}
.hc .cat-intro{color:var(--ink-soft);font-size:14px;max-width:720px;margin:0 0 16px;}
.hc .faq-list{border-top:1px solid var(--line);}
.hc details.faq{border-bottom:1px solid var(--line);}
.hc details.faq summary{list-style:none;cursor:pointer;padding:15px 30px 15px 0;font-weight:600;font-size:14.5px;position:relative;}
.hc details.faq summary::-webkit-details-marker{display:none;}
.hc details.faq summary::after{content:'+';position:absolute;right:2px;top:15px;font-size:18px;color:var(--ink-soft);font-weight:400;}
.hc details.faq[open] summary::after{content:'\2212';}
.hc details.faq .a{padding:0 30px 17px 0;font-size:14px;color:var(--ink-soft);max-width:720px;}
.hc details.faq .a p{margin:0 0 10px;}
.hc details.faq .a ul{margin:6px 0 10px;padding-left:18px;}
.hc details.faq .a a{color:var(--ink);text-decoration:underline;}
.hc .contact-band{background:var(--ink);color:#EDEBE0;padding:44px 0;}
.hc .contact-band h2{font-size:22px;margin:0 0 6px;font-weight:700;color:#EDEBE0;}
.hc .contact-band > .wrap > p{color:#AFAEA4;max-width:520px;margin:0 0 22px;font-size:14px;}
.hc .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#2A2A26;border:1px solid #2A2A26;}
.hc .contact-grid .card{background:var(--ink);padding:18px;}
.hc .contact-grid .card h3{font-size:13.5px;margin:0 0 6px;color:#EDEBE0;}
.hc .contact-grid .card p{font-size:13px;color:#AFAEA4;margin:0 0 10px;}
.hc .contact-grid .card a{color:var(--accent);font-size:13px;text-decoration:none;font-weight:500;}
@media(max-width:860px){
  .hc .layout{grid-template-columns:1fr;gap:0;padding-top:18px;}
  .hc .sidebar{display:none;}
  .hc .mobile-cat-bar{
    display:block;position:sticky;top:56px;background:var(--paper);z-index:20;padding:10px 0;margin-bottom:8px;
    border-bottom:1px solid var(--line);
  }
  .hc .popular ul{grid-template-columns:1fr;}
  .hc .popular li:nth-child(odd) a{border-right:none;padding-right:2px;}
  .hc .popular li:nth-child(even) a{padding-left:2px;}
  .hc .contact-grid{grid-template-columns:1fr;}
  .hc .hero .lede{font-size:14px;}
  .hc .results-panel{max-height:min(60vh,420px);}
}