/* ─── Material Performance page ─── */
  .mp-hero {
    position: relative;
    padding: 148px var(--pad-x) 88px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }
  .mp-hero .section-inner { position: relative; z-index: 2; }
  .mp-eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 28px;
  }
  .mp-eyebrow::before {
    content: ""; width: 40px; height: 1px; background: var(--accent);
  }
  .mp-hero h1 { margin: 0 0 28px; }
  .mp-lede {
    font-family: var(--mono); font-size: 14px; line-height: 1.8;
    color: var(--ink-2); max-width: 66ch; letter-spacing: 0.01em;
  }
  .mp-jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
  .mp-jump a {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-2);
    border: 1px solid var(--line); background: var(--panel);
    padding: 11px 16px; display: inline-flex; align-items: center; gap: 10px;
    transition: color 0.2s, border-color 0.2s, transform 0.2s;
  }
  .mp-jump a .n { color: var(--accent); }
  .mp-jump a:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-2px); }

  .s-mat .mp-head {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px;
    align-items: start;
  }
  .mp-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
  .mp-tag {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-2);
    border: 1px solid var(--line); padding: 8px 12px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .mp-tag::before { content: ""; width: 5px; height: 5px; background: var(--accent); display: inline-block; }

  /* snapshot card */
  .mp-snapshot {
    border: 1px solid var(--line); background: var(--panel);
    padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 24px;
    align-self: start;
  }
  .snap-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent);
    padding-bottom: 16px; border-bottom: 1px solid var(--line);
  }
  .snap-head .method { color: var(--ink-3); letter-spacing: 0.14em; }
  .mp-meters { display: flex; flex-direction: column; gap: 18px; }
  .mp-meter { display: grid; grid-template-columns: 62px 1fr 74px; align-items: center; gap: 16px; }
  .mp-meter .m-label { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); }
  .mp-meter .m-track { height: 8px; background: var(--bg-3); position: relative; }
  .mp-meter .m-fill { height: 100%; background: var(--accent); box-shadow: 0 0 10px var(--accent-soft); }
  .mp-meter .m-val { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent); text-align: right; }

  /* caption + tables */
  .mp-caption {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--ink);
    margin: 56px 0 18px; display: flex; align-items: center; gap: 10px;
  }
  .mp-caption::before { content: "■"; color: var(--accent); font-size: 9px; }
  .mp-table {
    width: 100%; border-collapse: collapse;
    border: 1px solid var(--line); background: var(--panel);
    font-family: var(--mono); font-size: 12px;
  }
  .mp-table th, .mp-table td {
    text-align: left; padding: 13px 18px;
    border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
    letter-spacing: 0.01em;
  }
  .mp-table th:last-child, .mp-table td:last-child { border-right: 0; }
  .mp-table tbody tr:last-child td { border-bottom: 0; }
  .mp-table thead th {
    background: var(--bg); font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent); font-weight: 600;
    white-space: nowrap;
  }
  .mp-table thead th:first-child { color: var(--ink-2); }
  .mp-table td { color: var(--ink-2); }
  .mp-table td.prop { color: var(--ink); font-weight: 600; }
  .mp-table td.method { color: var(--ink-3); font-size: 11px; }
  .mp-table tr.grp td {
    background: var(--bg-2); color: var(--ink); font-weight: 700;
    letter-spacing: 0.02em;
  }
  .mp-table td.sub { padding-left: 34px; color: var(--ink); font-weight: 500; }

  .mp-grades { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .mp-grades.three { grid-template-columns: repeat(3, 1fr); }
  .mp-grade {
    border: 1px solid var(--line); background: var(--panel);
    padding: 22px; display: flex; flex-direction: column; gap: 12px;
    transition: border-color 0.2s, transform 0.2s;
  }
  .mp-grade:hover { border-color: var(--accent); transform: translateY(-2px); }
  .mp-grade .idx { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ink-3); }
  .mp-grade .code { font-family: var(--mono); font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
  .mp-grade .den { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); }
  .mp-grade p { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink-2); margin: 6px 0 0; }

  .mp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 56px; }
  .mp-two .mp-caption { margin-top: 0; }

  /* standards */
  .s-standards { background: var(--bg); }
  .mp-std { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 44px; align-items: start; }
  .mp-std h4 {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 8px;
    display: flex; align-items: center; gap: 10px;
  }
  .std-item {
    display: grid; grid-template-columns: 128px 1fr; gap: 18px;
    padding: 13px 0; border-bottom: 1px solid var(--line);
  }
  .std-item .c { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink); }
  .std-item .d { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--ink-2); }

  /* cta band */
  .mp-cta { background: var(--bg); text-align: center; }
  .mp-cta .section-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
  .mp-cta .section-title { max-width: 22ch; }
  .mp-cta .cta-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
  .mp-cta .btn-primary {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 18px 28px;
    background: var(--accent); color: var(--bg);
    border: 0; border-radius: 0;
    font-family: var(--mono); font-size: 12px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    box-shadow: 0 0 24px rgba(31,157,87,0.35);
    transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
  }
  .mp-cta .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 32px rgba(31,157,87,0.55); }
  .mp-cta .btn-ghost {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 24px;
    background: transparent; color: var(--ink);
    border: 1px solid var(--line-2); border-radius: 0;
    font-family: var(--mono); font-size: 12px; font-weight: 400;
    letter-spacing: 0.22em; text-transform: uppercase;
    transition: border-color 0.2s, color 0.2s;
  }
  .mp-cta .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

  /* interactivity + viz */
  .gsel { cursor: pointer; }
  [data-grade] { transition: opacity 0.25s; }
  [data-grade].dim { opacity: 0.32; }
  .mp-grade.on { border-color: var(--accent); transform: translateY(-2px); }
  .mp-table th[data-grade]:hover { color: var(--ink); }
  .mp-table th.colsel { color: var(--bg); background: var(--accent); }
  .mp-table td.colsel { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--ink); font-weight: 600; }
  .mp-table tbody tr:hover td { background: color-mix(in oklab, var(--accent) 6%, transparent); }
  .hint-click { margin-left: auto; color: var(--ink-3); letter-spacing: 0.12em; font-weight: 400; text-transform: none; }
  .mp-chart { width: 100%; height: auto; display: block; }
  .mp-chart .gl { stroke: var(--line); stroke-width: 1; }
  .mp-chart .al { font: 600 9px var(--mono); fill: var(--ink-3); letter-spacing: 0.08em; }
  /* .ln 是承载图那条平滑曲线（一条 path）；polyline 是几个产品页里静态写死的折线。
     两者同一套画法与同一段展开动画，选择器并列写，谁也不影响谁。 */
  .mp-chart .curve polyline, .mp-chart .curve .ln { fill: none; stroke-width: 2.25; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(0.22,1,0.36,1) 0.25s, stroke-width 0.18s; }
  .reveal.in .mp-chart .curve polyline, .reveal.in .mp-chart .curve .ln { stroke-dashoffset: 0; }
  .mp-chart .curve circle { opacity: 0; transition: opacity 0.4s 1.1s; }
  .reveal.in .mp-chart .curve circle { opacity: 1; }
  .mp-chart .curve text { font: 700 10px var(--mono); letter-spacing: 0.06em; }
  .mp-chart .c1 { stroke: var(--accent); } .mp-chart .c1t { fill: var(--accent); }
  .mp-chart .c2 { stroke: color-mix(in oklab, var(--accent) 72%, var(--ink)); } .mp-chart .c2t { fill: color-mix(in oklab, var(--accent) 72%, var(--ink)); }
  .mp-chart .c3 { stroke: color-mix(in oklab, var(--accent) 48%, var(--ink-2)); } .mp-chart .c3t { fill: color-mix(in oklab, var(--accent) 48%, var(--ink-2)); }
  .mp-chart .c4 { stroke: color-mix(in oklab, var(--accent) 30%, var(--ink-3)); } .mp-chart .c4t { fill: color-mix(in oklab, var(--accent) 30%, var(--ink-3)); }
  /* 标签压在别的线上就糊了，所以文字先描一圈底再填色：paint-order 让描边走在填色
     前面，等于给每个字垫了一层背景。描边色跟面板背景的 token 走，深色主题换 token
     时它自己跟着换，不写死白色。 */
  .mp-chart .el {
    font: 700 9.5px var(--mono); letter-spacing: 0.1em; opacity: 0; transition: opacity 0.4s 1.2s;
    paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round;
  }
  .reveal.in .mp-chart .el { opacity: 1; }
  /* 引线：标签为了不压住别人挪开之后，用一条细线连回它的曲线／点／方框。 */
  .mp-chart .ll { stroke-width: 1; stroke-opacity: 0.55; opacity: 0; transition: opacity 0.4s 1.2s; }
  .reveal.in .mp-chart .ll { opacity: 1; }
  .reveal .m-fill { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(0.22,1,0.36,1) 0.2s; display: block; }
  .reveal.in .m-fill { transform: scaleX(1); }
  .mp-grade .use-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-top: 4px; }
  .mp-grade .use { font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ink); margin: 0; padding-left: 12px; border-left: 2px solid var(--accent); }
  .mp-grade p { margin-top: 0; }

  .mp-chart .curve rect { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform 1s cubic-bezier(0.22,1,0.36,1) 0.25s; }
  .reveal.in .mp-chart .curve rect { transform: scaleY(1); }
  .mp-chart .vl { font: 600 8.5px var(--mono); opacity: 0; transition: opacity 0.4s 0.9s; }
  .reveal.in .mp-chart .vl { opacity: 1; }

  @media (max-width: 1080px) {
    .s-mat .mp-head { grid-template-columns: 1fr; gap: 40px; }
    .mp-grades, .mp-grades.three { grid-template-columns: repeat(2, 1fr); }
    .mp-two, .mp-std { grid-template-columns: 1fr; gap: 40px; }
  }
  .section.s-mat:first-of-type { padding-top: 150px; }
