:root{
  --component-tab-stripe:linear-gradient(180deg,var(--color-hero-b),var(--color-accent));
  --component-badge-stop-bg:rgba(214,69,61,.10);
  --component-badge-stop-text:#9D2B25;
  --component-badge-rec-bg:rgba(0,199,168,.12);
  --component-callout-bg:rgba(0,199,168,.08);
  --component-warning-bg:rgba(217,138,11,.10);
  --component-fab-shadow:rgba(3,30,36,.24);
}
.feature-tabs{
  display:grid;
  grid-template-columns:minmax(230px,30%) minmax(0,1fr);
  gap:28px;
}
.tab-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tab-list [role="tab"]{
  position:relative;
  display:grid;
  width:100%;
  min-height:56px;
  grid-template-columns:32px 10px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:0;
  border-radius:var(--radius-md);
  background:transparent;
  color:var(--color-muted);
  cursor:pointer;
  text-align:left;
}
.tab-list [role="tab"]::before{
  position:absolute;
  top:8px;
  bottom:8px;
  left:0;
  width:3px;
  border-radius:var(--radius-pill);
  background:var(--component-tab-stripe);
  content:"";
  opacity:0;
}
.tab-list [role="tab"][aria-selected="true"]{
  background:var(--color-panel);
  color:var(--color-text);
  box-shadow:0 10px 28px var(--color-shadow);
}
.tab-list [role="tab"][aria-selected="true"]::before{opacity:1}
.tab-code{
  color:var(--color-accent-dark);
  font-family:var(--font-mono);
  font-size:11px;
}
.tab-dot{
  width:8px;
  height:8px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--color-success);
}
.tab-detail{
  overflow:hidden;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  color:var(--color-text);
  box-shadow:var(--shadow-card);
}
.tab-chrome{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:0 18px;
  border-bottom:1px solid var(--color-border);
  background:var(--color-panel-soft);
}
.tab-chrome i{
  width:9px;
  height:9px;
  flex-shrink:0;
  border-radius:50%;
}
.tab-chrome i:nth-child(1){background:var(--color-error)}
.tab-chrome i:nth-child(2){background:var(--color-warning)}
.tab-chrome i:nth-child(3){background:var(--color-success)}
.tab-panel{padding:clamp(24px,5vw,52px)}
.tab-panel[hidden]{display:none}
.tab-panel p{max-width:68ch;color:var(--color-muted)}
.toc{
  display:flex;
  max-width:100%;
  gap:8px;
  overflow-x:auto;
  padding:8px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  background:var(--color-panel);
  scrollbar-width:thin;
}
.toc a{
  display:flex;
  min-height:40px;
  flex:0 0 auto;
  align-items:center;
  padding:6px 15px;
  border-radius:var(--radius-pill);
  color:var(--color-muted);
  text-decoration:none;
}
.toc a:hover,
.toc a[aria-current="true"]{
  background:var(--color-panel-soft);
  color:var(--color-text);
}
.faq-list{display:grid;gap:12px}
.faq-item{
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
  color:var(--color-text);
}
.faq-item summary{
  display:flex;
  min-height:64px;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 20px;
  cursor:pointer;
  font-weight:650;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  width:26px;
  height:26px;
  flex-shrink:0;
  border:1px solid var(--color-border);
  border-radius:50%;
  content:"+";
  color:var(--color-accent-dark);
  font-family:var(--font-mono);
  line-height:24px;
  text-align:center;
}
.faq-item[open] summary::after{content:"−"}
.faq-answer{
  padding:0 20px 20px;
  color:var(--color-muted);
}
.term-card{
  position:relative;
  min-height:190px;
  padding:26px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  color:var(--color-text);
}
.term-card::after{
  position:absolute;
  right:20px;
  bottom:16px;
  color:var(--color-border);
  content:"⌁";
  font-family:var(--font-mono);
  font-size:32px;
}
.term-card dt{
  margin-bottom:10px;
  color:var(--color-text);
  font-family:var(--font-display);
  font-size:24px;
}
.term-card dd{margin:0;color:var(--color-muted)}
.download-card{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:28px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  color:var(--color-text);
  box-shadow:var(--shadow-card);
}
.download-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.download-card-title{margin:0;font-family:var(--font-display);font-size:28px}
.download-actions{display:flex;flex-wrap:wrap;gap:10px}
.badge{
  display:inline-flex;
  max-width:100%;
  min-height:28px;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  overflow:hidden;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  background:var(--color-panel-soft);
  color:var(--color-text);
  font-size:12px;
  font-weight:650;
  white-space:nowrap;
}
.badge-primary,
.badge-recommended{
  border-color:var(--color-accent);
  background:var(--component-badge-rec-bg);
  color:var(--color-accent-dark);
}
.badge-stopped{
  border-color:var(--color-error);
  background:var(--component-badge-stop-bg);
  color:var(--component-badge-stop-text);
}
.article-card{
  display:flex;
  min-height:100%;
  flex-direction:column;
  gap:14px;
  padding:26px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  color:var(--color-text);
  text-decoration:none;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.article-card:hover{
  color:var(--color-text);
  transform:translateY(-5px);
  box-shadow:var(--shadow-card);
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:11px;
}
.article-card h3{margin:0;font-size:25px}
.article-card p{margin:0;color:var(--color-muted)}
.article-link{margin-top:auto;color:var(--color-accent-dark);font-weight:650}
.callout{
  position:relative;
  margin:28px 0;
  padding:20px 22px 20px 52px;
  border:1px solid var(--color-accent);
  border-radius:var(--radius-lg);
  background:var(--component-callout-bg);
  color:var(--color-text);
}
.callout::before{
  position:absolute;
  top:20px;
  left:20px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--color-accent-dark);
  content:"";
  box-shadow:0 0 0 6px var(--color-focus);
}
.callout-warning{
  border-color:var(--color-warning);
  background:var(--component-warning-bg);
  color:var(--color-text);
}
.callout-warning::before{background:var(--color-warning)}
.end-download-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  margin-top:48px;
  padding:28px;
  border-radius:var(--radius-xl);
  background:var(--color-code-bg);
  color:var(--color-code-text);
}
.end-download-card h2,
.end-download-card h3{color:var(--color-code-text)}
.end-download-card p{margin:0;color:var(--color-hero-muted)}
.dl-fab{
  position:fixed;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:60;
  display:flex;
  max-width:270px;
  min-height:62px;
  align-items:center;
  gap:12px;
  padding:10px 16px 10px 11px;
  border:1px solid var(--color-glass-line);
  border-radius:var(--radius-pill);
  background:var(--color-code-bg);
  color:var(--color-code-text);
  box-shadow:0 18px 44px var(--component-fab-shadow);
  text-decoration:none;
}
.dl-fab:hover{color:var(--color-code-text);transform:translateY(-2px)}
.dl-fab-icon{
  display:grid;
  width:40px;
  height:40px;
  flex-shrink:0;
  place-items:center;
  border-radius:50%;
  background:var(--color-accent);
  color:var(--color-code-bg);
}
.dl-fab-icon svg{width:19px;height:19px}
.dl-fab-copy{display:grid;line-height:1.25}
.dl-fab-copy small{color:var(--color-hero-muted)}
.preview-swatch{
  min-height:132px;
  overflow:hidden;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-panel);
}
.preview-swatch-color{height:78px}
.preview-swatch-label{padding:12px;font-family:var(--font-mono);font-size:11px}
.swatch-bg{background:var(--color-bg)}
.swatch-panel{background:var(--color-panel)}
.swatch-soft{background:var(--color-panel-soft)}
.swatch-border{background:var(--color-border)}
.swatch-accent{background:var(--color-accent)}
.swatch-accent-dark{background:var(--color-accent-dark)}
.swatch-text{background:var(--color-text)}
.swatch-muted{background:var(--color-muted)}
.swatch-success{background:var(--color-success)}
.swatch-warning{background:var(--color-warning)}
.swatch-error{background:var(--color-error)}
@media (max-width:768px){
  .feature-tabs{grid-template-columns:1fr}
  .tab-list{
    flex-direction:row;
    overflow-x:auto;
    padding-bottom:5px;
  }
  .tab-list [role="tab"]{min-width:210px}
  .end-download-card{grid-template-columns:1fr}
}
@media (max-width:640px){
  .dl-fab{
    right:12px;
    bottom:12px;
    max-width:calc(100% - 24px);
  }
}