/* 静态产品装置；这里的标签与开关不是可交互控件。 */
.stage{grid-column:6 / span 7;grid-row:1;background:var(--panel-2);color:var(--text);border:1px solid var(--line);overflow:hidden}
.win{position:absolute;left:32px;top:32px;width:calc(100% - 182px);height:440px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--r-window);box-shadow:var(--shadow-window);overflow:hidden;display:grid;grid-template-rows:40px 1fr 38px}
.win__chrome{position:relative;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid var(--line)}
.win__dot{width:11px;height:11px;border-radius:var(--r-circle);background:var(--chrome-dot);flex-shrink:0}
.win__title{position:absolute;left:50%;transform:translateX(-50%);font-size:12.5px;font-weight:var(--weight-medium);color:var(--text-muted);letter-spacing:.01em}
.win__body{display:grid;grid-template-columns:136px 1fr;min-height:0}
.win__side{background:var(--bg);color:var(--text-muted);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.side-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-menu);font-size:12.5px;line-height:18px;color:var(--text-muted);border:1px solid var(--clear)}
.side-item svg{width:15px;height:15px;flex-shrink:0}
.side-item.is-on{background:var(--panel);border-color:var(--line);color:var(--text);box-shadow:var(--shadow-item)}
.win__main{padding:16px 18px 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.tabs{display:flex;align-items:center;gap:6px}
.tab{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r-pill);background:var(--panel-2);color:var(--text-muted);font-size:11.5px;white-space:nowrap}
.tab.is-on{background:var(--accent);color:var(--panel)}
.tab--add{width:26px;padding:0;justify-content:center;background:var(--clear);border:1px dashed var(--line-strong);color:var(--text-muted);font-size:13px}
.thead{display:grid;grid-template-columns:44px 1.2fr 1.4fr 44px 1fr 36px;gap:8px;min-height:28px;align-items:center;padding:0 12px;border-radius:var(--r-sm);background:var(--bg);color:var(--text-muted);font-size:11px;white-space:nowrap}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin-right:76px;padding-bottom:12px;text-align:center}
.empty__icon{width:46px;height:46px;border-radius:var(--r-tile);display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);color:var(--text-muted)}
.empty__icon svg{width:22px;height:22px}
.empty__text{font-size:13px;color:var(--text)}
.empty__path{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);letter-spacing:.01em}
.win__status{display:flex;align-items:center;gap:10px;padding:0 14px;border-top:1px solid var(--line);background:var(--bg);color:var(--text);font-size:10.5px;white-space:nowrap;overflow-x:auto}
.status-dot{width:8px;height:8px;border-radius:var(--r-circle);background:var(--success);box-shadow:0 0 0 3px var(--success-ring);flex-shrink:0}
.status-item{display:inline-flex;gap:5px;color:var(--text)}
.status-item b{font-weight:var(--weight-regular);color:var(--text-muted)}
.status-item code{font-family:var(--font-mono);font-size:10px}
.status-sep{width:1px;height:12px;background:var(--line-strong);flex-shrink:0}
.anchor{position:absolute;right:139px;top:78px;width:12px;height:12px;border-radius:var(--r-circle);background:var(--warn);box-shadow:var(--shadow-anchor);z-index:2}
.phone{position:absolute;right:24px;top:96px;width:200px;height:404px;z-index:3;padding:6px;border-radius:var(--r-phone);background:var(--panel);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow-phone)}
.phone__screen{position:relative;height:100%;border-radius:var(--r-screen);border:1px solid var(--line);background:var(--panel);color:var(--text);overflow:hidden}
.phone__status{position:relative;height:24px;display:flex;align-items:center;justify-content:flex-end;padding:0 14px}
.phone__cam{position:absolute;left:50%;top:8px;width:8px;height:8px;margin-left:-4px;border-radius:var(--r-circle);background:var(--text)}
.phone__sys{width:30px;height:9px;color:var(--text)}
.phone__bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-bottom:1px solid var(--line);font-size:14px;color:var(--text)}
.phone__bar svg{width:15px;height:15px;color:var(--text-muted)}
.phone__group{padding:10px 14px 3px;font-size:10px;letter-spacing:.06em;color:var(--text-muted)}
.toggles{padding:0 14px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--text)}
.toggles .toggle:last-child{border-bottom:0}
.switch{position:relative;width:26px;height:15px;border-radius:var(--r-pill);background:var(--line-strong);flex-shrink:0}
.switch::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:var(--r-circle);background:var(--knob);box-shadow:var(--shadow-knob)}
.switch.is-on{background:var(--accent)}
.switch.is-on::after{left:13px}
.phone__fab{position:absolute;right:14px;bottom:24px;width:40px;height:40px;border-radius:var(--r-circle);display:grid;place-items:center;background:var(--accent);color:var(--panel);box-shadow:var(--shadow-fab)}
.phone__fab svg{width:16px;height:16px}
.phone__home{position:absolute;left:50%;bottom:7px;width:60px;height:4px;margin-left:-30px;border-radius:var(--r-pill);background:var(--line-strong)}
/* 真实 tab 使用独立命名，避免与装置内的静态标签混淆。 */
.tab-set{min-width:0}
.tab-bar,[role="tablist"].tab-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:32px;padding:8px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel-2);color:var(--text)}
.tab-button{min-height:44px;padding:10px 22px;border:1px solid var(--clear);border-radius:var(--r-pill);background:var(--clear);color:var(--text-muted);font-size:14px}
.tab-button:hover{background:var(--panel);color:var(--text)}
.tab-button[aria-selected="true"]{background:var(--accent);color:var(--panel)}
.tab-panel{min-width:0}
.toc{position:sticky;top:16px;z-index:5;display:flex;flex-wrap:wrap;gap:8px;max-width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--r-window);background:var(--bg);color:var(--text);margin-bottom:40px;box-shadow:var(--shadow-soft)}
.toc a{display:block;padding:8px 14px;border-radius:var(--r-pill);color:var(--text-muted);font-size:14px;text-decoration:none}
.toc a:hover,.toc a[aria-current]{background:var(--accent-soft);color:var(--accent-dark)}
.faq-item{padding:0 28px;border:1px solid var(--line);border-radius:var(--r-window);background:var(--panel);color:var(--text)}
.faq-item+.faq-item{margin-top:12px}
.faq-item summary{position:relative;cursor:pointer;padding:23px 32px 23px 0;list-style:none;font-size:17px;line-height:1.6}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:23px;color:var(--accent)}
.faq-item[open] summary::after{content:"−"}
.faq-item__answer{padding-bottom:24px;max-width:65em;color:var(--text-muted)}
.faq-item__answer p+p{margin-top:16px}
.term-card{padding:28px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);color:var(--text);box-shadow:var(--shadow-soft)}
.term-card__category{font-size:12px;color:var(--text-muted)}
.term-card h3{margin:12px 0;font-size:24px}
.term-card p{color:var(--text-muted);font-size:15px;line-height:1.8}
.term-card__alias{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);overflow-wrap:anywhere}
.client-card{padding:32px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);color:var(--text);box-shadow:var(--shadow-soft)}
.client-card__head{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.client-card__logo{width:56px;height:56px;flex-shrink:0}
.client-card h3{margin:0;font-size:28px}
.client-card__version{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.client-card__version:empty{display:none}
.client-card__desc{max-width:55em;color:var(--text-muted)}
.client-card__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.client-card__minor{margin-top:16px;font-size:13px}
.badge--first{background:var(--accent);color:var(--panel);border-color:var(--accent)}
.badge--recommended{background:var(--accent-soft);color:var(--accent-dark);border-color:var(--line)}
.badge--retired{background:var(--panel-2);color:var(--text-muted);border-color:var(--line-strong)}
.tag{display:inline-block;max-width:100%;padding:4px 10px;border-radius:var(--r-pill);background:var(--panel-2);color:var(--text-muted);font-size:12px;white-space:normal;overflow-wrap:anywhere}
.article-card{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);color:var(--text);box-shadow:var(--shadow-soft)}
.article-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--text-muted)}
.article-card h3{font-size:22px;margin:22px 0 14px;line-height:1.45}
.article-card h3 a{color:var(--text);text-decoration:none}
.article-card h3 a:hover{color:var(--accent)}
.article-card p{font-size:14px;line-height:1.8;color:var(--text-muted)}
.article-card__link{margin-top:auto;padding-top:24px;font-size:14px}
.callout{margin:24px 0;padding:24px 28px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-md);background:var(--accent-soft);color:var(--text)}
.callout p{margin:0}
.callout p+p{margin-top:12px}
.callout--warn{background:var(--panel-2);color:var(--text);border-left-color:var(--warn)}
.callout__title{display:block;margin-bottom:8px;font-weight:var(--weight-medium)}
.table-scroll{overflow-x:auto;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md)}
.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;background:var(--panel);color:var(--text)}
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td{min-width:7em;padding:16px 20px;border-bottom:1px solid var(--line);overflow-wrap:normal;word-break:normal;vertical-align:top}
.data-table th,.prose table th,.article-body table th{background:var(--panel-2);color:var(--text);font-weight:var(--weight-medium)}
.data-table tr:last-child td{border-bottom:0}
.prose table,.article-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;border-collapse:collapse;margin-block:24px;background:var(--panel);color:var(--text);text-align:left}
.data-table code,.prose table code,.article-body table code{overflow-wrap:anywhere}
.dl-fab{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;align-items:center;gap:12px;max-width:calc(100% - 40px);padding:14px 22px;border:1px solid var(--accent);border-radius:var(--r-pill);background:var(--accent);color:var(--panel);box-shadow:var(--shadow-fab);text-decoration:none;font-size:14px;line-height:1.4}
.dl-fab svg{width:22px;height:22px;flex-shrink:0}
.dl-fab:hover{background:var(--accent-dark);color:var(--panel);border-color:var(--accent-dark)}
.dl-fab small{display:block;font-size:11px}
.article-download{margin-top:56px;padding:32px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel-2);color:var(--text)}
.article-download h2{margin:0 0 16px;font-size:26px}
.article-download p{color:var(--text-muted);margin-bottom:24px}
.platform-tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);color:var(--text);box-shadow:var(--shadow-soft);overflow:hidden}
.platform-tray__item{padding:32px;border-right:1px solid var(--line)}
.platform-tray__item:last-child{border-right:0}
.platform-tray__item h3{font-size:22px;margin:20px 0 12px}
.platform-tray__item p{font-size:14px;color:var(--text-muted);margin-bottom:24px}
.platform-tray__icon{width:28px;height:28px}
.feature-rows{display:grid;gap:112px}
.feature-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:center}
.feature-row:nth-child(even) .feature-copy{order:2}
.feature-copy h3{margin:0 0 20px;font-size:30px}
.feature-copy p{color:var(--text-muted);line-height:1.85;margin-bottom:24px}
.feature-tab{padding:0;border:0;background:var(--clear);color:var(--text);font:inherit;text-align:left}
.feature-tab[aria-selected="true"]{color:var(--accent)}
.setting-slice{position:relative;padding:28px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);color:var(--text);box-shadow:var(--shadow-window)}
.setting-slice__head{font-size:14px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.setting-field{display:grid;gap:8px;margin-top:16px;font-size:13px;color:var(--text-muted)}
.setting-field code{display:block;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--bg);color:var(--text)}
.setting-slice__sub{margin:24px 0 -48px 48px;padding:20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);color:var(--text);box-shadow:var(--shadow-lift);font-size:13px}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.swatch{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--panel);color:var(--text)}
.swatch__paint{height:64px;background:var(--sample);color:var(--text)}
.swatch code{display:block;padding:12px;font-size:12px}
.swatch--bg{--sample:var(--bg)}
.swatch--panel{--sample:var(--panel)}
.swatch--panel2{--sample:var(--panel-2)}
.swatch--line{--sample:var(--line)}
.swatch--strong{--sample:var(--line-strong)}
.swatch--accent{--sample:var(--accent)}
.swatch--accent-dark{--sample:var(--accent-dark)}
.swatch--accent-soft{--sample:var(--accent-soft)}
.swatch--text{--sample:var(--text)}
.swatch--muted{--sample:var(--text-muted)}
.swatch--faint{--sample:var(--text-faint)}
.swatch--success{--sample:var(--success)}
.swatch--ring{--sample:var(--success-ring)}
.swatch--warn{--sample:var(--warn)}
.swatch--error{--sample:var(--error)}
.swatch--ink{--sample:var(--ink)}
.swatch--ink2{--sample:var(--ink-2)}
.swatch--ink3{--sample:var(--ink-3)}
.swatch--ink-line{--sample:var(--ink-line)}
.swatch--on-ink{--sample:var(--on-ink)}
.swatch--on-muted{--sample:var(--on-ink-muted)}
.swatch--dot{--sample:var(--chrome-dot)}
.swatch--knob{--sample:var(--knob)}
.swatch--clear{--sample:var(--clear)}
.swatch--veil{--sample:var(--veil)}
.preview-stack{display:grid;gap:24px}
.preview-heading{font-size:clamp(34px,3.4vw,48px);line-height:1.12;margin:0}
.preview-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
@media(max-width:1040px){
  .stage{grid-column:1;grid-row:auto}
  .platform-tray{grid-template-columns:repeat(2,minmax(0,1fr))}
  .platform-tray__item:nth-child(2){border-right:0}
  .platform-tray__item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .feature-row{gap:40px}
}
@media(max-width:768px){
  .feature-row{grid-template-columns:1fr}
  .feature-row:nth-child(even) .feature-copy{order:0}
  .swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .preview-heading{font-size:30px}
}
@media(max-width:640px){
  .win{left:16px;top:20px;width:calc(100% - 32px);height:380px}
  .win__body{grid-template-columns:1fr}
  .win__side{display:none}
  .win__main{padding-inline:12px}
  .empty{margin-right:0}
  .anchor{display:none}
  .phone{transform:scale(.8);transform-origin:right bottom;top:auto;bottom:16px;right:12px}
  .thead{grid-template-columns:repeat(3,minmax(0,1fr));white-space:normal}
  .thead span:nth-child(n+4){display:none}
  .tab-bar{gap:4px;padding:6px}
  .tab-button{padding-inline:14px}
  .toc{position:static}
  .faq-item{padding-inline:20px}
  .faq-item summary{font-size:16px}
  .client-card,.term-card,.article-card{padding:24px}
  .platform-tray{grid-template-columns:1fr}
  .platform-tray__item{border-right:0;border-bottom:1px solid var(--line);padding:24px}
  .platform-tray__item:last-child{border-bottom:0}
  .feature-rows{gap:80px}
  .feature-copy h3{font-size:26px}
  .setting-slice{padding:20px}
  .setting-slice__sub{margin-left:16px}
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .callout{padding:20px}
  .dl-fab{right:20px;bottom:16px;padding:12px 18px}
}