/* bar-chart fills for material pages */
.mp-chart rect.b1{fill:var(--accent)}
.mp-chart rect.b2{fill:color-mix(in oklab, var(--accent) 72%, var(--ink))}
.mp-chart rect.b3{fill:color-mix(in oklab, var(--accent) 48%, var(--ink-2))}
.mp-chart rect.b4{fill:color-mix(in oklab, var(--accent) 30%, var(--ink-3))}
.mp-grades.two{grid-template-columns:repeat(2,1fr)}
.mp-table.wide th,.mp-table.wide td{padding:12px 12px;font-size:11.5px}

/* need-picker */
.np{border:1px solid var(--line);background:var(--panel);padding:26px 28px 28px;margin:38px 0 30px}
.np-k{font-family:var(--mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.np-k::before{content:"";width:28px;height:1px;background:var(--accent)}
.np-row{display:flex;flex-wrap:wrap;gap:10px}
.np-row button{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);background:transparent;border:1px solid var(--line);padding:11px 15px;cursor:pointer;transition:color .18s,border-color .18s,background .18s,transform .18s}
.np-row button:hover{color:var(--ink);border-color:var(--accent);transform:translateY(-2px)}
.np-row button.on{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700}
/* 选材框的输出区里现在只有一句指路话，一栏就够。旧的 .np-pick / .np-why（人工挑
   推荐材料那一版的两个容器）与 .dimc（那一版给表格列打灰的类）都没有发射者了。 */
.np-out{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:none}
.np-out.show{display:block}

.mp-chart .c5{stroke:color-mix(in oklab, var(--accent) 34%, var(--ink-2))}
.mp-chart .c5t{fill:color-mix(in oklab, var(--accent) 34%, var(--ink-2))}
.cmp{border:1px solid var(--line);background:var(--panel);padding:24px 28px 20px;margin-bottom:34px}
.cmp .mp-chart{max-width:1000px;margin:8px auto 0;--s1:var(--accent);--s2:oklch(0.55 0.105 218);--s3:oklch(0.63 0.125 62);--s4:oklch(0.52 0.115 328);--s5:oklch(0.46 0.045 255)}
.cmp .mp-chart .c1{stroke:var(--s1)}.cmp .mp-chart .c1t{fill:var(--s1)}
.cmp .mp-chart .c2{stroke:var(--s2)}.cmp .mp-chart .c2t{fill:var(--s2)}
.cmp .mp-chart .c3{stroke:var(--s3)}.cmp .mp-chart .c3t{fill:var(--s3)}
.cmp .mp-chart .c4{stroke:var(--s4)}.cmp .mp-chart .c4t{fill:var(--s4)}
.cmp .mp-chart .c5{stroke:var(--s5)}.cmp .mp-chart .c5t{fill:var(--s5)}
.cmp .curve{transition:opacity .25s}
.cmp .curve.dim{opacity:.18}
.cmp-note{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--ink-3);margin:14px 0 0}

