.interactive-article.article-dead-salmons {
  color-scheme: inherit;
  --surface-1: var(--card-bg, var(--main-bg));
  --surface-2: var(--bs-tertiary-bg);
  --ink-1: var(--heading-color);
  --ink-2: var(--text-color);
  --ink-3: var(--text-muted-color);
  --rule: var(--main-border-color);
  --rule-strong: var(--tb-border-color, var(--main-border-color));
  --s1: #2a78d6;
  --s2: #d95b2a;
  --s3: #14835f;
  --s4: #aa7200;
  --s7: #5c4bb9;
  --good: #0a890a;
  --warn: #a86e00;
  --crit: #c73535;
  --wash-1: rgb(42 120 214 / 9%);
  --wash-2: rgb(235 104 52 / 10%);
  --wash-3: rgb(27 175 122 / 10%);
  --shadow: 0 1px 2px rgb(11 11 11 / 5%), 0 8px 24px -12px rgb(11 11 11 / 18%);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink-1);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.78;
  letter-spacing: 0.005em;
}

html[data-bs-theme="dark"] .interactive-article.article-dead-salmons {
  --s1: #5a9df0;
  --s2: #e97749;
  --s3: #35bd8d;
  --s4: #e1a51f;
  --s7: #9a91eb;
  --good: #35bd5a;
  --warn: #e1a51f;
  --crit: #ee7373;
  --wash-1: rgb(90 157 240 / 14%);
  --wash-2: rgb(233 119 73 / 15%);
  --wash-3: rgb(53 189 141 / 15%);
  --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 10px 30px -14px rgb(0 0 0 / 70%);
}

.interactive-article.article-dead-salmons,
.interactive-article.article-dead-salmons * {
  box-sizing: border-box;
}

.interactive-article.article-dead-salmons .wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

.interactive-article.article-dead-salmons .article-intro {
  position: relative;
  margin: 0 0 32px;
  padding: 0 0 28px;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(760px 220px at 12% -35%, var(--wash-1), transparent 62%),
    radial-gradient(620px 220px at 92% -25%, var(--wash-2), transparent 64%);
}

.interactive-article.article-dead-salmons .intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 28px;
  align-items: center;
}

.interactive-article.article-dead-salmons .source-art {
  width: 100%;
  max-width: 190px;
  justify-self: end;
}

.interactive-article.article-dead-salmons .source-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  transform: rotate(-4deg);
  filter: drop-shadow(0 12px 24px rgb(0 0 0 / 18%));
}

html[data-bs-theme="dark"] .interactive-article.article-dead-salmons .source-art img {
  filter: drop-shadow(0 12px 24px rgb(0 0 0 / 52%));
}

