@charset "UTF-8";
:root {
  font-family:Inter,"Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  color:#303c3a;
  background:#e6e7e1;
  font-synthesis:none;
  font-size:14px;
  --paper:#f5f5f0;
  --line:#d6d9d0;
  --muted:#828c87;
  --teal:#286455;
  --amber:#bc801f;
  --blue:#477d98
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  padding:32px 24px 24px
}
button,select {
  font:inherit;
  color:inherit
}
button,a,select,input {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer;
  border:1px solid #cbd1c7;
  background:#f8f9f4;
  min-height:38px;
  border-radius:3px;
  padding:8px 17px;
  transition:background .12s,border-color .12s
}
button:hover:not(:disabled) {
  background:#e6eae1;
  border-color:#a8b4a8
}
button:active:not(:disabled) {
  transform:translateY(1px)
}
button:disabled {
  cursor:default;
  color:#a2aaa3;
  border-color:#d9ded4;
  background:#f0f2eb
}
button:focus-visible,a:focus-visible,select:focus-visible {
  outline:2px solid var(--teal);
  outline-offset:4px
}
button svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  vertical-align:middle
}
button[hidden],[hidden] {
  display:none!important
}
.instrument {
  max-width:1380px;
  margin:0 auto;
  background:var(--paper);
  border:1px solid #bdc6ba;
  box-shadow:0 5px 20px #333b2b08
}
.topbar {
  height:73px;
  display:flex;
  align-items:center;
  gap:50px;
  padding:0 30px;
  border-bottom:1px solid var(--line);
  background:#eeefe9
}
.brand {
  display:flex;
  align-items:center;
  text-decoration:none;
  color:#34443e;
  gap:11px;
  white-space:nowrap
}
.brand svg {
  width:25px;
  height:25px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8
}
.brand strong {
  letter-spacing:.13em;
  font-size:16px
}
.brand>span {
  border-left:1px solid #bac4b8;
  padding-left:14px;
  font:10px ui-monospace,monospace;
  letter-spacing:.16em;
  color:#889388
}
.topbar nav {
  align-self:stretch;
  display:flex;
  gap:24px
}
.tab {
  padding:0 10px;
  border:none;
  background:none;
  border-radius:0;
  position:relative;
  font-size:14px;
  letter-spacing:.1em;
  min-width:52px;
  color:#899188
}
.tab.active {
  color:var(--teal);
  font-weight:600
}
.tab.active:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  background:var(--teal)
}
.tab:hover:not(:disabled) {
  background:#e4e8df
}
.connection {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  color:#7d877f;
  font-size:12px;
  white-space:nowrap
}
i#connection-dot,.switch-status i {
  display:inline-block;
  height:7px;
  width:7px;
  border-radius:50%;
  background:#b9c2b7
}
.connection .usb-tag {
  margin-left:16px;
  padding-left:15px;
  border-left:1px solid var(--line);
  font:11px ui-monospace,monospace
}
.connection i.online,.switch-status i.on {
  background:#33715b!important
}
.workspace {
  display:grid;
  grid-template-columns:42% 58%
}
.readouts {
  padding:26px 30px 0;
  border-right:1px solid var(--line)
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:24px
}
.section-heading h1,.section-heading h2,h2 {
  margin:0;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em
}
.section-heading h1 {
  font-size:15px
}
.section-heading h1 span {
  font-size:12px;
  font-weight:400;
  margin-left:12px;
  color:#849086
}
.small-label {
  font-size:11px;
  color:#8a958b;
  letter-spacing:.06em
}
.meter {
  padding:22px 0 13px;
  border-bottom:1px solid var(--line)
}
.meter-label {
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#647267
}
.meter-label i {
  width:3px;
  height:12px;
  background:#8a9b82
}
.meter.voltage i {
  background:var(--blue)
}
.meter.current i {
  background:var(--amber)
}
.meter-label span {
  font:9px ui-monospace,monospace;
  letter-spacing:.12em;
  color:#a1aaa0;
  margin-left:2px
}
.meter-value {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-left:11px;
  margin-top:0;
  height:80px
}
.meter-value output {
  font-family:"DejaVu Sans Mono","SFMono-Regular",Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:clamp(44px,5.2vw,72px);
  line-height:1.12;
  font-weight:400;
  letter-spacing:-.065em;
  color:#35483c;
  min-width:0
}
.meter-value>span {
  font-size:19px;
  color:#6c786d;
  min-width:36px;
  text-align:right
}
.readout-summary {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:22px 0;
  gap:22px
}
.readout-summary>div+div {
  border-left:1px solid var(--line);
  padding-left:26px
}
.readout-summary span {
  display:block;
  color:#859081;
  font-size:11px;
  margin-bottom:10px
}
.readout-summary strong {
  font:21px "DejaVu Sans Mono",monospace;
  color:#56654f;
  font-variant-numeric:tabular-nums;
  font-weight:400
}
.readout-summary small {
  font-size:10px;
  color:#99a18f;
  margin-left:7px
}
.port-controls {
  padding:26px 30px 24px
}
.path-panel {
  margin:27px 0 24px;
  padding:16px 18px 13px;
  background:#eef0e8;
  border:1px solid #dce0d5;
  border-radius:3px
}
.path-diagram {
  width:100%;
  height:auto;
  display:block;
  overflow:visible
}
.path-diagram text {
  font-size:12px;
  fill:#65725f;
  font-family:inherit
}
.path-diagram .path {
  fill:none;
  stroke:#9aa88b;
  stroke-width:1.5
}
.path-diagram .path text {
  fill:#7b876d;
  stroke:none;
  font:10px ui-monospace,monospace;
  letter-spacing:.03em
}
.path-diagram .diagram-caption {
  font-size:10px;
  fill:#939e86
}
.path-diagram .dut-box {
  fill:#e6ebdc;
  stroke:#aebb9f;
  stroke-width:1
}
.path-diagram .dut-label {
  font:13px ui-monospace,monospace;
  fill:#66765a
}
.path-diagram .path.unknown {
  stroke-dasharray:4 4;
  opacity:.7
}
.path-diagram .path.on {
  stroke:#4c7c57
}
.path-diagram .path.on .switch-arm {
  d:path("M173 40h34")
}
.path-diagram .data-path.on .switch-arm {
  d:path("M173 125h34")
}
.path-caption {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:10px;
  color:#96a08b;
  border-top:1px solid #dce1d1;
  padding-top:12px;
  margin-top:14px
}
.switch-controls {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.cc-readout {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #dce1d1;
}
.cc-heading, .cc-values, .cc-values > div {
  display: flex;
  align-items: baseline;
}
.cc-heading {
  justify-content: space-between;
  gap: 12px;
}
.cc-heading h3 {
  font-size: 11px;
  font-weight: 500;
  color: #65725f;
  margin: 0;
}
.cc-heading > span, .cc-values dt {
  font-size: 10px;
  color: #7c886f;
}
.cc-values {
  margin: 10px 0 7px;
  gap: 16px;
}
.cc-values > div {
  flex: 1;
  gap: 12px;
}
.cc-values > div + div {
  border-left: 1px solid #dce1d1;
  padding-left: 16px;
}
.cc-values dd {
  font: 15px ui-monospace, monospace;
  margin: 0;
  color: #56654f;
}
.cc-values .detected {
  color: var(--teal);
}
.cc-readout p {
  margin: 0;
  font-size: 10px;
  color: #7c886f;
  line-height: 1.7;
}
.switch-controls fieldset {
  border:0;
  margin:0;
  padding:0;
  min-width:0
}
.switch-controls legend {
  font-size:13px;
  width:100%;
  padding:0
}
.switch-controls legend span {
  font:10px ui-monospace,monospace;
  color:#9ca595;
  margin-left:8px
}
.switch-status {
  margin:12px 0 14px;
  font-size:12px;
  color:#849178;
  display:flex;
  align-items:center;
  gap:7px
}
.segmented {
  display:flex
}
.segmented button {
  width:50%;
  border-radius:0;
  min-height:43px;
  background:#f0f2eb
}
.segmented button:first-child {
  border-radius:3px 0 0 3px
}
.segmented button:last-child {
  border-radius:0 3px 3px 0;
  border-left:0
}
.segmented button.selected {
  background:#e2eadd!important;
  box-shadow:inset 0 -2px #52835e;
  color:#315c3e!important
}
.all-off {
  width:100%;
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:41px;
  font-size:12px
}
.all-off span {
  font-size:10px;
  color:#a0a995;
  margin-left:auto
}
.all-off svg {
  margin-left:auto
}
.connect-row {
  margin-top:28px;
  padding-top:19px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.connect-row p {
  margin:0;
  font-size:11px;
  color:#8a9580;
  max-width:210px;
  line-height:1.8
}
.primary {
  background:#346757;
  color:#f4f7ee;
  border-color:#346757;
  min-width:164px;
  min-height:43px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px
}
.primary:hover:not(:disabled) {
  background:#295546;
  border-color:#295546
}
.primary:disabled {
  background:#7c9886;
  color:#e4e9df
}
.recorder {
  border-top:1px solid var(--line);
  padding:0 30px
}
.recorder-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:19px 0 15px
}
.recorder-title {
  display:flex;
  align-items:center;
  gap:16px
}
.recorder-title h2 {
  font-size:13px
}
.recorder-title>span {
  font-size:11px;
  color:#969f90
}
.record-actions {
  display:flex;
  align-items:center;
  gap:10px
}
.record-actions button {
  min-height:33px;
  font-size:11px;
  padding:6px 13px;
  display:flex;
  align-items:center;
  gap:7px
}
.mono {
  font-family:ui-monospace,"DejaVu Sans Mono",monospace;
  font-variant-numeric:tabular-nums
}
.record-actions .mono {
  font-size:12px;
  color:#839077;
  margin-right:10px
}
.record-icon {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}
.record-actions .running {
  color:var(--teal);
  border-color:#809b7d;
  background:#e7eee0
}
.record-actions .running .record-icon {
  border-radius:1px
}
.plot-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 8px;
  color:#8a967f;
  font-size:10px
}
.legend {
  display:flex;
  gap:14px;
  align-items:center
}
.legend>span,.legend>label {
  display:flex;
  gap:5px;
  align-items:center
}
.legend small {
  font-size:10px;
  opacity:.75
}
.legend input {
  accent-color:var(--blue);
  width:11px;
  height:11px;
  margin:0
}
.legend i {
  display:inline-block;
  width:13px;
  height:2px
}
.current-color {
  background:var(--amber)
}
.plot-options {
  display:flex;
  gap:20px;
  align-items:center
}
.plot-options label {
  display:flex;
  align-items:center;
  gap:7px
}
.plot-options select {
  border:0;
  background:transparent;
  font-size:10px;
  color:#64745b;
  padding:2px 12px 2px 3px;
  cursor:pointer
}
.plot-wrap {
  height:186px;
  position:relative;
  border:1px solid #dce1d3;
  background:#f1f3eb;
  overflow:hidden
}
.plot-wrap canvas {
  display:block;
  width:100%;
  height:100%;
  cursor:crosshair
}
.plot-wrap #plot-empty {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  pointer-events:none;
  gap:7px;
  font-size:11px;
  color:#a0aa94
}
.empty-trace {
  font-size:29px;
  line-height:1;
  color:#a9b79a
}
#plot-empty strong {
  font-size:12px;
  font-weight:400;
  color:#909f81
}
#cursor {
  pointer-events:none;
  position:absolute;
  top:8px;
  right:10px;
  font:11px ui-monospace,monospace;
  padding:8px 10px;
  background:#f8f9f2ee;
  border:1px solid #c9d2bf;
  white-space:pre;
  line-height:1.7
}
.plot-foot {
  font-size:10px;
  display:flex;
  justify-content:space-between;
  color:#9aa58d;
  padding:10px 0 15px;
  gap:10px
}
.record-detail {
  display:none
}
.record-view .workspace {
  display:none
}
.record-view .recorder {
  border-top:0
}
.record-view .recorder-toolbar {
  padding-top:28px;
  padding-bottom:25px
}
.record-view .plot-wrap {
  height:520px
}
.record-view .record-detail {
  display:flex;
  align-items:center;
  gap:0;
  padding:18px 0 30px
}
.record-detail>div {
  padding:0 24px;
  border-right:1px solid var(--line);
  min-width:145px
}
.record-detail>div:first-child {
  padding-left:0
}
.record-detail>div>span {
  display:block;
  color:#8d9882;
  font-size:11px;
  margin-bottom:12px
}
.record-detail strong {
  font:20px ui-monospace,monospace;
  font-weight:400;
  color:#5c6d4d
}
.record-detail small {
  font-size:10px;
  color:#8a987b;
  margin-left:5px
}
.record-detail #quality {
  font:12px inherit
}
.record-detail button {
  margin-left:auto;
  font-size:10px;
  min-height:32px;
  padding:6px 10px
}
.firmware-panel {
  display:none;
  padding:28px 30px 34px
}
.firmware-view .workspace,.firmware-view .recorder {
  display:none
}
.firmware-view .firmware-panel {
  display:block
}
.firmware-grid {
  display:grid;
  grid-template-columns:minmax(280px,380px) 1fr;
  gap:48px;
  margin-top:24px
}
.firmware-versions,.firmware-meta {
  margin:0;
  display:flex;
  gap:0
}
.firmware-versions>div {
  flex:1;
  padding-right:20px
}
.firmware-versions>div+div {
  border-left:1px solid var(--line);
  padding-left:20px
}
.firmware-versions dt,.firmware-meta dt {
  font-size:11px;
  color:#8d9882;
  margin-bottom:10px
}
.firmware-versions dd {
  margin:0;
  font:26px ui-monospace,monospace;
  color:#4d5e4f
}
#firmware-compare {
  margin:14px 0 22px;
  font-size:12px;
  color:#7c886f
}
#firmware-compare.update {
  color:var(--amber);
  font-weight:600
}
.firmware-downloads {
  display:flex;
  gap:10px
}
a.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:43px;
  padding:8px 17px;
  border:1px solid #cbd1c7;
  border-radius:3px;
  background:#f8f9f4;
  color:inherit;
  text-decoration:none;
  font-size:13px
}
a.button.primary {
  min-width:150px;
  background:#346757;
  border-color:#346757;
  color:#f4f7ee
}
a.button:hover {
  background:#e6eae1;
  border-color:#a8b4a8
}
a.button.primary:hover {
  background:#295546;
  border-color:#295546
}
a.button[aria-disabled="true"] {
  pointer-events:none;
  opacity:.5
}
.firmware-meta {
  flex-direction:column;
  gap:14px;
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--line)
}
.firmware-meta dt {
  margin-bottom:4px
}
.firmware-meta dd {
  margin:0;
  font-size:12px;
  color:#56654f;
  overflow-wrap:anywhere
}
.firmware-meta .mono {
  font:11px ui-monospace,monospace
}
.firmware-steps {
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:step
}
.firmware-steps li {
  counter-increment:step;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:4px 0;
  padding:16px 0;
  border-bottom:1px solid var(--line)
}
.firmware-steps li:first-child {
  padding-top:0
}
.firmware-steps li:before {
  content:counter(step,decimal-leading-zero);
  grid-row:span 2;
  font:12px ui-monospace,monospace;
  color:var(--teal);
  padding-top:1px
}
.firmware-steps strong {
  font-size:13px
}
.firmware-steps span {
  font-size:12px;
  line-height:1.8;
  color:#66725f
}
.firmware-steps a {
  color:var(--teal)
}
.firmware-note {
  margin:26px 0 0;
  padding:12px 16px;
  background:#eeefe7;
  border-left:3px solid var(--blue);
  font-size:12px;
  line-height:1.7;
  color:#5d6a60
}
@media(max-width:760px) {
  .firmware-panel {
    padding:22px 18px 28px
  }
  .firmware-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .firmware-downloads a {
    flex:1;
    min-width:0
  }
}
footer {
  border-top:1px solid var(--line);
  padding:13px 30px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  background:#eeefe7;
  font-size:10px;
  color:#8d9983
}
footer>div {
  display:flex;
  gap:22px;
  align-items:center
}
footer .footer-label {
  font:9px ui-monospace,monospace;
  letter-spacing:.1em;
  color:#9ca791
}
#firmware {
  font:9px ui-monospace,monospace;
  letter-spacing:.06em
}
.message {
  background:#f4e9d4;
  border-bottom:1px solid #d4bd8b;
  padding:12px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#866125;
  font-size:12px;
  line-height:1.6
}
.message button {
  border:0;
  background:transparent;
  padding:0 4px;
  min-height:24px;
  font-size:20px;
  margin-left:20px
}
.fault-text {
  color:#a14f30!important
}
.stale .meter-value output {
  color:#9aa591
}
@media(min-width:1500px) {
  body {
    padding-top:45px
  }
  .meter-value {
    height:87px
  }
  .meter {
    padding-top:23px;
    padding-bottom:14px
  }
  .path-panel {
    margin-bottom:29px
  }
  .connect-row {
    margin-top:34px
  }
  .plot-wrap {
    height:200px
  }
}
@media(max-width:1100px) {
  body {
    padding:18px 14px
  }
  .topbar {
    gap:25px;
    padding:0 23px
  }
  .brand>span {
    display:none
  }
  .readouts,.port-controls {
    padding-left:23px;
    padding-right:23px
  }
  .path-panel {
    padding:12px;
    margin-top:25px
  }
  .path-caption {
    font-size:9px;
    gap:5px
  }
  .connect-row {
    flex-wrap:wrap;
    margin-top:23px;
    gap:14px
  }
  .connect-row p {
    max-width:none
  }
  .connect-row .primary {
    min-width:150px
  }
  .readout-summary strong {
    font-size:19px
  }
  .switch-controls {
    gap:15px
  }
  .record-detail>div {
    min-width:125px;
    padding:0 17px
  }
  .record-detail button {
    max-width:90px
  }
  .record-view .plot-wrap {
    height:470px
  }
}
@media(max-width:760px) {
  body {
    padding:0;
    background:var(--paper)
  }
  .instrument {
    border:0;
    box-shadow:none
  }
  .topbar {
    height:63px;
    padding:0 18px;
    gap:20px
  }
  .brand {
    gap:7px
  }
  .brand strong {
    font-size:13px;
    letter-spacing:.08em
  }
  .brand svg {
    width:20px
  }
  .topbar nav {
    gap:5px
  }
  .tab {
    font-size:12px;
    min-width:38px;
    padding:0 5px
  }
  .connection {
    font-size:10px;
    gap:5px
  }
  .connection .usb-tag {
    display:none
  }
  .workspace {
    grid-template-columns:1fr
  }
  .readouts {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:22px 22px 0
  }
  .meter {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 0 13px
  }
  .meter-value {
    height:auto;
    margin:0;
    padding:0;
    min-width:230px;
    gap:20px
  }
  .meter-value output {
    font-size:51px
  }
  .meter-value>span {
    font-size:17px
  }
  .meter-label {
    display:block;
    font-size:12px;
    position:relative;
    padding-left:10px
  }
  .meter-label i {
    position:absolute;
    left:0;
    top:2px;
    width:2px;
    height:12px
  }
  .meter-label span {
    display:block;
    margin:6px 0 0;
    font-size:8px
  }
  .readout-summary {
    padding:18px 0
  }
  .readout-summary>div {
    display:flex;
    align-items:baseline;
    gap:6px
  }
  .readout-summary span {
    margin:0 6px 0 0;
    font-size:10px
  }
  .readout-summary strong {
    font-size:16px
  }
  .readout-summary small {
    margin:0;
    font-size:9px
  }
  .readout-summary>div+div {
    padding-left:17px
  }
  .port-controls {
    padding:24px 22px
  }
  .path-panel {
    margin:22px 0
  }
  .switch-controls {
    gap:20px
  }
  .all-off {
    margin-top:21px
  }
  .connect-row {
    flex-wrap:nowrap;
    gap:18px
  }
  .connect-row p {
    font-size:10px;
    max-width:180px
  }
  .connect-row .primary {
    min-width:135px;
    font-size:12px
  }
  .recorder {
    padding:0 18px
  }
  .recorder-toolbar {
    flex-wrap:wrap;
    gap:16px
  }
  .recorder-title {
    gap:10px
  }
  .record-actions {
    gap:7px
  }
  .record-actions .mono {
    font-size:10px;
    margin-right:0
  }
  .record-actions button {
    font-size:10px;
    padding:6px 9px
  }
  .plot-controls {
    align-items:flex-start;
    font-size:9px;
    gap:9px
  }
  .plot-options {
    gap:8px
  }
  .plot-options label {
    gap:1px
  }
  .plot-options select {
    font-size:9px;
    padding-right:0;
    max-width:119px
  }
  .legend {
    gap:8px
  }
  .legend small {
    display:none
  }
  .plot-wrap {
    height:210px
  }
  .plot-foot {
    font-size:9px;
    line-height:1.6
  }
  .plot-foot>span:last-child {
    text-align:right
  }
  footer {
    padding:13px 18px;
    flex-wrap:wrap;
    gap:12px;
    font-size:9px
  }
  footer>div {
    gap:15px;
    flex-wrap:wrap
  }
  .record-view .plot-wrap {
    height:410px
  }
  .record-view .record-detail {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px 0
  }
  .record-detail>div {
    padding:0 18px;
    min-width:0
  }
  .record-detail>div:nth-child(odd) {
    padding-left:0
  }
  .record-detail>div:nth-child(even) {
    border:0
  }
  .record-detail button {
    max-width:none;
    margin:0 0 0 15px;
    font-size:10px
  }
  .message {
    padding:12px 18px
  }
  .record-view .recorder-toolbar {
    padding:25px 0
  }
  .record-view .recorder-title {
    width:100%
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important
  }
}
.connection {
  border:0;
  background:transparent;
  padding:7px 0;
  min-height:30px
}
.connection:hover:not(:disabled) {
  background:transparent;
  color:var(--teal)
}
.connection:disabled {
  background:transparent;
  border:0
}
.path-diagram {
  height:158px
}
.path-panel {
  margin-top:22px;
  margin-bottom:22px
}
.connect-row {
  margin-top:22px
}
.plot-foot,.small-label,.plot-options,.recorder-title>span {
  color:#7c886f
}
.record-detail #quality {
  font-family:inherit;
  font-size:12px
}
@media(max-width:760px) {
  .path-diagram {
    height:auto
  }
  .connection {
    padding:5px 0
  }
  .connection:focus-visible {
    outline-offset:2px
  }
}