.cmp-legend{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:6px}
.cmp-legend .lg{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--ink-2);border:0}
.cmp-legend .lg:hover{color:var(--ink)}
.cmp-legend .lg i{width:20px;height:2px;display:inline-block;background:currentColor}
.cmp-legend .c1l{color:var(--accent)}
.cmp-legend .c2l{color:oklch(0.55 0.105 218)}
.cmp-legend .c3l{color:oklch(0.63 0.125 62)}
.cmp-legend .c4l{color:oklch(0.52 0.115 328)}
.cmp-legend .c5l{color:oklch(0.46 0.045 255)}
.cmp .snap-head .sep{color:var(--ink-3)}

/* ── 12-dimension performance vector ── */
.vec{margin-top:26px}
.vec-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.vec-tabs button{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);padding:10px 14px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.vec-tabs button:hover{color:var(--ink);border-color:var(--line-2)}
.vec-tabs button.on{color:var(--bg);background:var(--accent);border-color:var(--accent)}
.vec-scale{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-bottom:12px;border-bottom:1px solid var(--line)}
.vec-scale .sabs{color:var(--accent);white-space:nowrap}
.vec-scale .sabs.rel{color:var(--ink-3)}
.vec-rows{display:flex;flex-direction:column}
.vec-row{display:grid;grid-template-columns:78px 1fr 62px 132px;align-items:center;gap:14px;padding:11px 4px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--ink-2);transition:background .18s}
.vec-row:hover{background:color-mix(in oklab,var(--accent) 6%,transparent)}
.vec-row .vc{font-weight:700;font-size:13px;color:var(--ink);letter-spacing:.04em}
.vec-row .vbar{position:relative;height:10px;background:var(--bg-3);overflow:hidden}
.vec-row .vbar .solid{position:absolute;left:0;top:0;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,1,.36,1) .1s}
.vec-row .vbar .range{position:absolute;top:0;height:100%;background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--accent) 45%,transparent) 0 3px,transparent 3px 6px);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,1,.36,1) .28s}
.reveal.in .vec-row .vbar .solid,.reveal.in .vec-row .vbar .range{transform:scaleX(1)}
.vec-row .vnum{font-weight:700;color:var(--accent);text-align:right;font-size:11.5px}
.vec-row .vraw{color:var(--ink-3);font-size:11px;letter-spacing:.02em}
.vec-row .vnote{grid-column:2/5;color:var(--ink-3);font-size:11px;line-height:1.55;margin-top:-2px;padding-right:20px}
.vec-key{display:flex;flex-wrap:wrap;gap:22px;margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.vec-key b{font-size:12px}
.vec-mod{font-family:var(--mono);font-size:11.5px;line-height:1.65;color:var(--accent);margin:16px 0 0;padding-left:12px;border-left:2px solid var(--accent)}
@media(max-width:1080px){.vec-row{grid-template-columns:70px 1fr 54px}.vec-row .vraw{display:none}.vec-row .vnote{grid-column:2/4}}

/* ── camp lineup (13 materials) ── */
.camp{margin-top:44px;border-top:1px solid var(--line);padding-top:26px}
.camp-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.camp-head .cn-n{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--accent)}
.camp-head h3{font-family:var(--sans);font-size:19px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.01em}
[data-lang="cn"] .camp-head h3{font-family:var(--cn)}
.camp-head .cn-note{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);line-height:1.6;flex:1 1 320px;min-width:240px}
.camp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;margin-top:20px}
.mcard{border:1px solid var(--line);background:var(--panel);padding:20px;display:flex;flex-direction:column;gap:9px;transition:border-color .2s,transform .2s}
.mcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.mcard .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mcard .code{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.mcard .tier{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;padding:4px 7px;border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap}
.mcard .tier.a{color:var(--accent);border-color:var(--accent)}
.mcard .full{font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.5}
.mcard .den{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--accent)}
.mcard p{font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--ink-2);margin:2px 0 0}

