FaderBuddy

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>{{TITLE}}</title>
<style>
  :root {
    color-scheme: light;
    --bg:      #f6f6f4;
    --card:    #ffffff;
    --ink:     #16181c;
    --ink-dim: #5d636e;
    --ink-faint:#8b919c;
    --rule:    #e3e4e2;
    --pass:    #157f3d;
    --pass-bg: #e7f4ec;
    --fail:    #b4232a;
    --fail-bg: #fbeceb;
    --bar:     #d6d8d5;
    --track-ok:  #6bb98d;
    --track-bad: #e0bcb9;
    --accent:  #16181c;
    --radius:  10px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --bg:      #131417;
      --card:    #1b1d21;
      --ink:     #e8e9ea;
      --ink-dim: #a0a6b0;
      --ink-faint:#71777f;
      --rule:    #2a2d33;
      --pass:    #4ec27c;
      --pass-bg: #16301f;
      --fail:    #f28b86;
      --fail-bg: #331a1a;
      --bar:     #2f333a;
      --track-ok:  #4f9b73;
      --track-bad: #5e4240;
      --accent:  #e8e9ea;
    }
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
  }
  .wrap {
    max-width: 660px;
    margin: 0 auto;
    padding: 20px 16px 48px;
  }

  /* Remove this banner in generated reports. */
  .sample {
    background: #fff6d6; color: #6b5300; border-bottom: 1px solid #e8d89a;
    font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
    text-align: center; padding: 7px 12px;
  }
  @media (prefers-color-scheme: dark) {
    .sample { background: #332b12; color: #e3c979; border-bottom-color: #4d411c; }
  }

  header { padding: 24px 0 18px; }
  .mark {
    font-size: 27px; font-weight: 700; letter-spacing: -.015em; line-height: 1;
  }
  .mark span { color: var(--ink-faint); font-weight: 400; }
  .tagline {
    margin-top: 5px; font-size: 13px; color: var(--ink-dim);
    text-transform: uppercase; letter-spacing: .09em;
  }

  .intro {
    background: var(--card); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
    font-size: 13.5px; line-height: 1.55; color: var(--ink-dim);
  }
  .intro p { margin: 0 0 10px; }
  .intro p:last-child { margin-bottom: 0; }
  .intro a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
  .intro .sig { color: var(--ink); }

  .verdict {
    background: var(--card); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
  }
  .verdict-top {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  }
  .badge {
    font-size: 15px; font-weight: 700; letter-spacing: .07em;
    padding: 5px 12px; border-radius: 999px;
  }
  .badge.pass { color: var(--pass); background: var(--pass-bg); }
  .badge.fail { color: var(--fail); background: var(--fail-bg); }
  .verdict-top .of { color: var(--ink-dim); font-size: 14px; }

  dl.meta {
    display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding-top: 4px;
  }
  dl.meta > div {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule);
  }
  dl.meta > div:last-child { border-bottom: 0; padding-bottom: 0; }
  dl.meta dt {
    color: var(--ink-dim); font-size: 13px; white-space: nowrap;
    text-transform: uppercase; letter-spacing: .05em;
  }
  dl.meta dd {
    margin: 0; text-align: right; font-variant-numeric: tabular-nums;
  }
  .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px; word-break: break-all;
  }

  h2 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--ink-dim); margin: 26px 0 10px; font-weight: 600;
  }
  .section-note {
    font-size: 13px; color: var(--ink-faint); margin: -4px 0 12px; line-height: 1.45;
  }

  .phase {
    background: var(--card); border: 1px solid var(--rule);
    border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
  }
  .phase-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; border-bottom: 1px solid var(--rule);
  }
  .phase-head .name { font-weight: 600; flex: 1; }
  .phase-head .dur { color: var(--ink-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .tick { font-size: 13px; font-weight: 700; color: var(--pass); }
  .tick.fail { color: var(--fail); }
  .phase.skipped .phase-head .name { color: var(--ink-dim); }

  .phase-note {
    padding: 10px 16px 0; font-size: 12.5px; line-height: 1.45;
    color: var(--ink-faint);
  }
  .rows { padding: 4px 16px 12px; }
  .row { padding: 10px 0 11px; border-bottom: 1px solid var(--rule); }
  .row:last-child { border-bottom: 0; }
  .row-top {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  }
  .row .label { color: var(--ink-dim); font-size: 13.5px; }
  .row .val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
  .row .val .unit { font-weight: 400; color: var(--ink-dim); font-size: 12.5px; margin-left: 2px; }
  .limits {
    display: flex; justify-content: space-between;
    font-size: 11.5px; color: var(--ink-faint);
    font-variant-numeric: tabular-nums; margin-top: 4px;
  }
  .limits .pass-range { color: var(--pass); }
  /* The track spans the measurement's full meaningful range, so the passing
     window is visible in proportion to everything the sensor could read.
     The rail is drawn once across the whole axis and the passing window sits
     on top of it, so the two failing sides can't disagree with each other. */
  .track {
    position: relative; height: 10px; margin-top: 8px;
  }
  .track .rail {
    position: absolute; left: 0; right: 0; top: 3.5px; height: 3px;
    background: var(--track-bad); border-radius: 1.5px;
  }
  .track .ok {
    position: absolute; top: 0; height: 10px;
    background: var(--track-ok); border-radius: 2.5px;
  }
  .track .at {
    position: absolute; top: -3px; width: 2px; height: 16px; margin-left: -1px;
    background: var(--accent); border-radius: 1px;
  }
  /* A reading outside the window marks itself, so a failing row is legible
     from the track alone rather than only from the phase's tick. */
  .track .at.out { background: var(--fail); }
  .note { font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }

  table.cal { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  table.cal th, table.cal td {
    padding: 9px 8px; border-bottom: 1px solid var(--rule); text-align: right;
  }
  table.cal th:first-child, table.cal td:first-child { text-align: left; }
  table.cal thead th {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-dim); font-weight: 600;
  }
  table.cal td:first-child { color: var(--ink-dim); font-size: 13.5px; }
  table.cal tbody tr:last-child th, table.cal tbody tr:last-child td { border-bottom: 0; }
  .cal-wrap { background: var(--card); border: 1px solid var(--rule);
              border-radius: var(--radius); padding: 6px 16px; }
  .cal-note { font-size: 12.5px; color: var(--ink-faint); padding: 10px 0 4px; }

  footer {
    margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule);
    color: var(--ink-faint); font-size: 12.5px; text-align: center;
  }
  footer .who { color: var(--ink-dim); }
  footer a.raw {
    display: inline-block; margin-bottom: 14px;
    color: var(--ink-dim); text-decoration: none;
    border: 1px solid var(--rule); border-radius: 999px;
    padding: 6px 14px; font-size: 12.5px; background: var(--card);
  }
  footer a.raw:hover { color: var(--ink); border-color: var(--ink-faint); }
</style>
</head>
<body>
<div class="wrap">
{{CONTENT}}
</div>
</body>
</html>