/* Shared color normalization: keep every route on the same dark diagnostic canvas. */
:root {
  color-scheme: dark;
}
html,
body {
  background: #0d0e10;
  color: #f0f1f3;
}
.drawDefinition,
.drawMethods,
.whyFirst,
.scopeLimit,
.scopeBoundaries article:first-child {
  background: #1b1c1e !important;
  color: #f0f1f3 !important;
}
.drawDefinition h2,
.drawMethods h2,
.whyFirst h2,
.scopeLimit blockquote {
  color: #f0f1f3 !important;
}
.drawDefinition > p,
.drawMethods article p,
.whyFirst p,
.scopeLimit > p:last-child {
  color: #bebfc1 !important;
}
.drawMethods article {
  background: #242527 !important;
  color: #f0f1f3 !important;
}
.scopeBoundaries article:first-child {
  border-color: #393a3c !important;
}
.drawPrepare {
  background: #ff9d00 !important;
}
main,
section,
article {
  border-color: #393a3c;
}
.librarySearch {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 7vw;
  color: #97989a;
  font: 700 10px monospace;
  letter-spacing: 0.12em;
}
.librarySearch input {
  flex: 1;
  max-width: 460px;
  padding: 13px 15px;
  background: #151618;
  border: 1px solid #464749;
  color: #f0f1f3;
  font: 14px sans-serif;
}
.librarySearch input:focus {
  outline: 1px solid #ff9d00;
}
.sectionNav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 7vw;
  border-top: 1px solid #363739;
  border-bottom: 1px solid #363739;
  background: #141517;
  position: sticky;
  top: 0;
  z-index: 10;
}
.sectionNav a {
  padding: 8px 11px;
  color: #b5b6b8;
  text-decoration: none;
  font: 10px monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid #3d3e40;
}
.sectionNav a:hover {
  color: #ff9d00;
  border-color: #ff9d00;
}
@media (max-width: 600px) {
  .sectionNav {
    padding: 10px 18px;
    gap: 6px;
    overflow: auto;
    flex-wrap: nowrap;
  }
  .sectionNav a {
    white-space: nowrap;
  }
}
.sectionNav a {
  color: #ff9d00;
  border: 0;
}
.sectionNav a:hover {
  color: #f6f7f9;
}
.sectionNavToggle {
  display: none;
}
@media (max-width: 900px) {
  .sectionNav {
    display: block;
    padding: 0 18px;
    overflow: visible;
    flex-wrap: initial;
  }
  .sectionNavToggle {
    width: 100%;
    height: 48px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    background: none;
    color: #ff9d00;
    font: 700 11px monospace;
    letter-spacing: 0.08em;
    text-align: left;
  }
  .sectionNavToggle span {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .sectionNavToggle small {
    color: #909193;
    font: 9px monospace;
    letter-spacing: 0.06em;
  }
  .sectionNavToggle b {
    font-size: 17px;
    transition: transform 0.2s;
  }
  .sectionNav > a {
    display: none;
    min-height: 38px;
    padding: 0 2px;
    align-items: center;
    white-space: normal;
    border-top: 1px solid #2f3032;
  }
  .sectionNavOpen {
    padding-bottom: 8px;
  }
  .sectionNavOpen > a {
    display: flex;
  }
  .sectionNavOpen .sectionNavToggle b {
    transform: rotate(180deg);
  }
  .sectionNavToggle:focus-visible {
    outline: 1px solid #ff9d00;
    outline-offset: -1px;
  }
  .sectionNavOpen {
    max-height: 60vh;
    overflow-y: auto;
  }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .libraryNav .navlinks {
    gap: 12px;
  }
  .libraryNav .navlinks a,
  .navDropdown > button {
    font-size: 10px;
  }
  .libraryNav {
    padding-left: 4vw;
    padding-right: 4vw;
  }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .nav .navlinks {
    gap: 14px;
  }
  .nav .navlinks a,
  .navDropdown > button {
    font-size: 10px;
  }
}
.libraryPage p,
.scopeDetail p,
.networkPage p,
.programPage p {
  max-width: 72ch;
}
/* Compact reading mode: preserve hierarchy while reducing empty vertical space. */
body {
  line-height: 1.55;
}
.libraryHero,
.scopeLibraryHero,
.scopeDetailHero,
.drawHero,
.decisionHero,
.glossaryHero,
.wizardHero,
.setupHero,
.obdHero {
  padding-top: 78px;
  padding-bottom: 58px;
}
.libraryHero h1,
.scopeLibraryHero h1 {
  font-size: clamp(52px, 8vw, 112px);
}
.libraryNotice,
.scopeBefore {
  padding-top: 32px;
  padding-bottom: 32px;
}
.sensorList,
.networkRows,
.programCards,
.scopeTestGrid {
  padding-top: 28px;
  padding-bottom: 52px;
}
.sensorRow {
  padding-top: 20px;
  padding-bottom: 20px;
}
.whyFirst,
.scopeLimit,
.drawDefinition,
.drawMethods,
.drawPrepare,
.drawSequence,
.drawFaults,
.scopeBoundaries,
.decisionRules,
.glossaryGroups {
  padding-top: 65px;
  padding-bottom: 65px;
}
.scopeSteps {
  padding-top: 52px;
  padding-bottom: 52px;
}
.libraryFooter {
  padding-top: 45px;
  padding-bottom: 45px;
}
@media (max-width: 600px) {
  .libraryHero,
  .scopeLibraryHero,
  .scopeDetailHero,
  .drawHero,
  .decisionHero,
  .glossaryHero,
  .wizardHero,
  .setupHero,
  .obdHero {
    padding-top: 62px;
    padding-bottom: 45px;
  }
  .whyFirst,
  .scopeLimit,
  .drawDefinition,
  .drawMethods,
  .drawPrepare,
  .drawSequence,
  .drawFaults,
  .scopeBoundaries,
  .decisionRules,
  .glossaryGroups {
    padding-top: 45px;
    padding-bottom: 45px;
  }
}
body h1 {
  font-size: clamp(44px, 6.5vw, 94px) !important;
}
body h2 {
  font-size: clamp(28px, 4vw, 58px) !important;
}
body h3 {
  font-size: clamp(20px, 2.2vw, 32px) !important;
}
@media (max-width: 600px) {
  body h1 {
    font-size: clamp(38px, 13vw, 60px) !important;
  }
  body h2 {
    font-size: clamp(25px, 8vw, 42px) !important;
  }
}
body {
  font-size: 15px;
}
.libraryHero > p:last-child,
.scopeLibraryHero > div > p:last-child,
.scopeDetailHero > div > p:last-child,
.sensorHero > div > p:last-child {
  font-size: 15px !important;
}
.libraryNotice p,
.scopeBefore p,
.componentTheoryGrid p,
.theoryGrid p {
  font-size: 14px !important;
}
.systemCard p,
.sensorRow > b,
.scopeTestCard p {
  font-size: 13px !important;
}
@media (max-width: 600px) {
  h1 em,
  h2 em,
  h3 em,
  .hero em,
  .scopeLimit em {
    color: #ff9d00 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }
}
@media (max-width: 900px) {
  .hero h1 em {
    color: #ff9d00 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }
}
@media (max-width: 1200px) {
  .hero h1 em {
    color: #ff9d00 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }
}
.networkRows h2,
.networkRow h2 {
  font-size: clamp(22px, 2.5vw, 38px) !important;
  line-height: 1.05 !important;
}
.safetyBanner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 7vw;
  background: #ff745e;
  color: #180b08;
  font: 700 12px monospace;
  letter-spacing: 0.04em;
}
.safetyBanner strong {
  white-space: nowrap;
}
.safetyBanner span {
  font: 13px sans-serif;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .safetyBanner {
    display: block;
    padding: 14px 18px;
  }
  .safetyBanner strong,
  .safetyBanner span {
    display: block;
  }
  .safetyBanner span {
    margin-top: 6px;
  }
}
.mistakesPanel {
  margin: 42px 7vw;
  padding: 32px 4vw;
  background: #261815;
  border: 1px solid #68423b;
  color: #f0d4cf;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}
.mistakesPanel h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 0.9;
  margin: 15px 0 0;
}
.mistakesPanel h2 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px #ff8278;
}
.mistakesPanel ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
.mistakesPanel li {
  padding: 8px 0;
  color: #d9bbb5;
  line-height: 1.5;
  font-size: 14px;
}
.mistakesPanel li::marker {
  color: #ff8278;
}
@media (max-width: 700px) {
  .mistakesPanel {
    display: block;
    margin: 30px 18px;
    padding: 26px 22px;
  }
  .mistakesPanel ul {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }
}
.mistakesPanel {
  display: block;
  margin: 70px 7vw;
  padding: 55px 6vw;
}
.mistakesPanel h2 {
  font-size: clamp(38px, 5vw, 70px);
  margin: 20px 0 28px;
}
.mistakesPanel ul {
  display: block;
  max-width: 820px;
  margin: 0;
}
.mistakesPanel li {
  font-size: 15px;
  padding: 10px 0;
}
.mistakesPanel {
  display: grid !important;
  grid-template-columns: minmax(210px, 0.45fr) 1fr !important;
  gap: 34px !important;
  align-items: start !important;
  margin: 46px 7vw !important;
  padding: 34px 4vw !important;
}
.mistakesPanel h2 {
  font-size: clamp(30px, 4vw, 52px) !important;
  margin: 14px 0 0 !important;
}
.mistakesPanel ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 28px !important;
  max-width: none !important;
  margin: 0 !important;
}
.mistakesPanel li {
  font-size: 14px !important;
  padding: 8px 0 !important;
}
@media (max-width: 700px) {
  .mistakesPanel {
    display: block !important;
    margin: 30px 18px !important;
    padding: 26px 22px !important;
  }
  .mistakesPanel ul {
    display: block !important;
    margin-top: 18px !important;
  }
}
.mistakesPanel {
  display: block !important;
  margin: 46px 7vw !important;
  padding: 34px 4vw !important;
}
.mistakesPanel h2 {
  margin: 12px 0 28px !important;
}
.mistakesPanel ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.mistakesPanel li {
  flex: 1 1 0 !important;
  padding: 16px !important;
  background: #17100f;
  border: 1px solid #68423b;
  font-size: 13px !important;
  line-height: 1.45 !important;
  list-style: none;
}
.mistakesPanel li::marker {
  content: "";
}
@media (max-width: 700px) {
  .mistakesPanel ul {
    flex-wrap: wrap !important;
  }
  .mistakesPanel li {
    flex: 1 1 100% !important;
  }
}
.mistakesPanel {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 700px) {
  .mistakesPanel {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }
}
.mistakesPanel li {
  border: 0 !important;
  background: transparent !important;
  list-style: disc !important;
  padding: 10px 14px !important;
}
.mistakesPanel li::marker {
  content: "•" !important;
  color: #ff8278 !important;
}
.processSticky {
  position: relative !important;
  top: auto !important;
  height: auto !important;
}
.steps {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.process {
  min-height: 0 !important;
}
.process {
  padding-top: 55px !important;
  padding-bottom: 55px !important;
}
.step {
  min-height: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.mistakesPanel {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
  margin: 46px 7vw;
  padding: 34px 4vw;
}
.mistakesPanel h2 {
  font-size: clamp(30px, 4vw, 52px);
  margin: 14px 0 0;
}
.mistakesPanel ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 28px;
  max-width: none;
}
.mistakesPanel li {
  font-size: 14px;
  padding: 8px 0;
}
@media (max-width: 700px) {
  .mistakesPanel {
    display: block;
    margin: 30px 18px;
    padding: 26px 22px;
  }
  .mistakesPanel ul {
    display: block;
    margin-top: 18px;
  }
}
.mistakesPanel {
  display: block;
  margin: 70px 7vw;
  padding: 55px 6vw;
}
.mistakesPanel h2 {
  font-size: clamp(38px, 5vw, 70px);
  margin: 20px 0 28px;
}
.mistakesPanel ul {
  display: block;
  max-width: 820px;
  margin: 0;
}
.mistakesPanel li {
  font-size: 15px;
  padding: 10px 0;
}
.globalSearch {
  margin-left: auto;
}
.globalSearch input {
  width: 190px;
  padding: 9px 11px;
  background: #151618;
  border: 1px solid #464749;
  color: #f0f1f3;
  font: 12px monospace;
}
.globalSearch input:focus {
  outline: 1px solid #ff9d00;
}
@media (max-width: 900px) {
  .globalSearch {
    display: none;
  }
}
.navDropdown {
  position: relative;
}
.navDropdown > button {
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: none;
  color: #c0c1c3;
  font: 700 11px monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.navDropdown > button:hover,
.navDropdown.open > button {
  color: #ff9d00;
}
.navDropdownMenu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 190px;
  padding: 8px;
  background: #141517;
  border: 1px solid #464749;
  box-shadow: 0 16px 30px #000b;
  z-index: 30;
}
.navDropdown:hover .navDropdownMenu,
.navDropdown.open .navDropdownMenu {
  display: grid;
}
.navDropdownMenu a {
  padding: 12px;
  color: #d1d2d4 !important;
  border-bottom: 1px solid #303133;
}
.navDropdownMenu a:hover {
  color: #ff9d00 !important;
  background: #1e1f21;
}
@media (min-width: 901px) {
  .evNavDropdown .navDropdownMenu {
    left: auto;
    right: 0;
    width: max-content;
    min-width: 230px;
    max-width: calc(100vw - 24px);
  }
}
@media (max-width: 900px) {
  .navDropdown {
    width: 100%;
  }
  .navDropdown > button {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding: 0 8px;
    text-align: left;
  }
  .navDropdownMenu {
    position: static;
    box-shadow: none;
    border: 0;
    border-top: 1px solid #353638;
    padding: 0 0 0 16px;
  }
  .navDropdown:hover .navDropdownMenu {
    display: none;
  }
  .navDropdown.open .navDropdownMenu {
    display: grid;
  }
  .navDropdownMenu a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}
.setupPage {
  min-height: 100vh;
  background: #0d0e10;
  color: #f0f1f3;
}
.setupHero {
  padding: 105px 7vw 70px;
  background: radial-gradient(circle at 78% 45%, #352b1f, #0d0e10 55%);
}
.setupHero h1 {
  font-size: clamp(58px, 9vw, 130px);
  line-height: 0.82;
  margin: 32px 0;
}
.setupHero h1 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px #ff9d00;
}
.setupHero > p:last-child {
  max-width: 680px;
  color: #bebfc1;
  font-size: 18px;
  line-height: 1.7;
}
.setupTabs {
  display: flex;
  gap: 1px;
  background: #393a3c;
  padding-left: 7vw;
}
.setupTabs button {
  padding: 18px 25px;
  border: 0;
  background: #18191b;
  color: #b5b6b8;
  font: 700 11px monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.setupTabs button.active {
  background: #ff9d00;
  color: #0c0d0f;
}
.setupPanel {
  max-width: 900px;
  margin: 0 auto;
  padding: 70px 7vw;
}
.setupPanel h2 {
  font-size: 42px;
  margin: 0 0 28px;
}
.setupPanel h3 {
  color: #ff9d00;
  margin-top: 42px;
}
.setupPanel li {
  margin: 14px 0;
  color: #bebfc1;
  line-height: 1.6;
}
.setupPanel ol {
  padding-left: 22px;
}
.setupPanel ul {
  list-style: "✓  ";
  padding-left: 22px;
}
@media (max-width: 700px) {
  .setupTabs {
    padding-left: 18px;
  }
  .setupTabs button {
    flex: 1;
    padding: 15px 8px;
  }
  .setupPanel {
    padding: 50px 22px;
  }
}
.glossaryPage {
  min-height: 100vh;
  background: #0d0e10;
  color: #f0f1f3;
}
.glossaryHero {
  padding: 110px 7vw 85px;
  background: radial-gradient(circle at 78% 45%, #352b1f, #0d0e10 55%);
}
.glossaryHero h1 {
  font-size: clamp(58px, 9vw, 130px);
  line-height: 0.82;
  margin: 35px 0;
}
.glossaryHero h1 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px #ff9d00;
}
.glossaryHero > p:last-child {
  max-width: 680px;
  color: #bebfc1;
  font-size: 18px;
  line-height: 1.7;
}
.glossaryGroups {
  padding: 75px 7vw;
}
.glossaryGroup {
  margin-bottom: 70px;
}
.glossaryGroup > p {
  margin-bottom: 24px;
}
.glossaryGroup > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #393a3c;
}
.glossaryGroup article {
  padding: 32px;
  background: #18191b;
}
.glossaryGroup h2 {
  font-size: 25px;
  margin: 0 0 14px;
  color: #ff9d00;
}
.glossaryGroup p {
  color: #bebfc1;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 700px) {
  .glossaryGroup > div {
    grid-template-columns: 1fr;
  }
}
.decisionPage {
  min-height: 100vh;
  background: #0d0e10;
  color: #f0f1f3;
}
.decisionHero {
  padding: 110px 7vw 85px;
  background: radial-gradient(circle at 78% 45%, #352b1f, #0d0e10 55%);
}
.decisionHero h1 {
  font-size: clamp(58px, 9vw, 130px);
  line-height: 0.82;
  margin: 35px 0;
}
.decisionHero h1 em,
.decisionRules h2 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px #ff9d00;
}
.decisionHero > p:last-child {
  max-width: 700px;
  color: #bebfc1;
  font-size: 18px;
  line-height: 1.7;
}
.decisionGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #393a3c;
}
.decisionCard {
  padding: 48px 7vw;
  background: #18191b;
  min-height: 280px;
}
.decisionCard > span {
  font: 11px monospace;
  color: #ff9d00;
  letter-spacing: 0.1em;
}
.decisionCard h2 {
  font-size: clamp(25px, 3vw, 42px);
  line-height: 1;
  margin: 28px 0 18px;
}
.decisionCard p {
  color: #bebfc1;
  line-height: 1.7;
  max-width: 540px;
}
.decisionCard a {
  display: inline-flex;
  gap: 18px;
  margin-top: 22px;
  color: #ff9d00;
  font: 700 11px monospace;
  letter-spacing: 0.08em;
}
.decisionRules {
  padding: 90px 7vw;
  background: #151618;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 7vw;
}
.decisionRules h2 {
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.88;
  margin: 30px 0;
}
.decisionRules ol {
  margin: 0;
  padding-left: 22px;
  color: #bebfc1;
  line-height: 2;
  font-size: 17px;
}
@media (max-width: 700px) {
  .decisionGrid {
    grid-template-columns: 1fr;
  }
  .decisionRules {
    display: block;
  }
  .decisionRules ol {
    margin-top: 30px;
  }
}
.obdPage {
  min-height: 100vh;
  background: #0d0e10;
  color: #f0f1f3;
}
.obdHero {
  padding: 105px 7vw 70px;
  background: radial-gradient(circle at 78% 45%, #352b1f, #0d0e10 55%);
}
.obdHero h1 {
  font-size: clamp(58px, 9vw, 130px);
  line-height: 0.82;
  margin: 32px 0;
}
.obdHero h1 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px #ff9d00;
}
.obdHero > p:last-child {
  max-width: 700px;
  color: #bebfc1;
  font-size: 18px;
  line-height: 1.7;
}
.obdList {
  padding: 20px 7vw 80px;
  display: grid;
  gap: 16px;
}
.obdCard {
  padding: 26px;
  background: #18191b;
  border: 1px solid #393a3c;
}
.obdCard header {
  display: flex;
  align-items: baseline;
  gap: 18px;
  border-bottom: 1px solid #393a3c;
  padding-bottom: 14px;
}
.obdCard strong {
  font: 700 22px monospace;
  color: #ff9d00;
}
.obdCard h2 {
  margin: 0;
  font-size: 22px;
}
.obdCard > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.obdCard p {
  color: #bebfc1;
  line-height: 1.6;
}
.obdCard p b {
  display: block;
  color: #97989a;
  font: 700 10px monospace;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
@media (max-width: 700px) {
  .obdCard > div {
    grid-template-columns: 1fr;
  }
}
.obdPrefixGuide {
  padding: 34px 7vw;
  background: #1b1c1e;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 430px);
  align-items: center;
  gap: 60px;
}
.obdPrefixGuide p {
  color: #bebfc1;
  line-height: 1.5;
  margin: 8px 0;
  font-size: 13px;
}
.obdPrefixGuide p b {
  color: #ff9d00;
  font: 700 14px monospace;
}
.obdPrefixGuide aside {
  padding: 20px 24px;
  background: #111214;
  border: 1px solid #464749;
  display: grid;
  gap: 9px;
}
.obdPrefixGuide aside strong {
  font: 700 42px monospace;
  color: #ff9d00;
  letter-spacing: 0.08em;
}
.obdPrefixGuide aside span {
  font: 700 12px monospace;
  color: #d6d9de;
  letter-spacing: 0.15em;
}
.obdPrefixGuide aside small {
  color: #b5b6b8;
  line-height: 1.5;
}
.obdPrefixGuide aside:before {
  content: "P  |  0  |  3  |  0  |  0";
  font: 10px monospace;
  color: #88898b;
  letter-spacing: 0.18em;
}
@media (max-width: 700px) {
  .obdPrefixGuide {
    display: block;
  }
  .obdPrefixGuide aside {
    margin-top: 20px;
  }
}
.obdPrefixGuide table {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
  font-size: 12px;
}
.obdPrefixGuide th,
.obdPrefixGuide td {
  padding: 9px 10px;
  border: 1px solid #414244;
  text-align: left;
}
.obdPrefixGuide th {
  color: #ff9d00;
  font: 700 10px monospace;
  letter-spacing: 0.08em;
}
.obdPrefixGuide td {
  color: #bebfc1;
}
.wizardPage {
  min-height: 100vh;
  background: #0d0e10;
  color: #f0f1f3;
}
.wizardHero {
  padding: 105px 7vw 70px;
  background: radial-gradient(circle at 78% 45%, #352b1f, #0d0e10 55%);
}
.wizardHero h1 {
  font-size: clamp(58px, 9vw, 130px);
  line-height: 0.82;
  margin: 32px 0;
}
.wizardHero h1 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px #ff9d00;
}
.wizardHero > p:last-child {
  max-width: 680px;
  color: #bebfc1;
  font-size: 18px;
  line-height: 1.7;
}
.wizardCard {
  max-width: 860px;
  margin: 60px auto;
  padding: 42px;
  background: #18191b;
  border: 1px solid #464749;
}
.wizardProgress {
  font: 11px monospace;
  color: #97989a;
  letter-spacing: 0.12em;
}
.wizardProgress b {
  color: #ff9d00;
}
.wizardCard h2 {
  font-size: clamp(28px, 4vw, 46px);
  margin: 30px 0;
}
.wizardChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wizardChoices button,
.wizardReset {
  padding: 18px;
  text-align: left;
  background: #111214;
  border: 1px solid #464749;
  color: #ff9d00;
  font: 700 12px monospace;
  cursor: pointer;
}
.wizardChoices button:hover {
  border-color: #ff9d00;
}
.wizardResult {
  padding: 24px;
  background: #111214;
  color: #bebfc1;
  line-height: 1.7;
}
.wizardResult b {
  display: block;
  color: #ff9d00;
  font: 11px monospace;
  margin-bottom: 10px;
}
.wizardResult a {
  display: block;
  margin-top: 18px;
  color: #ff9d00;
  font: 700 11px monospace;
}
.wizardReset {
  margin-top: 18px;
}
@media (max-width: 700px) {
  .wizardCard {
    margin: 30px 18px;
    padding: 26px;
  }
  .wizardChoices {
    grid-template-columns: 1fr;
  }
}
.componentTheoryGrid,
.theoryGrid,
.drawTheory > div,
.drawMethods > div {
  grid-template-columns: 1fr !important;
}
.componentTheoryGrid article,
.theoryGrid article,
.drawTheory article,
.drawMethods article {
  min-height: 0;
}
.componentTheory,
.networkTheory,
.drawTheory,
.drawMethods {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
}
.componentTheory > header,
.networkTheory > header,
.drawTheory > header,
.drawMethods > header {
  margin-bottom: 28px !important;
}
.componentTheoryGrid article,
.theoryGrid article,
.drawTheory article,
.drawMethods article {
  padding: 22px 28px !important;
}
.componentTheoryGrid h3,
.theoryGrid h3,
.drawTheory h3,
.drawMethods h3 {
  margin: 14px 0 8px !important;
}
.libraryNav .menuToggle {
  display: none;
}
@media (max-width: 900px) {
  .libraryNav {
    display: flex;
    align-items: center;
    min-height: 72px;
    position: relative;
  }
  .libraryNav .menuToggle {
    display: block;
    order: 3;
    margin-left: auto;
    z-index: 1002;
  }
  .libraryNav .navlinks {
    display: none !important;
  }
  .libraryNav.menuOpen .navlinks {
    display: flex !important;
    z-index: 1001;
  }
  .libraryNav .navDropdown {
    width: 100%;
  }
  .libraryNav .navDropdown > button {
    width: 100%;
    min-height: 50px;
    text-align: left;
  }
  .libraryNav.menuOpen .navlinks a,
  .libraryNav.menuOpen .navlinks button {
    font-size: 13px;
  }
}
.nav.menuOpen .navlinks,
.libraryNav.menuOpen .navlinks {
  padding: 14px 18px 24px !important;
  gap: 0 !important;
  background: #0b0c0e !important;
  border-top: 1px solid #414244 !important;
  box-shadow: 0 24px 50px #000d !important;
}
.nav.menuOpen .navlinks > a,
.libraryNav.menuOpen .navlinks > a,
.nav.menuOpen .navDropdown > button,
.libraryNav.menuOpen .navDropdown > button {
  min-height: 52px !important;
  padding: 0 10px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2f3032;
  color: #e7e8ea !important;
  font: 700 12px monospace !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav.menuOpen .navDropdownMenu,
.libraryNav.menuOpen .navDropdownMenu {
  padding: 0 0 6px 14px !important;
  background: #151618 !important;
}
.nav.menuOpen .navDropdownMenu a,
.libraryNav.menuOpen .navDropdownMenu a {
  min-height: 44px !important;
  padding: 0 10px !important;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #2f3032;
  color: #c0c1c3 !important;
  font: 11px monospace !important;
}
.nav.menuOpen .navDropdown > button span,
.libraryNav.menuOpen .navDropdown > button span {
  color: #ff9d00;
  font-size: 16px;
}
@media (max-width: 900px) {
  .nav.menuOpen .navDropdown,
  .libraryNav.menuOpen .navDropdown {
    height: auto !important;
  }
  .nav.menuOpen .navDropdown > button,
  .libraryNav.menuOpen .navDropdown > button {
    height: 48px !important;
    min-height: 48px !important;
  }
  .nav.menuOpen .navlinks,
  .libraryNav.menuOpen .navlinks,
  .libraryNav.menuOpen .mobileNavlinks {
    position: fixed !important;
    inset: 71px 0 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 12px 18px 28px !important;
    background: #0b0c0e !important;
    border: 0 !important;
    border-top: 1px solid #363739 !important;
    box-shadow: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  .nav.menuOpen .navlinks > a,
  .libraryNav.menuOpen .navlinks > a,
  .nav.menuOpen .navDropdown > button,
  .libraryNav.menuOpen .navDropdown > button {
    min-height: 48px !important;
    padding: 0 8px !important;
  }
  .nav.menuOpen .navlinks > a:after,
  .libraryNav.menuOpen .navlinks > a:after {
    font-size: 13px;
  }
  .nav.menuOpen .navDropdownMenu,
  .libraryNav.menuOpen .navDropdownMenu {
    margin: 0 !important;
    padding: 2px 0 3px 12px !important;
    background: #141517 !important;
    border-left: 2px solid #ff9d00 !important;
  }
  .nav.menuOpen .navDropdownMenu a,
  .libraryNav.menuOpen .navDropdownMenu a {
    min-height: 36px !important;
    padding: 0 8px !important;
    border-bottom: 0 !important;
    color: #d1d2d4 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  .menuToggle:focus-visible {
    outline: 2px solid #ff9d00 !important;
    outline-offset: 2px !important;
  }
  .navDropdown > button:focus-visible {
    outline: 1px solid #ff9d00 !important;
    outline-offset: -1px !important;
  }
}
@media (min-width: 901px) {
  .navlinks {
    align-items: center;
  }
  .navlinks > a,
  .navDropdown,
  .navDropdown > button {
    height: 44px;
    box-sizing: border-box;
  }
  .navlinks > a,
  .navDropdown > button {
    display: flex;
    align-items: center;
    font-size: 13px;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navDropdown {
    align-items: center;
  }
}
.systemsIntro h2 em {
  color: #1b1c1e !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
@media (max-width: 600px) {
  .systemCard {
    min-height: 0 !important;
    padding: 20px !important;
  }
  .systemCard h3 {
    margin: 16px 0 10px !important;
  }
  .systemCard p {
    margin: 0 0 18px !important;
  }
  .systemCard > a,
  .systemCard .cardLinks {
    margin-top: 0 !important;
  }
  .systemCard > a {
    padding-top: 12px !important;
  }
  .systemCard .cardLinks a {
    padding: 12px 0 !important;
  }
}
.proofStats:has(> p:only-child) {
  grid-template-columns: 1fr;
}
.proofStats:has(> p:only-child) p {
  border-right: 0;
}

/* Contrast corrections: labels must adapt to the surface behind them. */
.sectionIndex,
.guideGrid .blockLabel,
.evIntro .eyebrow,
.scOrder .eyebrow {
  color: #555658 !important;
}
.scopeProcedure .blockLabel,
.prepBlock .blockLabel {
  color: #adaeb0 !important;
}
.scopePlot > p {
  color: #9a9b9d !important;
}
.evEvidence .eyebrow,
.programRule .eyebrow {
  color: #301a00 !important;
}
.scHero .eyebrow {
  color: #ff9d00 !important;
}
.scPage .lead,
.scPage .dropGrid p {
  color: #616264 !important;
}
@media (max-width: 600px) {
  .proofQuote blockquote em,
  .netPrinciple blockquote em,
  .programRule blockquote em {
    color: #1b1c1e !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }
}

/* Keep emphasized display words readable in every browser and viewport.
   Transparent fills with text strokes were unreliable on some mobile screens. */
h1 em,
h2 em,
h3 em,
blockquote em {
  color: #ff9d00 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
.proof em,
.netPrinciple em,
.drawPrepare em,
.programRule em,
.programFinalRule em,
.whyFirst em,
.evIntro em,
.evSection em,
.evEvidence em,
.scOrder em,
.scSafety em,
.testIllustrationSection em,
.systemsIntro em {
  color: #1b1c1e !important;
}
.mistakesPanel em {
  color: #ff8278 !important;
}

/* Expandable glossary entries */
.glossaryGroup > div {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 1px;
  background: #393a3c;
}
.glossaryGroup article h2 {
  margin: 0;
  font-size: clamp(1rem, 0.92rem + 0.2vw, 1.2rem) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: #bfc0c2 !important;
}
.glossaryGroup details {
  background: #18191b;
  padding: 0 28px;
}
.glossaryGroup summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  cursor: pointer;
  list-style: none;
}
.glossaryGroup summary::-webkit-details-marker {
  display: none;
}
.glossaryGroup summary h2 {
  margin: 0;
  font-size: clamp(1rem, 0.92rem + 0.2vw, 1.2rem) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: #bfc0c2 !important;
}
.glossaryGroup summary span {
  flex: 0 0 auto;
  color: #ff9d00;
  font: 24px/1 monospace;
  transition: transform 0.2s;
}
.glossaryGroup details[open] summary span {
  transform: rotate(45deg);
}
.glossaryGroup details > p {
  padding: 0 0 24px;
  margin: 0;
  color: #bebfc1;
  line-height: 1.7;
}
@media (max-width: 700px) {
  .glossaryGroup > div {
    grid-template-columns: 1fr !important;
  }
  .glossaryGroup details {
    padding: 0 22px;
  }
  .glossaryGroup summary {
    min-height: clamp(3rem, 12vw, 3.35rem);
  }
}

/* Site-wide readable type scale: display headings stay expressive without taking over. */
h1 {
  font-size: clamp(2.8rem, 6vw, 6rem) !important;
  line-height: 0.86 !important;
}
h2 {
  font-size: clamp(1.65rem, 3.4vw, 3.6rem) !important;
  line-height: 0.95 !important;
}
h3 {
  font-size: clamp(1.05rem, 1.55vw, 1.5rem) !important;
  line-height: 1.1 !important;
}
.siteCopyright {
  padding: 1.25rem 5vw;
  color: #7f8082;
  background: #0d0e10;
  border-top: 1px solid #2f3032;
  font: clamp(0.65rem, 0.6rem + 0.1vw, 0.75rem)/1.4 monospace;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

/* Consistent scale for repeated library/list entries. */
.sensorRow h2,
.networkRows h2,
.programCards h2,
.scopeTestCard h2,
.decisionCard h2,
.obdCard h2,
.variantCard h3 {
  font-size: clamp(1.3rem, 1.16rem + 0.26vw, 1.65rem) !important;
  line-height: 1.2 !important;
}

/* Compact repeated entries without shrinking touch-friendly targets. */
.sensorRow {
  min-height: 100px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.networkRows > a {
  min-height: 94px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.scopeTestCard {
  min-height: 320px !important;
  padding: 28px !important;
}
.decisionCard {
  min-height: 220px !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.obdCard {
  padding: 20px !important;
}

/* Site-wide search suggestions */
.globalSearch {
  position: relative;
  z-index: 35;
}
.globalSearchResults {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  width: min(24rem, 80vw);
  background: #111214;
  border: 1px solid #464749;
  box-shadow: 0 1rem 2.5rem #000b;
  overflow: hidden;
}
.globalSearchResults[hidden] {
  display: none;
}
.globalSearchResults a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.9rem;
  color: #cfd0d2 !important;
  background: #111214;
  text-decoration: none;
  font: 500 clamp(0.75rem, 0.7rem + 0.1vw, 0.85rem)/1.3 monospace;
  border-bottom: 1px solid #2f3032;
}
.globalSearchResults a:last-child {
  border-bottom: 0;
}
.globalSearchResults a:hover,
.globalSearchResults a.active {
  background: #202123;
  color: #ff9d00 !important;
}
.globalSearchResults a span {
  color: #ff9d00;
}
.globalSearchResults p {
  margin: 0;
  padding: 0.9rem;
  color: #97989a;
  font: 500 0.75rem/1.4 monospace;
}
@media (max-width: 900px) {
  .libraryNav .globalSearch,
  .nav .globalSearch {
    display: block;
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 1rem;
    right: 1rem;
    margin: 0;
  }
  .globalSearch input {
    width: 100% !important;
  }
  .globalSearchResults {
    width: 100%;
    max-height: 55vh;
    overflow-y: auto;
  }
}

/* JSON-driven DTC lookup */
.obdSearch {
  position: relative;
  z-index: 12;
}
.dtcSuggestions {
  position: absolute;
  top: calc(100% - 1rem);
  left: 7vw;
  right: 7vw;
  background: #111214;
  border: 1px solid #464749;
  box-shadow: 0 1rem 2.5rem #000b;
  max-height: 26rem;
  overflow-y: auto;
}
.dtcSuggestions[hidden] {
  display: none;
}
.dtcSuggestions button {
  width: 100%;
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;
  padding: 0.85rem 1rem;
  text-align: left;
  background: #111214;
  border: 0;
  border-bottom: 1px solid #2f3032;
  color: #cfd0d2;
  cursor: pointer;
}
.dtcSuggestions button:hover,
.dtcSuggestions button:focus {
  background: #202123;
  outline: 0;
}
.dtcSuggestions button b {
  color: #ff9d00;
  font: 700 0.9rem/1.3 monospace;
}
.dtcSuggestions button span {
  font: 500 0.85rem/1.35 monospace;
}
.dtcSuggestions > p {
  margin: 0;
  padding: 1rem;
  color: #97989a;
  font: 0.8rem/1.4 monospace;
}
.dtcEmpty {
  margin: 0;
  padding: 3rem 2rem;
  text-align: center;
  background: #18191b;
  border: 1px solid #393a3c;
  color: #b5b6b8;
}
.dtcEmpty b {
  display: block;
  margin-bottom: 0.7rem;
  color: #ff9d00;
  font: 0.8rem/1.3 monospace;
  letter-spacing: 0.12em;
}
.dtcEmpty p {
  margin: 0;
  font-size: 0.9rem;
}
.selectedDtc {
  max-width: 74rem;
  margin: auto;
}
@media (max-width: 600px) {
  .dtcSuggestions {
    left: 1rem;
    right: 1rem;
  }
  .dtcSuggestions button {
    grid-template-columns: 4.5rem 1fr;
    gap: 0.65rem;
    padding: 0.75rem;
  }
  .dtcEmpty {
    padding: 2rem 1rem;
  }
}
.librarySearch {
  position: relative;
  z-index: 20;
}
.librarySearchResults {
  position: absolute;
  left: 7vw;
  right: 7vw;
  top: calc(100% - 0.25rem);
  max-height: min(28rem, 60vh);
  overflow-y: auto;
  background: #101113;
  border: 1px solid #444547;
  box-shadow: 0 1.25rem 3rem #000c;
}
.librarySearchResults[hidden] {
  display: none;
}
.librarySearchResults a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  color: #dedfe1;
  text-decoration: none;
  border-bottom: 1px solid #303133;
  background: #101113;
}
.librarySearchResults a:hover,
.librarySearchResults a.active {
  background: #1f2022;
  color: #ff9d00;
}
.librarySearchResults a span {
  font-size: clamp(0.82rem, 0.76rem + 0.12vw, 0.94rem);
}
.librarySearchResults a b {
  flex: 0 0 auto;
  color: #ff9d00;
  font: 700 0.68rem monospace;
  letter-spacing: 0.06em;
}
.librarySearchResults p {
  margin: 0;
  padding: 1rem;
  color: #959698;
  font: 0.78rem monospace;
}
@media (max-width: 700px) {
  .librarySearchResults {
    left: 1.1rem;
    right: 1.1rem;
    max-height: 55vh;
  }
  .librarySearchResults a {
    padding: 0.8rem;
  }
}
/* Consistent history control on every page. */
.pageBack {
  position: absolute;
  z-index: 25;
  top: 104px;
  left: clamp(18px, 2.5vw, 38px);
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #606163;
  border-radius: 2px;
  background: #0d0e10dd;
  color: #ff9d00;
  font: 700 10px monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.pageBack:hover,
.pageBack:focus-visible {
  border-color: #ff9d00;
  background: #ff9d00;
  color: #0c0d0f;
}
.pageBack:focus-visible {
  outline: 2px solid #f4f5f7;
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .pageBack {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: max-content;
    margin: 58px 18px 0;
    min-height: 40px;
    padding: 0 14px;
  }
}

/* Pin30 engine emblem: charcoal, metallic silver and orange. */
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand .brandLogo { display: block; width: 64px; height: 64px; object-fit: contain; border-radius: 10px; }
.brand .brandName { display: block; color: #f0f1f3; font: 900 20px/1.1 Arial, Helvetica, sans-serif; letter-spacing: -0.5px; }
.brand .brandName small { display: block; margin: 6px 0 0; color: #b8bcc3; font: 8px/1.2 monospace; letter-spacing: 0.14em; }
.brand:hover .brandName { color: #ffb333; }
@media (max-width: 600px) {
  .brand { gap: 9px; }
  .brand .brandLogo { width: 48px; height: 48px; border-radius: 7px; }
  .brand .brandName { font-size: 17px; }
  .brand .brandName small { font-size: 7px; margin-top: 4px; }
}

/* Written signal interpretation; verified captures can be added at HTML slots. */
.waveformNotes { margin: 24px 0; padding: 24px; border: 1px solid #3a3b3d; background: #111214; }
.waveformNotes > h3 { margin: 0 0 20px; color: #f0f1f3; font-size: 21px !important; line-height: 1.3; }
.waveformNotesGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
.waveformNotes h4 { margin: 0 0 10px; color: #ff9d00; font-size: 15px; line-height: 1.4; }
.waveformNotes p { margin: 0; color: #bbc0c6; font: 14px/1.75 Arial,Helvetica,sans-serif; }
.scopeDetail > .waveformNotes, .drawPage > .waveformNotes { margin: 30px 7vw; }
.variantCard .waveformNotes { margin: 0; border-left: 0; border-right: 0; }
.variantCard .waveformNotesGrid { grid-template-columns: minmax(0,1fr); }
.dualPlots { display: block; }
@media (max-width: 700px) { .waveformNotesGrid { grid-template-columns: minmax(0,1fr); } }