/* ── machine window + modification ── */
.win-table td.yes{color:var(--accent);font-weight:700}
.win-table td.no{color:var(--ink-3);font-weight:600}
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.mod-card{border:1px solid var(--line);background:var(--panel);padding:24px;display:flex;flex-direction:column;gap:12px}
.mod-card .k{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.mod-card h3{font-family:var(--sans);font-size:17px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.01em}
[data-lang="cn"] .mod-card h3{font-family:var(--cn)}
.mod-card p{font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--ink-2);margin:0}
.mod-card .lim{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--ink-3);padding-top:12px;border-top:1px solid var(--line);margin-top:auto}
@media(max-width:1080px){.mod-grid{grid-template-columns:1fr}}

/* ── B-tier reference-value banner ── */
.bref{border:1px solid var(--line-2);background:var(--bg-2);padding:18px 22px;display:flex;gap:16px;align-items:flex-start;margin-top:22px}
.bref .tag{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:5px 8px;white-space:nowrap}
.bref p{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--ink-2);margin:0}

/* comparison chart: B-tier series colours + reference-value legend marker */
/* c6 / c8 / c9 / c10 / c11 / c12 / c13 / c14：五种量产泡沫之外还够格上曲线的材料。
   c7 留给单点。八个是数出来的：现在够格上曲线的非量产泡沫正好八种（2026-09-07 新增
   EPE，comp10 也给了两个逐档点），颜色不够就会有两条曲线同色，而这张图上「谁是谁」
   全靠颜色。色相在已用的那几个之间挑最大的空档
   （已用：20 / 62 / 100 / 125 / 150 / 190 / 218 / 255 / 265 / 300 / 328 / 354），
   c13 落 170（accent 的 150 与 c6 的 190 之间，各差 20 度）、c14 落 236（c2 的 218 与
   c5 的 255 之间，各差 17～18 度）；这两个与最近的邻居只差二十度上下，光靠色相不够，
   所以另用明度大幅拉开——c13 压到 0.40（比 c6 暗 0.10）、c14 提到 0.66（比 c2 亮
   0.11），量级对齐 c11/c12 那一档（c11 与最近邻 s4 差 0.1014、c12 与最近邻 s1 差
   0.0833，都是靠这个量级的 ΔL 才把 OKLab 距离拉开）。2026-09-07 曾按 c13=0.48/
   c14=0.60 上过一版——色相虽拉开了，明度只差 0.02～0.05，OKLab 全配对距离一算，
   c6–c13 0.0488、c2–c14 0.0629，反而比改动前全图最紧的一对 c2–c6（0.0753）还紧，
   而 c6/c13 又恰好同图分给 EPE 与 ETPEE，当场复现了这条注释史本身在防的撞色；现在
   这一版按上面的明度重算，全图最紧的一对仍是原来的 c2–c6 0.0753，没有引入更紧的
   新一对。十三条曲线本来就超出「靠颜色认」的舒适区，图上每条线还有自己的名字与
   图例兜底。
   注意 c9–c14 是 SVG 里的描边类，与左边参数按钮的 data-p="c10"（10% 压缩应力那一项）
   同名不同物，前者只在 .mp-chart 里选中，两者碰不到一起。 */
