.tab-shell{min-width:0}
.tab-list{display:flex;max-width:100%;gap:6px;padding:6px;border:1px solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-surface-soft);overflow-x:auto;scrollbar-width:thin}
.tab-list [role="tab"]{flex:0 0 auto;min-height:42px;padding:8px 18px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-ink-muted);font-weight:600;cursor:pointer}
.tab-list [role="tab"]:hover{color:var(--color-ink)}
.tab-list [role="tab"][aria-selected="true"]{background:var(--color-surface);color:var(--color-brand-deep);box-shadow:var(--shadow-lift)}
.tab-panel{padding-top:28px}
.toc{display:flex;max-width:100%;gap:8px;padding:8px;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);overflow-x:auto;scrollbar-width:thin}
.toc a{flex:0 0 auto;padding:8px 13px;border-radius:var(--radius-pill);color:var(--color-ink-muted);font-size:13px}
.toc a:hover,.toc a[aria-current="true"]{background:var(--color-brand-soft);color:var(--color-brand-deep)}
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-lift)}
.faq-item summary{display:flex;min-height:58px;align-items:center;gap:14px;padding:16px 20px;font-weight:650;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"＋";margin-left:auto;color:var(--color-brand-deep);font-size:20px;line-height:1;flex-shrink:0}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 20px 20px;color:var(--color-ink-muted)}
.glossary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.term-card{min-width:0;padding:24px;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-lift)}
.term-card dt{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;font-size:19px;font-weight:650}
.term-card dd{color:var(--color-ink-muted)}
.term-alias{font-family:var(--font-mono);font-size:12px;color:var(--color-brand-deep)}
.client-card{position:relative;min-width:0;padding:clamp(22px,4vw,34px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-panel)}
.client-card-head{display:flex;min-width:0;align-items:flex-start;gap:16px}
.client-card-head>img{width:56px;height:56px;flex-shrink:0}
.client-card-title{min-width:0}
.client-card-title h3{overflow-wrap:anywhere}
.client-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.badge,.tag{display:inline-flex;max-width:100%;align-items:center;gap:6px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;line-height:1.3}
.badge{padding:5px 10px}
.tag{padding:4px 9px;border:1px solid var(--color-line);background:var(--color-surface-soft);color:var(--color-ink-muted)}
.badge-featured{background:var(--color-brand);color:var(--color-surface)}
.badge-recommended{background:var(--color-success-soft);color:var(--color-success)}
.badge-retired{background:var(--color-error-soft);color:var(--color-error)}
.badge-info{background:var(--color-info-soft);color:var(--color-info)}
.badge-warning{background:var(--color-warning-soft);color:var(--color-warning)}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.article-card{display:flex;min-width:0;min-height:100%;flex-direction:column;padding:26px;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-lift);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-panel)}
.article-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;color:var(--color-ink-muted);font-size:12px}
.article-card h3{font-size:20px}
.article-card p{margin-top:12px;color:var(--color-ink-muted)}
.article-card-more{margin-top:auto;padding-top:22px;color:var(--color-brand-deep);font-weight:650}
.callout{position:relative;padding:20px 22px 20px 50px;border:1px solid var(--color-line);border-left:3px solid var(--color-brand);border-radius:var(--radius-md);background:var(--color-brand-soft);color:var(--color-ink)}
.callout::before{content:"i";position:absolute;top:20px;left:19px;display:grid;width:20px;height:20px;place-items:center;border-radius:50%;background:var(--color-brand-deep);color:var(--color-surface);font-family:var(--font-mono);font-size:12px;font-weight:700}
.callout-success{border-left-color:var(--color-success);background:var(--color-success-soft);color:var(--color-ink)}
.callout-warning{border-left-color:var(--color-warning);background:var(--color-warning-soft);color:var(--color-ink)}
.callout-error{border-left-color:var(--color-error);background:var(--color-error-soft);color:var(--color-ink)}
.dl-fab{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:80;max-width:min(330px,calc(100vw - 32px))}
.dl-fab a{display:flex;min-width:0;align-items:center;gap:12px;padding:13px 17px;border:1.5px solid var(--color-brand);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-pop)}
.dl-fab-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:50%;background:var(--color-brand);color:var(--color-surface);flex-shrink:0}
.dl-fab-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dl-fab-copy{min-width:0}
.dl-fab-copy strong,.dl-fab-copy span{display:block}
.dl-fab-copy span{color:var(--color-ink-muted);font-size:12px}
.download-guide{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding:28px;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface-soft);color:var(--color-ink)}
.download-guide-copy{min-width:0}
.download-guide-copy p{margin-top:6px;color:var(--color-ink-muted)}
.knowledge-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);align-items:center;gap:clamp(36px,7vw,90px);padding:clamp(30px,6vw,72px);border:1px solid var(--color-line);border-radius:var(--radius-section);background:var(--color-surface-soft);color:var(--color-ink)}
.knowledge-panel.is-reversed .knowledge-copy{order:2}
.knowledge-panel.is-reversed .knowledge-visual{order:1}
.knowledge-copy p{max-width:630px;margin-top:18px;color:var(--color-ink-muted)}
.knowledge-visual{min-width:0;padding:20px;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-panel)}
.ui-snippet-row{display:flex;min-width:0;align-items:center;gap:12px;padding:11px 0}
.ui-snippet-row+.ui-snippet-row{border-top:1px solid var(--color-line)}
.ui-snippet-row>*{min-width:0}
.ui-switch{position:relative;width:36px;height:20px;margin-left:auto;border-radius:var(--radius-pill);background:var(--color-brand);flex-shrink:0}
.ui-switch::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:var(--color-surface);box-shadow:var(--shadow-lift)}
.hero-stage{position:relative;max-width:1124px;margin:34px auto 0;padding-inline:32px;z-index:1}
.hero-stage::before{content:"";position:absolute;left:50%;top:-90px;width:min(940px,100%);height:480px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--color-brand-glow),transparent 72%);pointer-events:none}
.stage-block{position:absolute;inset:112px -8px -44px;background:var(--color-surface-soft);border:1px solid var(--color-line);border-radius:var(--radius-section)}
.stage-back{position:absolute;left:72px;right:6px;top:-16px;height:220px;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-panel);transform:rotate(.8deg)}
.stage-back::after{content:"";position:absolute;inset:0 0 auto;height:38px;border-bottom:1px solid var(--color-line);border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--color-surface)}
.app-mock{position:relative;z-index:2;overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-float)}
.app-titlebar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--color-line)}
.app-dot{width:17px;height:17px;border-radius:5px;background:linear-gradient(135deg,var(--color-brand),var(--color-brand-deep))}
.app-title{color:var(--color-ink-muted);font-size:12.5px}
.app-live{display:flex;align-items:center;gap:6px;margin-left:14px;color:var(--color-ink-muted);font-size:11.5px}
.app-live i{width:7px;height:7px;border-radius:50%;background:var(--color-success);flex-shrink:0}
.app-window-actions{display:flex;gap:16px;margin-left:auto;color:var(--color-ink-muted);font-family:var(--font-mono);font-size:12px}
.app-body{display:grid;grid-template-columns:236px minmax(0,1fr)}
.app-sidebar{display:flex;flex-direction:column;padding:16px 12px 14px;border-right:1px solid var(--color-line);background:var(--color-surface-soft);color:var(--color-ink)}
.app-sidebar-label{padding:0 10px 8px;color:var(--color-ink-muted);font-size:11px;letter-spacing:.06em}
.app-sidebar a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--color-ink-muted);font-size:13px}
.app-sidebar a.is-current{background:var(--color-surface);color:var(--color-brand-deep);font-weight:650;box-shadow:inset 2px 0 0 var(--color-brand),var(--shadow-lift)}
.app-sidebar-foot{display:flex;align-items:center;gap:7px;margin-top:auto;padding:10px 10px 0;border-top:1px dashed var(--color-line);color:var(--color-ink-muted);font-family:var(--font-mono);font-size:11px}
.app-sidebar-foot i{width:6px;height:6px;border-radius:50%;background:var(--color-success);flex-shrink:0}
.app-settings{min-width:0;padding:20px 30px 24px}
.app-crumb{margin-bottom:3px;color:var(--color-ink-muted);font-size:12px}
.app-settings h3{margin-bottom:12px;font-size:17px;font-weight:650}
.setting-group{overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius-md)}
.setting-row{display:flex;min-width:0;align-items:center;gap:14px;padding:12px 18px}
.setting-row+.setting-row{border-top:1px solid var(--color-line)}
.setting-copy{min-width:0}
.setting-name{font-size:13.5px}
.setting-hint{color:var(--color-ink-muted);font-size:11.5px}
.setting-control{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.setting-state{color:var(--color-ink-muted);font-family:var(--font-mono);font-size:11px}
.setting-field{min-width:90px;padding:5px 12px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink);font-family:var(--font-mono);font-size:13px;text-align:right}
.operation-float{position:absolute;right:-6px;bottom:-34px;z-index:3;width:302px;padding:14px 16px 12px;border:1.5px solid var(--color-brand);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-pop)}
.operation-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:13px;font-weight:650}
.operation-head::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-brand);flex-shrink:0}
.operation-count{margin-left:auto;color:var(--color-ink-muted);font-family:var(--font-mono);font-size:11px;font-weight:400}
.operation-float li{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px}
.operation-float li+li{border-top:1px dashed var(--color-line)}
.operation-status{display:grid;width:15px;height:15px;place-items:center;border-radius:50%;background:var(--color-success);color:var(--color-surface);font-size:10px;flex-shrink:0}
.operation-status.busy{border:1.5px solid var(--color-brand);background:var(--color-brand-soft);color:var(--color-brand-deep)}
.operation-note{margin-top:8px;color:var(--color-ink-muted);font-family:var(--font-mono);font-size:11px}
.palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.swatch{overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-ink)}
.swatch-color{height:80px}
.swatch-copy{padding:12px;font-family:var(--font-mono);font-size:11px}
.swatch-page{background:var(--color-page)}
.swatch-surface{background:var(--color-surface)}
.swatch-soft{background:var(--color-surface-soft)}
.swatch-line{background:var(--color-line)}
.swatch-brand{background:var(--color-brand)}
.swatch-brand-deep{background:var(--color-brand-deep)}
.swatch-ink{background:var(--color-ink)}
.swatch-muted{background:var(--color-ink-muted)}
.swatch-success{background:var(--color-success)}
.swatch-warning{background:var(--color-warning)}
.swatch-error{background:var(--color-error)}
.swatch-info{background:var(--color-info)}
@media(max-width:900px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .knowledge-panel{grid-template-columns:1fr}
  .knowledge-panel.is-reversed .knowledge-copy,.knowledge-panel.is-reversed .knowledge-visual{order:initial}
  .app-body{grid-template-columns:1fr}
  .app-sidebar,.stage-back{display:none}
  .operation-float{position:relative;right:auto;bottom:auto;width:auto;margin:14px}
  .palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .glossary-grid,.blog-grid{grid-template-columns:1fr}
  .client-card-head{align-items:center}
  .download-guide{align-items:flex-start;flex-direction:column}
  .hero-stage{padding-inline:var(--gutter)}
  .stage-block{inset:90px 8px -30px}
  .app-settings{padding:18px 14px}
  .setting-row{align-items:flex-start;padding:12px}
  .setting-control{max-width:46%;flex-wrap:wrap;justify-content:flex-end}
  .setting-field{min-width:70px;max-width:100%}
  .palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tab-list{border-radius:var(--radius-md)}
}