* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica,
  Arial, sans-serif; color: #1c2733; background: #fafbfc;
}
header {
  background: #14212e; color: #f2f6f9; padding: 26px 22px 20px;
}
header h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: .2px; }
.tagline { margin: 0; max-width: 880px; color: #c3d2de; font-size: 14.5px;
  line-height: 1.5; }
nav#tabs {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 16px;
  background: #1d3145; position: sticky; top: 0; z-index: 5;
}
nav#tabs button {
  border: 0; background: transparent; color: #b9cbda; padding: 8px 13px;
  font-size: 14px; border-radius: 7px; cursor: pointer;
}
nav#tabs button:hover { background: #2a4159; color: #fff; }
nav#tabs button.active { background: #3a5s7a; background: #3a577a;
  color: #fff; font-weight: 600; }
#controls {
  padding: 10px 22px; background: #eef2f6; border-bottom: 1px solid #dde4ea;
  font-size: 14px; display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center;
}
#controls label { margin-right: 2px; cursor: pointer; }
.ctl-label { font-weight: 600; color: #45586b; }
.ctl-extra { display: inline-flex; gap: 10px; align-items: center; }
main { max-width: 1060px; margin: 0 auto; padding: 10px 18px 40px; }
.tab { display: none; }
.tab.active { display: block; }
.tab h2 { margin: 24px 0 6px; font-size: 20px; }
.tab p { max-width: 860px; line-height: 1.55; color: #33465a;
  font-size: 15px; }
.plot { width: 100%; height: 430px; margin: 14px 0 26px; }
.plot.tall { height: 560px; }
#calc-ui { margin-top: 14px; }
.calc-row { display: flex; flex-wrap: wrap; gap: 22px; margin: 10px 0; }
.calc-row label { display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; min-width: 240px; color: #33465a; }
.calc-row input[type=range] { width: 240px; }
.calc-row select { width: 200px; padding: 4px; font-size: 14px; }
#calc-readout {
  background: #fff; border: 1px solid #dde4ea; border-left: 4px solid
  #3a577a; padding: 12px 16px; margin: 14px 0; font-size: 15px;
  line-height: 1.6; max-width: 860px;
}
#calc-readout b.pos { color: #b03a2e; }
#calc-readout b.neg { color: #1e7a45; }
.fine { font-size: 12.5px; color: #6a7c8e; }
#methods-body table, #pattern-compare table, #robot-import-compare table,
#ai-adoption-metadata table {
  border-collapse: collapse; font-size: 13.5px; margin: 12px 0;
  background: #fff;
}
#methods-body th, #methods-body td,
#pattern-compare th, #pattern-compare td,
#robot-import-compare th, #robot-import-compare td,
#ai-adoption-metadata th, #ai-adoption-metadata td {
  border: 1px solid #dde4ea; padding: 6px 10px; text-align: left;
  vertical-align: top;
}
#methods-body th, #pattern-compare th, #robot-import-compare th,
#ai-adoption-metadata th {
  background: #eef2f6;
}
#methods-body a { color: #2a5d8f; }
#pattern-compare h3 { margin: 18px 0 2px; font-size: 16px; }
#pattern-compare .fine { max-width: 860px; }
#robot-import-compare h3 { margin: 18px 0 2px; font-size: 16px; }
#robot-import-compare .fine { max-width: 860px; }
#robot-import-compare, #ai-adoption-metadata { overflow-x: auto; }
#ai-adoption-metadata h3 { margin: 18px 0 2px; font-size: 16px; }
#ai-adoption-metadata .fine { max-width: 860px; }
footer {
  border-top: 1px solid #dde4ea; padding: 14px 22px; font-size: 12.5px;
  color: #6a7c8e; background: #f2f5f8;
}
@media (max-width: 700px) {
  .plot, .plot.tall { height: 380px; }
}