.cmp .mp-chart{--s6:oklch(0.50 0.12 190);--s7:oklch(0.50 0.15 300);--s8:oklch(0.56 0.07 265);
  --s9:oklch(0.53 0.15 20);--s10:oklch(0.55 0.11 100);
  --s11:oklch(0.44 0.14 354);--s12:oklch(0.66 0.13 125);
  --s13:oklch(0.40 0.13 170);--s14:oklch(0.66 0.12 236)}
.cmp .mp-chart .c6{stroke:var(--s6)}.cmp .mp-chart .c6t{fill:var(--s6)}
.cmp .mp-chart .c7{stroke:var(--s7)}.cmp .mp-chart .c7t{fill:var(--s7)}
.cmp .mp-chart .c8{stroke:var(--s8)}.cmp .mp-chart .c8t{fill:var(--s8)}
.cmp .mp-chart .c9{stroke:var(--s9)}.cmp .mp-chart .c9t{fill:var(--s9)}
.cmp .mp-chart .c10{stroke:var(--s10)}.cmp .mp-chart .c10t{fill:var(--s10)}
.cmp .mp-chart .c11{stroke:var(--s11)}.cmp .mp-chart .c11t{fill:var(--s11)}
.cmp .mp-chart .c12{stroke:var(--s12)}.cmp .mp-chart .c12t{fill:var(--s12)}
.cmp .mp-chart .c13{stroke:var(--s13)}.cmp .mp-chart .c13t{fill:var(--s13)}
.cmp .mp-chart .c14{stroke:var(--s14)}.cmp .mp-chart .c14t{fill:var(--s14)}
.cmp-legend .c6l{color:oklch(0.50 0.12 190)}
.cmp-legend .c7l{color:oklch(0.50 0.15 300)}
.cmp-legend .c8l{color:oklch(0.56 0.07 265)}
.cmp-legend .c9l{color:oklch(0.53 0.15 20)}
.cmp-legend .c10l{color:oklch(0.55 0.11 100)}
.cmp-legend .c11l{color:oklch(0.44 0.14 354)}
.cmp-legend .c12l{color:oklch(0.66 0.13 125)}
.cmp-legend .c13l{color:oklch(0.40 0.13 170)}
.cmp-legend .c14l{color:oklch(0.66 0.12 236)}
/* 图例三种记号各一个样子：曲线一条短线、单点一个圆点、区间一个斜纹小方块 */
.cmp-legend .dotl i{width:9px;height:9px;border-radius:50%;background:currentColor}
.cmp .cdot{transition:opacity .25s}
.cmp .cdot.dim{opacity:.18}
.cmp .cbox{transition:opacity .25s}
.cmp .cbox.dim{opacity:.18}
/* 图上每个材料整个包在一条去它产品页的链接里：点那条线就是点这个材料。指过去（或者
   Tab 到）时这一条加粗、别的淡下去，让「现在指的是谁」一眼可见；移开就复原。 */
.cmp .mp-chart a.mat{cursor:pointer}
.cmp .mp-chart .curve.lit .ln{stroke-width:3.5}
.cmp .mp-chart .cbox.lit .bx{stroke-width:2.4}

