:root {
  --ink:#111111;
  --body:#333333;
  --muted:#747474;
  --line:#e7e7e7;
  --panel:#f8f8f7;
  --active:#efefee;
  --blue:#147ce5;
  --blue-soft:#f1f7ff;
  --warm:#fff8ea;
  --sidebar:300px;
  --header:72px;
  --content:850px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.site-header{
  height:var(--header);
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  height:100%;
  max-width:1500px;
  margin:auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  gap:42px;
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  white-space:nowrap;
  flex:0 0 auto;
}
.brand-logo{
  display:block;
  width:38px;
  height:38px;
  object-fit:contain;
  flex:0 0 auto;
}
.top-nav{display:flex;gap:32px;align-items:center;font-size:14px}
.top-nav a{height:var(--header);display:flex;align-items:center;position:relative;color:#3b3b3d}
.top-nav a:hover{color:#000}
.top-nav a.active{color:#000}
.top-nav a.active:after{
  content:"";
  position:absolute;
  left:0;
  bottom:12px;
  width:42px;
  height:3px;
  border-radius:999px;
  background:#111;
}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.search{
  width:310px;
  height:39px;
  position:relative;
}
.search input{
  width:100%;height:100%;
  border:1px solid #dedede;
  border-radius:10px;
  padding:0 16px 0 48px;
  outline:none;
  background:#fff;
  color:#222;
}
.search input:focus{border-color:#bcbcbc;box-shadow:0 0 0 3px rgba(0,0,0,.035)}
.search-icon{
  position:absolute;
  left:15px;
  top:50%;
  width:22px;
  height:22px;
  transform:translateY(-50%);
  color:#5f6064;
  pointer-events:none;
}
.search-results{
  display:none;
  position:absolute;
  left:0;right:0;top:47px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  box-shadow:0 22px 60px rgba(0,0,0,.14);
  overflow:hidden;
  max-height:460px;
  overflow-y:auto;
  z-index:200;
}
.search-results.open{display:block}
.search-result{display:block;padding:12px 14px;border-bottom:1px solid #eee}
.search-result:last-child{border-bottom:0}
.search-result:hover{background:#f7f7f7}
.search-result b{display:block;font-size:13px;margin-bottom:4px}
.search-result span{display:block;font-size:12px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-empty{padding:16px;color:#777;font-size:13px}

.mobile-menu{display:none;border:0;background:transparent;font-size:23px;cursor:pointer}
.docs-layout{
  min-height:calc(100vh - var(--header));
  max-width:1500px;
  margin:auto;
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
}
.sidebar{
  position:sticky;
  top:var(--header);
  height:calc(100vh - var(--header));
  overflow-y:auto;
  border-right:1px solid var(--line);
  padding:26px 18px 60px;
  background:#fbfbfb;
}
.side-group{margin-bottom:16px}
.side-group-title{
  width:100%;
  border:0;
  background:none;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  font-weight:700;
  color:#1d1d1f;
  cursor:pointer;
  text-align:left;
}
.side-title-left{display:flex;align-items:center;gap:9px}
.side-icon{
  width:17px;height:17px;
  border:1.5px solid #4a4a4d;
  border-radius:4px;
  display:grid;place-items:center;
  font-size:10px;
  color:#444;
  flex:0 0 auto;
}
.chev{font-size:12px;transition:transform .18s}
.side-group.collapsed .chev{transform:rotate(-90deg)}
.side-group.collapsed .side-links{display:none}
.side-links{display:grid;gap:1px}
.side-link{
  padding:7px 12px 7px 28px;
  border-radius:7px;
  font-size:13px;
  line-height:1.28;
  color:#58585b;
}
.side-link:hover{color:#111;background:#f1f1f0}
.side-link.active{
  color:#111;
  background:#e9e9e8;
  font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.025);
}
.article-area{padding:38px 54px 90px;min-width:0}
.article-container{max-width:var(--content);margin:0 auto}
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  align-items:center;
  color:#8a8a8d;
  font-size:12px;
  margin-bottom:32px;
}
.breadcrumbs a:hover{color:#111}
.article-title{
  font-size:42px;
  line-height:1.08;
  letter-spacing:-.045em;
  margin:0 0 10px;
  font-weight:760;
}
.article-meta{font-size:13px;color:#838386;margin-bottom:29px}
.article-body{
  max-width:100%;
  color:var(--body);
}
.article-body > p:first-child{
  font-size:18px;
  line-height:1.58;
  margin-top:0;
  color:#333;
}
.article-body p{font-size:16px;line-height:1.68;margin:0 0 18px}
.article-body h2{
  font-size:23px;
  letter-spacing:-.025em;
  margin:38px 0 15px;
  color:#111;
}
.article-body h3{font-size:19px;margin:30px 0 12px}
.article-body ol,.article-body ul{padding-left:25px;margin:8px 0 20px}
.article-body li{font-size:16px;line-height:1.62;margin:7px 0;padding-left:4px}
.article-body strong{font-weight:680;color:#111}
.article-body code{background:#f2f2f2;border-radius:5px;padding:2px 5px;font-size:.93em}
.callout{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:12px;
  border-radius:11px;
  padding:17px 18px;
  margin:25px 0 34px;
}
.callout-info{background:var(--blue-soft);border:1px solid #e3effc}
.callout-icon{
  width:18px;height:18px;border:1.7px solid var(--blue);color:var(--blue);
  border-radius:50%;font-size:12px;font-weight:700;display:grid;place-items:center;margin-top:1px
}
.callout-title{font-weight:700;font-size:14px;margin-bottom:5px;color:#1a1a1a}
.callout p,.callout li{font-size:14px!important;color:#5b6470!important;line-height:1.55!important;margin-top:3px!important}
.callout ul{margin-bottom:0!important}
.prev-next{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  border-top:1px solid var(--line);
  padding-top:28px;
  margin-top:52px;
}
.prev-next a{
  border:1px solid var(--line);
  border-radius:11px;
  padding:14px 16px;
  font-size:14px;
}
.prev-next a:hover{border-color:#bbb;background:#fafafa}
.prev-next .next{text-align:right}
.prev-next small{display:block;color:#8a8a8d;margin-bottom:4px;font-size:11px}
.docs-mobile-trigger{display:none;margin-bottom:20px}
.docs-mobile-trigger button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 11px}

.home-hero{text-align:center;padding:76px 30px 38px}
.eyebrow{text-transform:uppercase;letter-spacing:.28em;font-weight:700;font-size:10px;color:#656569}
.home-hero h1{font-size:48px;letter-spacing:-.05em;margin:16px 0 12px;line-height:1.02}
.home-hero p{font-size:18px;line-height:1.55;color:#5f5f63;max-width:720px;margin:0 auto}
.home-search{max-width:560px;margin:30px auto 0}
.home-search.search{height:50px;width:100%}
.home-search input{border-radius:14px;padding-left:44px}
.home-main{max-width:1250px;margin:auto;padding:0 30px 80px}
.theme-preview{
  border-radius:22px;
  border:1px solid #e4e0da;
  overflow:hidden;
  box-shadow:0 18px 55px rgba(0,0,0,.07);
  background:#efeae3;
}
.theme-preview img{width:100%;display:block}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 46px}
.home-card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:23px;
  min-height:165px;
  background:#fff;
  transition:.18s;
}
.home-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.055)}
.home-card .card-icon{
  width:40px;height:40px;border-radius:10px;background:#f2f2f1;
  display:grid;place-items:center;margin-bottom:20px;font-size:18px
}
.home-card h3{font-size:16px;margin:0 0 8px}
.home-card p{font-size:14px;line-height:1.5;color:#68686b;margin:0 0 15px}
.support-banner{
  border-radius:19px;
  background:linear-gradient(120deg,#eee8df,#f8f5f0);
  min-height:215px;
  padding:38px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  overflow:hidden;
}
.support-banner h2{font-size:29px;letter-spacing:-.035em;margin:0 0 8px}
.support-banner p{color:#5c5c60;line-height:1.55;max-width:510px}
.button{
  display:inline-flex;align-items:center;gap:8px;
  background:#111;color:#fff;border-radius:9px;
  padding:11px 16px;font-size:13px;font-weight:600
}
.support-shape{width:260px;height:130px;position:relative}
.support-shape:before,.support-shape:after{content:"";position:absolute;border-radius:50%;background:#d5c8b5}
.support-shape:before{width:112px;height:112px;right:64px;top:0}
.support-shape:after{width:72px;height:72px;right:8px;bottom:0}
.simple-page{max-width:840px;margin:68px auto;padding:0 30px 90px}
.simple-page h1{font-size:44px;letter-spacing:-.045em;margin:12px 0 20px}
.simple-page p,.simple-page li{font-size:17px;line-height:1.7;color:#444}
.simple-panel{padding:20px;border:1px solid var(--line);border-radius:13px;background:#fafafa}
.site-footer{border-top:1px solid var(--line);padding:28px 30px;color:#858589;font-size:12px}
.footer-inner{max-width:1250px;margin:auto;display:flex;justify-content:space-between;gap:20px}

@media(max-width:1000px){
  .top-nav,.header-right .search{display:none}
  .mobile-menu{display:block;margin-left:auto}
  .header-inner{padding:0 20px}
  .docs-layout{display:block}
  .sidebar{
    position:fixed;z-index:90;left:0;top:var(--header);
    width:min(86vw,330px);
    transform:translateX(-105%);
    transition:.22s ease;
    box-shadow:20px 0 44px rgba(0,0,0,.13)
  }
  .sidebar.open{transform:translateX(0)}
  .docs-mobile-trigger{display:block}
  .article-area{padding:30px 24px 70px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .home-hero{padding:54px 18px 30px}
  .home-hero h1{font-size:38px}
  .home-hero p{font-size:16px}
  .home-main{padding-left:18px;padding-right:18px}
  .theme-preview{border-radius:14px}
  .card-grid{grid-template-columns:1fr}
  .support-shape{display:none}
  .article-title{font-size:34px}
  .article-area{padding-left:18px;padding-right:18px}
  .prev-next{grid-template-columns:1fr}
  .footer-inner{display:block}
}

@media(max-width:680px){
  .brand-logo{width:34px;height:34px}
  }

.search-icon svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.home-card .card-icon svg{
  display:block;
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}