/* 首屏：静态晴空、草坡与三栏设置窗口。 */
.hero { position:relative; isolation:isolate; margin:8px 24px 0; height:clamp(720px,calc(100vh - 88px),860px); border-radius:var(--radius-hero); overflow:hidden; background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 42%,var(--sky-bottom) 68%); color:var(--text); }
.hero-visual { position:absolute; inset:0; z-index:0; pointer-events:none; }
.scene { position:absolute; inset:0; width:100%; height:100%; display:block; }
.c-white { fill:var(--cloud); }
.c-shade { fill:var(--cloud-shade); }
.h-far { fill:var(--hill-far); }
.h-mid { fill:var(--hill-mid); }
.h-near { fill:var(--hill-near); }
.h-near-hi { fill:var(--hill-near-hi); }
.t-crown { fill:var(--tree); }
.t-hi { fill:var(--tree-hi); }
.t-trunk { fill:var(--trunk); }
.copy { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:52px 24px 0; }
.badge { display:inline-flex; align-items:center; gap:10px; min-height:34px; padding:4px 14px 4px 4px; border-radius:var(--radius-pill); background:var(--glass-strong); color:var(--text); box-shadow:inset 0 0 0 1px var(--glass-line),var(--shadow-soft); text-decoration:none; font-size:13.5px; font-weight:600; max-width:100%; overflow-wrap:anywhere; }
.badge-tag { display:inline-flex; align-items:center; min-height:26px; padding:3px 10px; border-radius:var(--radius-pill); background:var(--accent); color:var(--white); font-size:12px; font-weight:700; flex-shrink:0; }
.badge-go { color:var(--accent-dark); }
.h1-line { display:block; }
.mark-word { position:relative; display:inline-block; isolation:isolate; white-space:nowrap; }
.mark-word svg { position:absolute; left:-5%; bottom:-.16em; width:110%; height:.32em; z-index:-1; overflow:visible; }
.stroke { fill:var(--accent); }
.lede { margin:16px 0 0; max-width:680px; font-size:17px; line-height:1.6; color:var(--text-sky); }
.lede strong { color:var(--text); font-weight:700; }
.copy .actions { justify-content:center; }
.cta-ring { display:inline-flex; padding:5px; border-radius:var(--radius-pill); background:var(--glass-strong); color:var(--text); box-shadow:inset 0 0 0 1px var(--glass-line),var(--shadow-soft); }
.cta { height:52px; padding:0 10px 0 26px; gap:12px; background:linear-gradient(180deg,var(--accent-hi) 0%,var(--accent) 62%); color:var(--white); font-size:16px; letter-spacing:-.005em; box-shadow:var(--shadow-cta); }
.cta:hover { background:var(--accent-dark); color:var(--white); }
.cta-ic { width:32px; height:32px; border-radius:var(--radius-pill); background:var(--on-accent-soft); color:var(--white); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.cta-ic svg { width:18px; height:18px; }
.ghost { height:52px; padding:0 26px; font-size:16px; }
.platforms,.chip-row { margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; }
.platforms a { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:7px 14px 7px 12px; border-radius:var(--radius-pill); background:var(--glass); color:var(--text); box-shadow:inset 0 0 0 1px var(--glass-line); text-decoration:none; font-size:13.5px; line-height:1.4; font-weight:600; }
.platforms a:hover { background:var(--glass-strong); color:var(--text); }
.platforms svg { width:15px; height:15px; display:block; flex-shrink:0; }
.stage { position:absolute; z-index:3; top:456px; left:50%; width:1060px; margin:0 0 0 -530px; height:480px; }
.frame { height:100%; padding:10px; border-radius:var(--radius-frame); background:var(--glass-frame); color:var(--text); box-shadow:inset 0 0 0 1px var(--glass-line),inset 0 1px 0 var(--white),var(--shadow-window); }
.win { height:100%; display:grid; grid-template-columns:212px 1fr 336px; background:var(--white); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-window); overflow:hidden; font-family:var(--font-body); line-height:1.4; text-align:left; }
.side { background:var(--bg-panel-2); color:var(--text); border-right:1px solid var(--border); padding:16px 14px; }
.side-brand { display:flex; align-items:center; gap:10px; padding:4px 8px 16px; margin-bottom:12px; border-bottom:1px solid var(--border); }
.app-mark { width:30px; height:30px; border-radius:var(--radius-mark); background:linear-gradient(135deg,var(--accent-hi),var(--accent-dark)); color:var(--white); display:flex; align-items:center; justify-content:center; font:800 15px var(--font-display); flex-shrink:0; }
.side-brand b { display:block; font-size:15px; font-weight:800; letter-spacing:-.01em; }
.side-brand small { display:block; font-size:11.5px; color:var(--text-muted); font-weight:500; }
.menu { list-style:none; margin:0; padding:0; }
.menu li { display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; margin:0 0 4px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:600; color:var(--text-muted); }
.menu li svg { width:17px; height:17px; flex-shrink:0; }
.menu li.on { background:var(--accent); color:var(--white); box-shadow:var(--shadow-pill); }
.settings-main { padding:20px 26px; }
.main-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.main-head b { font-size:16px; font-weight:800; letter-spacing:-.01em; }
.main-head span { font-size:12px; color:var(--text-muted); }
.group { margin-top:16px; }
.g-label { display:block; font-size:13.5px; font-weight:700; }
.g-hint { display:block; font-size:12px; color:var(--text-muted); margin-top:2px; }
.seg { margin-top:10px; display:flex; gap:4px; padding:4px; border-radius:var(--radius-pill); background:var(--bg-panel-2); color:var(--text-muted); border:1px solid var(--border); }
.seg span { flex:1; min-height:32px; display:flex; align-items:center; justify-content:center; padding:3px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:600; text-align:center; }
.seg span.on { background:var(--accent); color:var(--white); box-shadow:var(--shadow-pill); }
.rows { margin-top:16px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px; border-top:1px solid var(--border); }
.row b { display:block; font-size:13.5px; font-weight:700; }
.row small { display:block; font-size:12px; color:var(--text-muted); margin-top:2px; }
.switch { position:relative; flex-shrink:0; width:40px; height:22px; border-radius:var(--radius-pill); background:var(--switch-off); color:var(--text); }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:var(--radius-pill); background:var(--white); box-shadow:var(--shadow-knob); }
.switch.on { background:var(--accent); color:var(--white); }
.switch.on::after { left:20px; }
.select { flex-shrink:0; display:flex; align-items:center; gap:16px; min-height:32px; padding:5px 10px 5px 12px; border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--white); color:var(--text); font-size:12.5px; font-weight:600; }
.select svg { width:14px; height:14px; color:var(--text-muted); }
.aside { background:var(--bg-panel-2); color:var(--text); border-left:1px solid var(--border); padding:18px 16px; }
.form { background:var(--white); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-form); box-shadow:var(--shadow-soft); padding:16px; }
.form-head b { font-size:14.5px; font-weight:800; letter-spacing:-.01em; }
.form-head small { display:block; font-size:12px; color:var(--text-muted); margin-top:1px; }
.field { margin-top:12px; }
.field-k { display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.input { min-height:36px; display:flex; align-items:center; padding:7px 12px; border:1px solid var(--border); border-radius:var(--radius-ctl); background:var(--white); color:var(--text); font-size:13px; overflow-wrap:anywhere; }
.input.focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); font:12px/1.6 var(--font-mono); }
.caret { display:inline-block; flex-shrink:0; width:1.5px; height:16px; margin-left:1px; background:var(--accent); }
.check { margin-top:14px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.box { width:18px; height:18px; border-radius:var(--radius-check); background:var(--accent); color:var(--white); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.box svg { width:13px; height:13px; }
.btn-soft { margin-top:14px; min-height:36px; padding:8px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-ctl); background:var(--accent-soft); color:var(--accent-dark); border:1px solid var(--accent-line); font-size:13px; font-weight:700; }
.float { position:absolute; z-index:4; background:var(--white); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow-card); text-align:left; }
.float-rule { top:-70px; right:-134px; width:260px; padding:12px 14px 14px; border-radius:var(--radius-form); transform:rotate(3deg); }
.rule-head { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; line-height:1.3; }
.dot { width:8px; height:8px; border-radius:var(--radius-pill); background:var(--success); }
.rule-head em { margin-left:auto; font-style:normal; font-family:var(--font-mono); font-size:11px; color:var(--text-muted); font-weight:500; }
.float-rule pre { margin:10px 0 0; padding:9px 12px; font-size:12px; line-height:1.7; }
.tk { color:var(--text); }
.ts { color:var(--accent-dark); }
.tp { color:var(--text-muted); }
.float-clip { top:279px; left:-70px; display:flex; align-items:center; gap:12px; padding:8px 10px 8px 8px; border-radius:var(--radius-pill); transform:rotate(-3deg); }
.clip-ic { width:38px; height:38px; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.clip-ic svg { width:19px; height:19px; }
.clip-t b { display:block; font-size:13.5px; font-weight:800; line-height:1.3; }
.clip-t code { display:block; font-size:12px; color:var(--text-muted); line-height:1.4; }
.kbd { font:600 11.5px var(--font-mono); padding:4px 9px; border-radius:var(--radius-key); background:var(--bg-panel-2); color:var(--text); border:1px solid var(--border); margin-left:4px; }
.facts { padding:40px 24px 64px; }
.facts ul { max-width:1120px; margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.facts li { margin:0; padding:6px 28px; border-left:1px solid var(--border); }
.facts li:first-child { border-left:0; }
.f-k { display:block; font-size:13px; color:var(--text-muted); font-weight:600; }
.f-v { display:block; margin-top:4px; font:600 15px/1.6 var(--font-mono); color:var(--text); overflow-wrap:anywhere; }

/* 横向标签抽屉窗。 */
.tabs-window { border:1px solid var(--border); border-radius:var(--radius-window); background:var(--white); color:var(--text); box-shadow:var(--shadow-card); overflow:hidden; }
.tablist,[role="tablist"].tablist { display:flex; align-items:stretch; gap:8px; padding:12px; border-bottom:1px solid var(--border); overflow-x:auto; max-width:100%; overscroll-behavior-inline:contain; }
.tab { position:relative; display:flex; flex:1 0 150px; flex-direction:column; align-items:center; gap:10px; min-height:150px; padding:18px 12px 24px; border:0; border-radius:var(--radius-card); background:var(--white); color:var(--text); text-align:center; font:700 15px/1.5 var(--font-body); }
.tab small { color:var(--text-muted); font-size:12px; font-weight:500; }
.tab-icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:var(--radius-code); background:var(--accent-soft); color:var(--accent-dark); flex-shrink:0; }
.tab-icon svg { width:23px; height:23px; }
.tab[aria-selected="true"] { background:var(--bg-panel-2); color:var(--text); }
.tab[aria-selected="true"]::after { position:absolute; content:""; bottom:0; left:20%; right:20%; height:5px; border-radius:var(--radius-pill); background:var(--accent); }
.tab:hover { color:var(--accent-dark); }
.tabpanel { padding:36px; }
.tab-detail { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.tab-detail p { color:var(--text-muted); }
.ui-slice { padding:24px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--bg-panel-2); color:var(--text); }
.toc { position:sticky; top:0; z-index:20; display:flex; gap:8px; overflow-x:auto; max-width:100%; padding:12px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--white); color:var(--text); box-shadow:var(--shadow-soft); overscroll-behavior-inline:contain; }
.toc a { display:flex; align-items:center; flex-shrink:0; min-height:44px; padding:10px 16px; border-radius:var(--radius-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 { border:1px solid var(--border); border-radius:var(--radius-card); background:var(--white); color:var(--text); margin-bottom:12px; }
.faq-item summary { position:relative; padding:22px 52px 22px 24px; font-weight:700; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; top:20px; right:24px; color:var(--accent-dark); font-size:22px; line-height:1.4; }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 24px 24px; color:var(--text-muted); }
.faq-answer p:last-child { margin-bottom:0; }
.term-card { border-top:3px solid var(--accent); }
.term-card dt { font:800 22px/1.4 var(--font-display); }
.term-card dd { margin:14px 0 0; color:var(--text-muted); }
.term-category { display:block; margin-bottom:12px; font-size:12px; font-weight:700; color:var(--accent-dark); }
.client-card { position:relative; padding:32px; border:1px solid var(--border); border-radius:var(--radius-window); background:var(--white); color:var(--text); box-shadow:var(--shadow-soft); }
.client-card--primary { border-color:var(--accent-line); box-shadow:var(--shadow-card); }
.client-head { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; }
.client-head h3 { margin:0; }
.client-card p { color:var(--text-muted); }
.client-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.client-meta { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:18px; color:var(--text-muted); font-size:13px; }
.tag,.status-badge { display:inline-block; max-width:100%; overflow:hidden; vertical-align:middle; overflow-wrap:anywhere; padding:5px 11px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--bg-panel-2); color:var(--text-muted); font-size:12px; font-weight:600; line-height:1.5; }
.status-badge--first { background:var(--accent); color:var(--white); border-color:var(--accent); }
.status-badge--recommended { background:var(--accent-soft); color:var(--accent-dark); border-color:var(--accent-line); }
.status-badge--retired { background:var(--bg-panel-2); color:var(--text-muted); border-color:var(--border); }
.article-card { display:flex; flex-direction:column; }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:20px; color:var(--text-muted); font-size:12px; }
.article-card h3 { font-size:21px; }
.article-card h3 a { color:var(--text); text-decoration:none; }
.article-card h3 a:hover { color:var(--accent-dark); }
.article-card p { color:var(--text-muted); font-size:14px; }
.article-card .article-link { margin-top:auto; font-size:14px; font-weight:700; }
.callout { margin:24px 0; padding:24px; border:1px solid var(--accent-line); border-left:4px solid var(--accent); border-radius:var(--radius-card); background:var(--accent-soft); color:var(--text); }
.callout p:last-child { margin-bottom:0; }
.callout-title { display:block; margin-bottom:8px; font-weight:800; color:var(--accent-dark); }
.table-scroll { width:100%; max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid var(--border); border-radius:var(--radius-card); }
.data-table { width:100%; border-collapse:collapse; background:var(--white); color:var(--text); text-align:left; font-size:14px; }
.data-table th,.data-table td,.prose th,.prose td,.article-body th,.article-body td { min-width:7em; padding:16px 20px; border-bottom:1px solid var(--border); overflow-wrap:normal; word-break:normal; vertical-align:top; }
.data-table th,.prose th,.article-body th { background:var(--bg-panel-2); color:var(--text); font-weight:700; }
.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; background:var(--white); color:var(--text); font-size:14px; }
.data-table code,.prose td code,.article-body td code { overflow-wrap:anywhere; }
.download-end { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding:28px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--bg-panel-2); color:var(--text); }
.download-end h2 { margin:0 0 8px; font-size:24px; }
.download-end p { margin:0; color:var(--text-muted); }
.dl-fab { position:fixed; z-index:40; right:24px; bottom:24px; display:flex; align-items:center; gap:12px; max-width:calc(100vw - 32px); padding:12px 20px 12px 12px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--white); color:var(--text); box-shadow:var(--shadow-card); text-decoration:none; }
.dl-fab .fab-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-pill); background:var(--accent); color:var(--white); flex-shrink:0; }
.dl-fab svg { width:20px; height:20px; }
.dl-fab b { display:block; font-size:14px; }
.dl-fab small { display:block; color:var(--text-muted); font-size:12px; }
.dl-fab:hover { color:var(--accent-dark); }
.has-dl-fab .site-footer { padding-bottom:110px; }