/* ── free-form material comparison ── */
.pk{margin-top:30px}
.pk-bar{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);background:var(--panel);padding:22px 24px}
.pk-k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.pk-chips{display:flex;flex-wrap:wrap;gap:8px}
.pk-chip{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);padding:9px 14px;cursor:pointer;transition:color .18s,border-color .18s,background .18s}
.pk-chip:hover:not(:disabled){color:var(--ink);border-color:var(--line-2)}
.pk-chip.on{color:var(--bg);background:var(--accent);border-color:var(--accent)}
.pk-chip:disabled{opacity:.34;cursor:not-allowed}
.pk-quick{display:flex;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.pk-quick button{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);background:none;border:0;padding:2px 0;cursor:pointer;transition:color .18s}
.pk-quick button:hover{color:var(--accent)}
.pk-quick button+button{padding-left:10px;border-left:1px solid var(--line)}
.pk-empty{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:26px 0 0}
.pk-table{margin-top:18px;table-layout:fixed;border-collapse:separate;border-spacing:0}
/* 表头粘在 sticky 选择器下沿；--pk-sticky-top 由 dbm-compare-tool.js 量得后写入 */
.pk-table thead th{vertical-align:top;padding-top:14px;position:sticky;top:var(--pk-sticky-top,74px);z-index:6}
.pk-table thead th a{font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--ink);text-transform:none;display:block}
.pk-table thead th a:hover{color:var(--accent)}
.pk-table thead th .t{display:block;margin-top:5px;font-size:8.5px;letter-spacing:.14em;color:var(--ink-3);font-weight:500}
.pk-table td.prop{width:22%;vertical-align:top}
.pk-table td.prop .u{display:block;margin-top:4px;font-size:10px;font-weight:400;letter-spacing:.02em;color:var(--ink-3);text-transform:none}
.pk-table td{vertical-align:top;line-height:1.4}
.pk-table td .v{display:block;font-size:12.5px;font-weight:700;color:var(--ink)}
.pk-table td .mb{display:block;height:5px;background:var(--bg-3);margin:8px 0 6px}
.pk-table td .mb i{display:block;height:100%;background:color-mix(in oklab,var(--accent) 55%,transparent)}
.pk-table td.win .mb i{background:var(--accent)}
.pk-table td .sc{display:block;font-size:10px;letter-spacing:.06em;color:var(--ink-3)}
.pk-table td .nt{display:block;margin-top:7px;font-size:10.5px;line-height:1.5;color:var(--ink-3)}
.pk-table td.win{background:color-mix(in oklab,var(--accent) 9%,transparent)}
.pk-table td.win .v{color:var(--accent)}
.pk-table td.nd{color:var(--ink-3);font-size:14px}
@media(max-width:1080px){.pk-table td .nt{display:none}}

.pk-bar{gap:0;padding:0}
.pk-set{display:flex;flex-direction:column;gap:14px;padding:22px 24px}
.pk-set+.pk-set{border-top:1px solid var(--line);background:var(--bg-2)}
.pk-chip.pk-p{font-weight:500;letter-spacing:.02em;font-size:11.5px}
.pk-chip.pk-p.g::after{content:"▲";font-size:7px;margin-left:6px;opacity:.6;vertical-align:middle}

/* unified compare tool */
.pk-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap}
.pk-head .pk-quick{padding-top:0;border-top:0;display:flex;gap:10px}
.pk-view{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}
.pk-seg{display:flex;border:1px solid var(--line-2)}
.pk-seg button{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:none;border:0;padding:10px 16px;cursor:pointer;transition:color .18s,background .18s}
.pk-seg button+button{border-left:1px solid var(--line-2)}
.pk-seg button:hover{color:var(--ink)}
.pk-seg button.on{color:var(--bg);background:var(--accent)}
.pk-hint{font-family:var(--mono);font-size:10.5px;line-height:1.6;color:var(--ink-3);flex:1 1 260px;min-width:220px}
.vg{margin-top:30px}
.vg:first-child{margin-top:22px}
.vg-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
.vg-n{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.vg-s{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3);text-align:right}
.vg-miss{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);margin:10px 0 0}
.pk-table.dense{font-size:11px}.pk-table.dense td.prop{width:14%}.pk-table.dense th,.pk-table.dense td{padding:11px 10px}.pk-table.dense td .nt{display:none}.pk-table.dense td .v{font-size:11.5px}.pk-table.dense thead th a{font-size:12.5px}
.pk-scroll{width:100%}
.pk-float-head{position:fixed;z-index:250;overflow:hidden;pointer-events:none;background:var(--panel);box-shadow:0 7px 16px rgba(16,35,26,.12)}
.pk-float-head[hidden]{display:none!important}
.pk-float-head__viewport{height:100%;overflow:hidden;}
.pk-float-head .pk-table{margin:0}
.pk-float-head .pk-table thead th{position:static;top:auto}
.pk-float-head .pk-table tbody{visibility:hidden}
@media (max-width: 760px) {
  /* 不能让整页横向溢出；容器本身支持触摸、鼠标滚轮和键盘横向浏览。 */
  .cmp-page .pk-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .cmp-page .pk-table{min-width:540px}
  .cmp-page .pk-table td.prop{width:132px}
  /* 原表头留在文档流里；越过导航后再由副本接力，避免刚进表格就盖住「轻量」。 */
  .cmp-page .pk-table thead th{position:static}
  /* 纵向吸顶由脚本生成的整行表头副本承担；它随数据区一起横向移动，离开表格即隐藏。 */
}

/* ── 按需选材（dbm-need-ranker.js）与图区（dbm-compare-chart.js） ──
 * 图区的区间条骨架直接复用对比页条形视图的 .vec-row / .vbar，只在前面多插一个
 * 名次格，保证两处的条子看起来就是同一套刻度。选材框那边不用这套骨架。 */