.interactive-article.article-dead-salmons .kicker {
  margin-bottom: 12px;
  color: var(--s2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.interactive-article.article-dead-salmons .subtitle {
  max-width: 46em;
  margin: 0 0 18px;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.68;
}

.interactive-article.article-dead-salmons .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  color: var(--ink-3);
  font-size: 13.5px;
}

.interactive-article.article-dead-salmons .meta a,
.interactive-article.article-dead-salmons a {
  color: var(--s1);
}

.interactive-article.article-dead-salmons .article-body {
  min-width: 0;
  padding: 0 0 28px;
}

.interactive-article.article-dead-salmons h2 {
  margin: 68px 0 12px;
  color: var(--ink-1);
  font-size: clamp(23px, 3.2vw, 30px);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.35;
  scroll-margin-top: 4rem;
}

.interactive-article.article-dead-salmons h3 {
  margin: 38px 0 9px;
  color: var(--ink-1);
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.45;
}

.interactive-article.article-dead-salmons h4 {
  margin: 26px 0 6px;
  color: var(--ink-1);
  font-size: 16.5px;
  font-weight: 700;
}

.interactive-article.article-dead-salmons p {
  margin: 14px 0;
}

.interactive-article.article-dead-salmons strong,
.interactive-article.article-dead-salmons b {
  font-weight: 680;
}

.interactive-article.article-dead-salmons em {
  padding: 0 1px;
  background: linear-gradient(transparent 62%, var(--wash-2) 62%);
  font-style: normal;
}

.interactive-article.article-dead-salmons code {
  padding: 0.12em 0.38em;
  border-radius: 5px;
  background: var(--wash-1);
  color: var(--ink-1);
  font-family: var(--mono);
  font-size: 0.87em;
}

.interactive-article.article-dead-salmons .lede {
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.72;
}

.interactive-article.article-dead-salmons ul,
.interactive-article.article-dead-salmons ol {
  margin: 14px 0;
  padding-left: 1.35em;
}

.interactive-article.article-dead-salmons li {
  margin: 7px 0;
}

.interactive-article.article-dead-salmons hr.sep {
  margin: 52px 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.interactive-article.article-dead-salmons .card,
.interactive-article.article-dead-salmons .tldr,
.interactive-article.article-dead-salmons .demo,
.interactive-article.article-dead-salmons .tool {
  background: var(--surface-1);
  box-shadow: var(--shadow);
}

.interactive-article.article-dead-salmons .card {
  margin: 26px 0;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-radius: 14px;
}

.interactive-article.article-dead-salmons .tldr {
  margin: 32px 0;
  padding: 22px 26px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--s2);
  border-radius: 12px;
}

.interactive-article.article-dead-salmons .tldr h3 {
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.interactive-article.article-dead-salmons .tldr ol {
  margin: 0;
  padding-left: 1.2em;
}

.interactive-article.article-dead-salmons .note,
.interactive-article.article-dead-salmons .warnbox {
  margin: 22px 0;
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  color: var(--ink-2);
  font-size: 15.5px;
}

.interactive-article.article-dead-salmons .note {
  border-left: 3px solid var(--s1);
  background: var(--wash-1);
}

.interactive-article.article-dead-salmons .warnbox {
  border-left: 3px solid var(--s2);
  background: var(--wash-2);
}

.interactive-article.article-dead-salmons .mynote {
  margin: 24px 0;
  padding: 16px 20px;
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 15.5px;
}

.interactive-article.article-dead-salmons .mynote .tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 1px 9px;
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.interactive-article.article-dead-salmons figure {
  margin: 32px 0;
}

.interactive-article.article-dead-salmons figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
}

.interactive-article.article-dead-salmons figcaption {
  margin-top: 11px;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.62;
}

.interactive-article.article-dead-salmons figcaption b {
  color: var(--ink-2);
}

.interactive-article.article-dead-salmons .eq {
  max-width: 100%;
  margin: 22px 0;
  padding: 4px 0;
  overflow-x: auto;
  color: var(--ink-1);
  font-size: 19px;
  line-height: 1.9;
  text-align: center;
  overscroll-behavior-inline: contain;
}

.interactive-article.article-dead-salmons .eq mjx-container[display="true"] {
  min-width: max-content;
  margin: 0.5em auto !important;
}

.interactive-article.article-dead-salmons .eqlabel {
  margin: -12px 0 22px;
  color: var(--ink-3);
  font-size: 12.5px;
  text-align: center;
}

.interactive-article.article-dead-salmons .tbl {
  display: table;
  width: 100%;
  min-width: 0;
  margin: 22px 0;
  border-collapse: collapse;
  font-size: 14.5px;
  table-layout: fixed;
  white-space: normal;
}

.interactive-article.article-dead-salmons .tbl th {
  padding: 9px 14px;
  border-bottom: 1.5px solid var(--rule-strong);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.interactive-article.article-dead-salmons .tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: top;
}

.interactive-article.article-dead-salmons .tbl td:first-child {
  color: var(--ink-1);
  font-weight: 650;
}

.interactive-article.article-dead-salmons .pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.interactive-article.article-dead-salmons .pill.no {
  background: rgb(208 59 59 / 13%);
  color: var(--crit);
}

.interactive-article.article-dead-salmons .pill.yes {
  background: rgb(12 163 12 / 13%);
  color: var(--good);
}

.interactive-article.article-dead-salmons .pill.half {
  background: rgb(250 178 25 / 18%);
  color: var(--warn);
}

.interactive-article.article-dead-salmons .demo {
  margin: 34px 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 16px;
}

.interactive-article.article-dead-salmons .demo-hd {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--rule);
}

.interactive-article.article-dead-salmons .demo-hd .lab {
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--s2);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.interactive-article.article-dead-salmons .demo-hd h4 {
  margin: 0;
  font-size: 16.5px;
}

.interactive-article.article-dead-salmons .demo-hd .sub {
  flex-basis: 100%;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.6;
}

.interactive-article.article-dead-salmons .demo-body {
  padding: 20px 22px 22px;
}

.interactive-article.article-dead-salmons .ctrls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.interactive-article.article-dead-salmons .ctrl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
}

.interactive-article.article-dead-salmons .ctrl label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.03em;
}

.interactive-article.article-dead-salmons .ctrl label b {
  color: var(--s1);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

.interactive-article.article-dead-salmons input[type="range"] {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  appearance: none;
  background: var(--rule-strong);
  cursor: pointer;
  outline: none;
}

.interactive-article.article-dead-salmons input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--surface-1);
  border-radius: 50%;
  appearance: none;
  background: var(--s1);
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
  cursor: pointer;
}

.interactive-article.article-dead-salmons input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--surface-1);
  border-radius: 50%;
  background: var(--s1);
  cursor: pointer;
}

.interactive-article.article-dead-salmons .seg {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  background: var(--surface-2);
}