/* 设计预览色板：每种颜色均由根令牌提供。 */
.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.swatch { padding:12px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--white); color:var(--text); }
.swatch i { display:block; height:48px; border:1px solid var(--border); border-radius:var(--radius-ctl); margin-bottom:10px; }
.swatch code { font-size:11px; }
.sw-bg { background:var(--bg); }
.sw-panel { background:var(--bg-panel); }
.sw-panel2 { background:var(--bg-panel-2); }
.sw-border { background:var(--border); }
.sw-accent { background:var(--accent); }
.sw-dark { background:var(--accent-dark); }
.sw-hi { background:var(--accent-hi); }
.sw-soft { background:var(--accent-soft); }
.sw-line { background:var(--accent-line); }
.sw-ring { background:var(--accent-ring); }
.sw-text { background:var(--text); }
.sw-muted { background:var(--text-muted); }
.sw-skytext { background:var(--text-sky); }
.sw-success { background:var(--success); }
.sw-warn { background:var(--warn); }
.sw-error { background:var(--error); }
.sw-white { background:var(--white); }
.sw-off { background:var(--switch-off); }
.sw-on { background:var(--on-accent-soft); }
.sw-skytop { background:var(--sky-top); }
.sw-skymid { background:var(--sky-mid); }
.sw-skybottom { background:var(--sky-bottom); }
.sw-cloud { background:var(--cloud); }
.sw-shade { background:var(--cloud-shade); }
.sw-far { background:var(--hill-far); }
.sw-mid { background:var(--hill-mid); }
.sw-near { background:var(--hill-near); }
.sw-nearhi { background:var(--hill-near-hi); }
.sw-tree { background:var(--tree); }
.sw-treehi { background:var(--tree-hi); }
.sw-trunk { background:var(--trunk); }
.sw-glass { background:var(--glass); }
.sw-strong { background:var(--glass-strong); }
.sw-glassline { background:var(--glass-line); }
.sw-frame { background:var(--glass-frame); }
.sw-veil { background:var(--veil); }
.sw-clear { background:var(--clear); }
.preview-stack { display:grid; gap:24px; }
.preview-buttons { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.type-display { font:800 48px/1.14 var(--font-display); letter-spacing:-.02em; margin-bottom:20px; }
@media (max-width:1240px) {
  .float { display:none; }
  .stage { left:32px; right:32px; width:auto; margin:0; }
}
@media (max-width:1080px) {
  .win { grid-template-columns:200px 1fr; }
  .aside { display:none; }
}
@media (max-width:768px) {
  .type-display { font-size:30px; }
}
@media (max-width:720px) {
  .hero { margin:6px 10px 0; height:auto; border-radius:var(--radius-mobile); }
  .copy { padding:36px 18px 0; }
  .hero h1 { font-size:clamp(24px,7vw,30px); }
  .lede { font-size:15px; }
  .stage { position:relative; top:auto; left:auto; right:auto; margin:36px 14px 0; height:360px; }
  .frame { height:440px; }
  .win { grid-template-columns:minmax(0,1fr); }
  .side { display:none; }
  .seg span { font-size:11px; }
  .facts ul { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:20px; }
  .facts li:nth-child(3) { border-left:0; }
}
@media (max-width:640px) {
  .tab { flex:0 0 auto; flex-direction:row; min-height:46px; padding:10px 18px; border-radius:var(--radius-pill); }
  .tab small,.tab-icon { display:none; }
  .tab[aria-selected="true"] { background:var(--accent); color:var(--white); }
  .tab[aria-selected="true"]::after { display:none; }
  .tabpanel { padding:22px; }
  .tab-detail { grid-template-columns:minmax(0,1fr); gap:24px; }
  .ui-slice { padding:18px; }
  .client-card { padding:24px; }
  .client-actions .button { width:100%; }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .facts { padding:32px 16px 44px; }
  .facts li { padding:6px 14px; }
  .f-v { font-size:12px; }
  .settings-main { padding:20px 16px; }
  .row { gap:10px; }
  .row .select { gap:4px; font-size:11px; padding-inline:7px; }
  .dl-fab { right:16px; bottom:16px; }
  .download-end { padding:24px; }
}