/* 选材框：一行按序念完这一维的 13 种材料，名字之间「 › 」分隔，窄屏自然换行；
   下面一句话把头五个连同数值念出来。原先那五条带条子的行已经退场——同一份榜在
   下面的图区里画得更清楚，选材框只留最轻的那一行。 */
.np-line{font-family:var(--mono);font-size:12px;line-height:2;letter-spacing:.04em;color:var(--ink-3);margin:0;word-break:break-word}
.np-line .np-name{font-weight:700;color:var(--ink);transition:color .18s}
.np-line .np-name:hover{color:var(--accent)}
.np-say{font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--ink-2);margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
/* 名次 · 代号 · 条 · 原值，四格到底。0–10 分只决定条长，不再印成字——「6.2–10」
 * 摆在「15–60 kg/m³」旁边，客户读不出它是什么。 */
.cmp-bars .vec-row{grid-template-columns:26px 62px 1fr 120px;gap:10px;padding:8px 2px}
.cmp-bars .rk{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3)}
/* 条子底下那一行刻度：与上面的行同一套栅格，所以刻度正落在条子那一列底下。
   两端那两个数贴着边排，不然会各露一半在栏外。 */
.cmp-bars .vec-axis{display:grid;grid-template-columns:26px 62px 1fr 120px;gap:10px;padding:6px 2px 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-3)}
.cmp-bars .vec-axis .ax{position:relative;height:14px;border-top:1px solid var(--line)}
.cmp-bars .vec-axis .ax i{position:absolute;top:3px;font-style:normal;transform:translateX(-50%);white-space:nowrap}
.cmp-bars .vec-axis .ax i:first-child{transform:none}
.cmp-bars .vec-axis .ax i:last-child{transform:translateX(-100%)}
.vec-row .est{font-style:normal;margin-left:5px;color:var(--accent)}

/* 图区：左边一竖排参数按钮，右边按参数换成最合适的那种图 */
.cmp-split{display:grid;grid-template-columns:178px minmax(0,1fr);gap:24px;align-items:start}
.cmp-pick{display:flex;flex-direction:column;gap:6px}
/* tab 的外壳只为 ARIA 结构存在，display:contents 让它不参与排版 */
.cmp-pick .cmp-tabs{display:contents}
.cmp-pick button{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);background:transparent;border:1px solid var(--line);padding:9px 11px;cursor:pointer;text-align:left;transition:color .18s,border-color .18s,background .18s}
.cmp-pick button:hover{color:var(--ink);border-color:var(--accent)}
.cmp-pick button.on{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700}
.cmp-pick button .u{display:block;margin-top:4px;font-size:9px;letter-spacing:.06em;text-transform:none;color:var(--ink-3)}
.cmp-pick button.on .u{color:var(--bg);opacity:.82}
/* 这一列的最后一格：去对比工具的链接。占位跟页签一格一样——同宽（列是 flex 纵排、
   横向拉满）、同间距（.cmp-pick 的 gap）、同圆角（两边都不圆）、内边距同一组值，
   高度直接钉成页签那一格的 50px（页签是「名称 + 单位」两行，在页面上量出来就是这个数）。
   钉死而不是让它自己长：中文一行、英文换行成两行，不钉的话两种语言下这一格会各高各的，
   与上面五格一比就露馅。行高压到 1.25，英文那两行才装得进这 50px。
   外观取站内绿色主按钮那一套：它是「去别处」不是「换这张图」，与页签明确分开。 */
