:root{
    --paper:#EDF0EE;
    --ink:#101A16;
    --muted:#6B7A73;
    --rule:#B9C3BD;
    --live:#0F62FE;
    --pulse:#D01B5A;
    --true:#1F8A5C;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:15px;
    line-height:1.45;
    padding:18px 16px 60px;
    max-width:900px;
    margin:0 auto;
  }
  h1{
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
    font-size:30px;
    letter-spacing:-0.01em;
    margin:0 0 2px;
  }
  .sub{color:var(--muted);font-size:13px;margin:0 0 18px}

  .panel{
    border:1px solid var(--rule);
    background:#F7F9F7;
    border-radius:2px;
    padding:14px;
    margin-bottom:14px;
  }
  .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  button{
    font:inherit;
    font-weight:600;
    padding:10px 16px;
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--paper);
    border-radius:2px;
    cursor:pointer;
  }
  button.ghost{background:transparent;color:var(--ink)}
  button:disabled{opacity:.35;cursor:not-allowed}
  button:focus-visible{outline:2px solid var(--live);outline-offset:2px}

  label.ctl{display:flex;flex-direction:column;gap:2px;font-size:11px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);min-width:120px;flex:1}
  label.ctl input,label.ctl select{
    font:inherit;font-variant-numeric:tabular-nums;
    padding:6px 8px;border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:2px;
  }
  input[type=range]{padding:0;accent-color:var(--live)}
  .val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}

  /* live readout */
  .readout{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
  .note{
    font-family:Georgia,serif;font-size:44px;line-height:1;min-width:2.6em;
    font-variant-numeric:tabular-nums;
  }
  .note.off{color:var(--rule)}
  .hz{font-family:ui-monospace,monospace;color:var(--muted);font-size:13px}
  .cents{font-family:ui-monospace,monospace;font-size:13px}

  .meter{position:relative;height:8px;background:#fff;border:1px solid var(--rule);border-radius:2px}
  .meter .center{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--muted)}
  .meter .needle{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--live);
    left:50%;transform:translateX(-50%);transition:left .04s linear}
  .meter .needle.intune{background:var(--true)}
  .scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);
    font-family:ui-monospace,monospace;margin-top:2px}

  .beat{display:flex;gap:6px;margin-top:12px;align-items:center}
  .beat i{width:12px;height:12px;border-radius:50%;border:1px solid var(--rule);background:#fff;display:block}
  .beat i.on{background:var(--pulse);border-color:var(--pulse)}
  .beat i.on.down{background:var(--ink);border-color:var(--ink)}
  .barcount{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted);margin-left:8px}

  canvas{width:100%;height:180px;display:block;background:#FBFCFB;border:1px solid var(--rule);border-radius:2px}

  .scorewrap{overflow-x:auto;background:#FBFCFB;border:1px solid var(--rule);border-radius:2px}
  svg{display:block}

  .text-out{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted);
    margin-top:8px;word-break:break-word}

  .diag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
    border-top:1px dashed var(--rule);margin-top:14px;padding-top:10px}
  .diag div{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
  .diag span:first-child{color:var(--muted)}
  .diag .bad{color:var(--pulse);font-weight:600}
  .diag .ok{color:var(--true)}
  .level{height:10px;background:#fff;border:1px solid var(--rule);border-radius:2px;
    overflow:hidden;margin-top:6px}
  .level i{display:block;height:100%;width:0;background:var(--live);transition:width .05s linear}
  .verdict{margin-top:10px;padding:8px 10px;border-left:3px solid var(--pulse);
    background:#fff;font-size:12px;line-height:1.5}
  .verdict code{background:#EDF0EE;padding:1px 4px;border-radius:2px}

  .scan{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;margin-top:8px}
  .scan .dev{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid #E4E9E6}
  .scan .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .scan .bar{width:90px;height:8px;background:#fff;border:1px solid var(--rule);border-radius:2px}
  .scan .bar i{display:block;height:100%;background:var(--live)}
  .scan .res{width:5.5em;text-align:right}
  .scan .live{color:var(--true);font-weight:600}
  .scan .dead{color:var(--muted)}
  .scan .err{color:var(--pulse)}

  /* preflight banner */
  .pref{
    border:1px solid var(--pulse);border-left-width:4px;background:#fff;
    border-radius:2px;padding:12px 14px;margin-bottom:14px;font-size:13px;line-height:1.55;
  }
  .pref h3{margin:0 0 6px;font-family:Georgia,serif;font-weight:400;font-size:16px;color:var(--pulse)}
  .pref code{background:#EDF0EE;padding:1px 5px;border-radius:2px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
  .pref pre{background:#EDF0EE;padding:8px 10px;border-radius:2px;overflow-x:auto;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;margin:6px 0}
  .pref ul{margin:6px 0;padding-left:20px}
  .pref li{margin:3px 0}
  .pref.warn{border-color:#B7791F}
  .pref.warn h3{color:#B7791F}

  /* collapsible sections */
  details.fold{border:1px solid var(--rule);border-radius:2px;background:#F7F9F7;margin-bottom:10px}
  details.fold summary{
    cursor:pointer;padding:11px 14px;font-size:12px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted);font-weight:600;list-style:none;
    display:flex;align-items:center;gap:8px;
  }
  details.fold summary::-webkit-details-marker{display:none}
  details.fold summary::before{content:'+';font-family:ui-monospace,monospace;
    font-size:14px;color:var(--ink);width:12px}
  details.fold[open] summary::before{content:'\2212'}
  details.fold summary:focus-visible{outline:2px solid var(--live);outline-offset:-2px}
  .foldbody{padding:0 14px 14px}

  /* compact readout, now inline with the transport buttons */
  .readout{display:flex;align-items:baseline;gap:10px;margin:0 0 0 auto}
  .note{font-family:Georgia,serif;font-size:34px;line-height:1;min-width:2.2em;
    text-align:right;font-variant-numeric:tabular-nums}
  .meter{margin-top:12px}

  /* export */
  .exports{display:flex;gap:6px;flex-wrap:wrap}
  button.sm{padding:6px 10px;font-size:12px;font-weight:600}
  .exportbox{margin-top:12px;border-top:1px dashed var(--rule);padding-top:10px}
  .exportbox textarea{
    width:100%;height:190px;resize:vertical;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.4;
    border:1px solid var(--rule);border-radius:2px;background:#fff;color:var(--ink);padding:8px;
  }

  @media print{
    @page{margin:14mm}
    body{padding:0;max-width:none;background:#fff;color:#000}
    .panel,details.fold,.sub,.exports,.text-out,#transport,#trace,.exportbox,.pref,
    #scorePanel .row{display:none !important}
    #scorePanel{display:block !important;border:0;padding:0;margin:0;background:#fff}
    #scorewrap{display:block !important;border:0;background:#fff;overflow:visible}
    /* the SVG carries a viewBox and wraps into systems, so it scales to the sheet */
    svg#score{width:100% !important;height:auto !important;max-width:100%}
    h1{font-size:20px;margin:0 0 10px;font-family:Georgia,serif}
    h1::after{content:''}
  }


  h2{font-family:Georgia,serif;font-weight:400;font-size:17px;margin:0 0 8px}
  .hint{font-size:12px;color:var(--muted);margin-top:10px}
  .status{font-size:12px;color:var(--pulse);min-height:1.2em}

/* score options + detected-key readout */
.clefout{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:var(--muted);align-self:center;margin-right:6px;
}
#scorewrap{overflow-x:hidden}          /* systems wrap now, so no horizontal scroll */
svg#score{width:100%;height:auto}