.interactive-article.article-dead-salmons .seg button {
  padding: 7px 13px;
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.interactive-article.article-dead-salmons .seg button:last-child {
  border-right: 0;
}

.interactive-article.article-dead-salmons .seg button.on {
  background: var(--s1);
  color: #fff;
}

.interactive-article.article-dead-salmons .btn {
  padding: 8px 15px;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink-1);
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
}

.interactive-article.article-dead-salmons .btn:hover {
  border-color: var(--ink-3);
}

.interactive-article.article-dead-salmons .btn.pri {
  border-color: var(--s1);
  background: var(--s1);
  color: #fff;
}

.interactive-article.article-dead-salmons .readout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.interactive-article.article-dead-salmons .stat {
  flex: 1 1 130px;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: var(--surface-2);
}

.interactive-article.article-dead-salmons .stat .k,
.interactive-article.article-dead-salmons .stat .h {
  color: var(--ink-3);
  font-size: 11.5px;
}

.interactive-article.article-dead-salmons .stat .k {
  font-weight: 650;
  letter-spacing: 0.04em;
}

.interactive-article.article-dead-salmons .stat .v {
  margin-top: 2px;
  font-size: 23px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  line-height: 1.25;
}

.interactive-article.article-dead-salmons .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 12.5px;
}

.interactive-article.article-dead-salmons .legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.interactive-article.article-dead-salmons .legend i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.interactive-article.article-dead-salmons canvas {
  display: block;
  max-width: 100%;
}

.interactive-article.article-dead-salmons .verdict {
  margin-top: 14px;
  padding: 11px 15px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
}

.interactive-article.article-dead-salmons .verdict.bad {
  background: rgb(208 59 59 / 11%);
  color: var(--crit);
}

.interactive-article.article-dead-salmons .verdict.ok {
  background: rgb(12 163 12 / 11%);
  color: var(--good);
}

.interactive-article.article-dead-salmons .verdict.mid {
  background: rgb(250 178 25 / 15%);
  color: var(--warn);
}

.interactive-article.article-dead-salmons .tool {
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 13px;
}

.interactive-article.article-dead-salmons .tool > summary {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 15px 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  list-style: none;
}

.interactive-article.article-dead-salmons .tool > summary::-webkit-details-marker {
  display: none;
}

.interactive-article.article-dead-salmons .tool > summary::after {
  margin-left: auto;
  color: var(--ink-3);
  content: "+";
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.interactive-article.article-dead-salmons .tool[open] > summary::after {
  content: "−";
}

.interactive-article.article-dead-salmons .tool > summary .en {
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.interactive-article.article-dead-salmons .tool .body {
  margin: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 15.5px;
}

.interactive-article.article-dead-salmons .tool .body dt {
  margin-top: 12px;
  color: var(--ink-1);
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.interactive-article.article-dead-salmons .tool .body dt:first-child {
  margin-top: 0;
}

.interactive-article.article-dead-salmons .tool .body dd {
  margin: 3px 0 0;
  padding: 0;
}

.interactive-article.article-dead-salmons .tool .fail b {
  color: var(--s2);
}

.interactive-article.article-dead-salmons .grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.interactive-article.article-dead-salmons .mini {
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface-2);
}

.interactive-article.article-dead-salmons .mini h4 {
  margin: 0 0 6px;
  font-size: 15px;
}

.interactive-article.article-dead-salmons .mini p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
}

.interactive-article.article-dead-salmons .ref {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.62;
}

.interactive-article.article-dead-salmons .article-footer {
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.7;
}

.interactive-article.article-dead-salmons .tag-cite {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12.5px;
}

@media (max-width: 720px) {
  .interactive-article.article-dead-salmons .intro-grid,
  .interactive-article.article-dead-salmons .grid2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .interactive-article.article-dead-salmons .source-art {
    width: 150px;
    justify-self: center;
  }

  .interactive-article.article-dead-salmons #d5grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .interactive-article.article-dead-salmons {
    font-size: 16px;
  }

  .interactive-article.article-dead-salmons .article-intro {
    padding-bottom: 24px;
  }

  .interactive-article.article-dead-salmons .subtitle {
    font-size: 16.5px;
  }

  .interactive-article.article-dead-salmons h2 {
    margin-top: 54px;
  }

  .interactive-article.article-dead-salmons .card,
  .interactive-article.article-dead-salmons .tldr {
    padding: 18px 16px;
  }

  .interactive-article.article-dead-salmons .demo-hd {
    padding: 14px 15px 13px;
  }

  .interactive-article.article-dead-salmons .demo-body {
    padding: 16px 14px 18px;
  }

  .interactive-article.article-dead-salmons .ctrl {
    min-width: 130px;
  }

  .interactive-article.article-dead-salmons .seg {
    flex-wrap: wrap;
  }

  .interactive-article.article-dead-salmons .seg button {
    flex: 1 1 auto;
  }
}