.cmp-pick .cmp-more{font-family:var(--mono);font-size:10.5px;line-height:1.25;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:0;padding:9px 11px;height:50px;display:flex;align-items:center;gap:8px;text-align:left;box-shadow:0 0 22px rgba(31,157,87,.28);transition:filter .18s,box-shadow .18s}
.cmp-pick .cmp-more .n{color:#fff}
.cmp-pick .cmp-more:hover{color:#fff;filter:brightness(1.08);box-shadow:0 4px 28px rgba(31,157,87,.45)}
.cmp-view{min-width:0}
.cmp-bars{margin-top:10px}
.cmp-ladder{margin-top:14px}
.ld-row{display:grid;grid-template-columns:52px 170px minmax(0,1fr);gap:14px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line)}
.ld-row:last-child{border-bottom:0}
.ld-k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3)}
.ld-k b{font-size:15px;color:var(--accent)}
.ld-t{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-2)}
.ld-set{display:flex;flex-wrap:wrap;gap:7px}
.ld-chip{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);padding:6px 9px;transition:border-color .18s,color .18s}
.ld-chip:hover{border-color:var(--accent);color:var(--accent)}
.ld-chip i{font-style:normal;font-weight:400;font-size:9.5px;letter-spacing:.04em;color:var(--ink-3);margin-left:6px}
@media(max-width:1080px){
  /* 原值在窄屏必须留着：.vec-row .vraw 在 1080 断点下是 display:none（对比页
   * 的表格靠它省宽度），可区间条的原值就是这一行的主语，藏掉等于只剩一个
   * 没有单位的分数。这里把它显式放回来，并把名次/代号/分数三格收窄让出位置。 */
  .cmp-bars .vec-row,.cmp-bars .vec-axis{grid-template-columns:22px 50px minmax(56px,1fr) minmax(72px,auto);gap:8px}
  .cmp-bars .vec-row .vraw{display:block;font-size:10px}
  .np-line{font-size:11px;line-height:2.1}
  .cmp-split{grid-template-columns:1fr;gap:16px}
  .cmp-pick{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  /* 窄屏这一列变成横向滚动的一行，最后那一格跟在「柔软」后面，尺寸与其他格一致。 */
  .cmp-pick button,.cmp-pick .cmp-more{flex:0 0 auto}
  .ld-row{grid-template-columns:46px minmax(0,1fr);row-gap:9px}
  .ld-set{grid-column:1/3}
}

/* ── 承载图里的区间方框 ──
 * 斜纹＝这一片只有两个端点、没有逐档数据点，所以不连成曲线。
 * 斜纹用一种中性灰（说的是「区间」这件事），边框与标签各用各的颜色（说的是「是谁」）。 */
.cmp .mp-chart{--rng1:oklch(0.58 0.10 145);--rng2:oklch(0.50 0.09 30);--rng3:oklch(0.56 0.07 265);--rng4:oklch(0.58 0.11 95);--rng5:oklch(0.48 0.10 350);--rng6:oklch(0.52 0.08 190);--rng7:oklch(0.44 0.05 40)}
.cmp .mp-chart .rng1{stroke:var(--rng1)}.cmp .mp-chart .rng1t{fill:var(--rng1)}
.cmp .mp-chart .rng2{stroke:var(--rng2)}.cmp .mp-chart .rng2t{fill:var(--rng2)}
.cmp .mp-chart .rng3{stroke:var(--rng3)}.cmp .mp-chart .rng3t{fill:var(--rng3)}
.cmp .mp-chart .rng4{stroke:var(--rng4)}.cmp .mp-chart .rng4t{fill:var(--rng4)}
.cmp .mp-chart .rng5{stroke:var(--rng5)}.cmp .mp-chart .rng5t{fill:var(--rng5)}
.cmp .mp-chart .rng6{stroke:var(--rng6)}.cmp .mp-chart .rng6t{fill:var(--rng6)}
.cmp .mp-chart .rng7{stroke:var(--rng7)}.cmp .mp-chart .rng7t{fill:var(--rng7)}
/* 斜纹在 CSS 里也钉一遍：fill 属性压不过任何一条 CSS 规则，光靠 fill="url(#…)" 一旦
   被别处的 rect 选择器撞上就会变成实心——实心读起来像「这一片测过」，正好说反了。 */
.cmp .mp-chart .bx{fill:url(#cmpBoxHatch);fill-opacity:1;stroke-width:1.4}
.cmp .mp-chart .hx{stroke:var(--ink-3);stroke-width:1.1;opacity:.55}
.cmp .mp-chart .cbox .el{font-size:9px}
.cmp-legend .rng1l{color:oklch(0.58 0.10 145)}
.cmp-legend .rng2l{color:oklch(0.50 0.09 30)}
.cmp-legend .rng3l{color:oklch(0.56 0.07 265)}
.cmp-legend .rng4l{color:oklch(0.58 0.11 95)}
.cmp-legend .rng5l{color:oklch(0.48 0.10 350)}
.cmp-legend .rng6l{color:oklch(0.52 0.08 190)}
.cmp-legend .rng7l{color:oklch(0.44 0.05 40)}
/* 图例里方框那一档换成一个带斜纹的小方块，与曲线的那条短线一眼分得开 */
.cmp-legend .bxl i{width:12px;height:9px;border:1px solid currentColor;background:repeating-linear-gradient(45deg,currentColor 0 1px,transparent 1px 4px);opacity:.85}
/* 打了星的数值配的那一句脚注：选材框与图区共用一种样子 */
.np-foot,.cmp-foot{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;line-height:1.6;color:var(--ink-3);margin:10px 0 0}

/* 阵营卡片正好 5～6 张时排三列，比 auto-fill 的两列半更齐整（参考设计） */
.camp-cards:has(>:nth-child(5)):not(:has(>:nth-child(7))){grid-template-columns:repeat(3,1fr)}

/* ── 参考设计 2026-09-11：材料页正文改用 Instrument Sans，中文仍走 Noto Sans SC ── */
.mp-lede,.mp-body p,.mp-note p,.mp-sec p{font-family:var(--body);letter-spacing:0}
[data-lang="cn"] .mp-lede,[data-lang="cn"] .mp-body p,[data-lang="cn"] .mp-note p,[data-lang="cn"] .mp-sec p{font-family:var(--cn);letter-spacing:.01em}