/* midicat.org - one style sheet for every page */
  :root {
    --bg: #0a0e14; --panel: #101826; --ink: #05070b;
    --green: #39ff88; --cyan: #00e5ff; --pink: #ff4fd8; --yellow: #ffe14d;
    --orange: #ff9f43; --red: #ff5370; --dim: #5f7189; --white: #d7e3f4;
    --mono: Consolas, "Cascadia Mono", "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--bg); color: var(--green); font-family: var(--mono); font-size: 13.5px; }
  body { min-height: 100vh; }
  /* three columns: advert rail | the midicat panel | advert rail. The two rails always get the
     same width, so the panel sits exactly in the middle of the window. ads.js fills the rails. */
  .stage { display: flex; justify-content: center; align-items: flex-start; }
  .rail { flex: 1 1 0; min-width: 0; position: sticky; top: 0; height: 100vh; overflow: hidden;
          display: flex; justify-content: center; align-items: flex-start; gap: 16px; padding: 10px 12px 16px; }   /* 10px = where the MIDICAT.ORG lettering starts */
  .ad-col { display: flex; flex-direction: column; gap: 16px; flex: 0 0 auto; }
  /* a box narrower than its column hugs the side nearest the panel, so the gap to the next column never changes */
  #rail-left .ad-col { align-items: flex-end; }
  #rail-right .ad-col { align-items: flex-start; }
  .ad-slot { flex: 0 0 auto; border: 1px dashed #1c2940; color: #2c3d59; display: flex; align-items: center; justify-content: center;
             text-align: center; font-size: 11px; line-height: 1.6; overflow: hidden; }
  .ad-banner { display: none; justify-content: center; padding: 8px 0; }
  body.ads-banners .ad-banner { display: flex; }
  body.ads-banners .ad-banner:empty { display: none; }
  body.ads-banners .rail { display: none; }
  .app { flex: 0 0 768px; width: 768px; max-width: 100%; padding: 10px 14px 8px; }
  @media (max-width: 800px) { .app { flex: 1 1 auto; } .drop { white-space: pre-wrap; padding: 8px 6px; } }

  #banner { display: block; max-width: 100%; height: auto; margin: 0 auto; }
  .sub { color: var(--dim); margin: 6px 0 4px; text-align: center; font-size: 11.2px; }
  /* one line on a computer screen (banner.js shrinks the text a touch if the visitor's font is wide); free to wrap on a phone */
  @media (min-width: 801px) { .sub { white-space: nowrap; overflow: hidden; } }
  .drop { background: var(--panel); color: var(--cyan); font-weight: bold; text-align: center; white-space: pre;
          padding: 8px 0; margin: 6px 0; cursor: pointer; overflow: hidden; line-height: 1.45; user-select: none; }
  .drop.over { outline: 1px solid var(--cyan); }
  .middle { display: flex; gap: 10px; }
  .controls { flex: 1 1 auto; min-width: 0; }
  .row { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 3px 0; min-height: 26px; }
  .lbl { margin-right: 4px; }
  .yellow { color: var(--yellow); } .orange { color: var(--orange); } .pink { color: var(--pink); }
  .green { color: var(--green); } .cyan { color: var(--cyan); } .dim { color: var(--dim); }
  select, input[type=text] { font-family: var(--mono); font-size: 13.5px; background: var(--panel); border: 0; outline: 0;
          padding: 4px 6px; margin-right: 12px; }
  select { color: var(--yellow); width: 104px; }
  select.engine { color: var(--dim); width: 128px; margin-right: 0; }
  input[type=text] { color: var(--orange); width: 56px; }
  label.check { display: inline-flex; align-items: center; margin-right: 14px; white-space: nowrap; cursor: pointer; user-select: none; }
  label.check input { appearance: none; -webkit-appearance: none; width: 13px; height: 13px; margin: 0 6px 0 0;
          background: var(--ink); border: 1px solid #2a3a55; display: inline-block; position: relative; cursor: pointer;
          color: inherit; flex: 0 0 auto; }
  label.check input:checked::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px;
          border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  button { font-family: var(--mono); font-size: 13.5px; font-weight: bold; border: 0; padding: 7px 16px; margin: 6px 10px 6px 0;
          cursor: pointer; color: var(--ink); }
  button#go { background: var(--green); } button#save { background: var(--cyan); }
  button:disabled { background: var(--panel) !important; color: var(--dim); cursor: default; }
  button:not(:disabled):hover { background: var(--white) !important; }
  #progress { color: var(--yellow); font-weight: bold; white-space: pre; min-height: 18px; }
  #readout { color: var(--pink); font-weight: bold; white-space: pre; min-height: 72px; line-height: 18px; }
  #cat { width: 240px; height: 180px; flex: 0 0 240px; opacity: 0; transition: opacity .9s ease; mix-blend-mode: lighten;
         image-rendering: auto; }
  #cat.on { opacity: 1; }
  @media (max-width: 800px) { #cat { display: none; } #midirow { flex-wrap: wrap; } }
  .rule { color: var(--dim); white-space: pre; overflow: hidden; margin-top: 8px; }
  /* the RESULT heading: rainbow colours flowing through it from left to right */
  #resultrule { color: transparent; font-weight: bold;
          background: linear-gradient(90deg, #ff4fd8, #ff9f43, #ffe14d, #39ff88, #00e5ff, #ff4fd8, #ff9f43, #ffe14d, #39ff88, #00e5ff, #ff4fd8);
          background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: rainbow 5s linear infinite; }
  @keyframes rainbow { from { background-position: 100% 0; } to { background-position: 0 0; } }
  #midirow { display: none; align-items: center; gap: 10px; background: var(--panel); padding: 8px 10px; margin: 0 0 6px; }
  #midirow .name { color: var(--pink); font-weight: bold; }
  #midirow .none { flex: 1 1 auto; color: var(--dim); }
  button.pp { background: var(--green); margin: 0; padding: 6px 10px; flex: 0 0 auto; min-width: 86px; }
  .panel button.pp { background: var(--cyan); padding: 4px 8px; }
  input.seek { flex: 1 1 60px; min-width: 50px; height: 14px; margin: 0; accent-color: var(--pink); background: transparent; cursor: pointer; }
  .panel input.seek { accent-color: var(--cyan); }
  .clock { color: var(--yellow); white-space: nowrap; flex: 0 0 auto; min-width: 84px; text-align: right; }
  .soundswrap { display: inline-flex; align-items: center; flex: 0 0 auto; }
  .soundswrap .lbl { color: var(--orange); margin-right: 6px; }
  select.sounds { color: var(--orange); width: 172px; margin-right: 0; }
  button.savemidi { background: var(--pink); margin: 0; flex: 0 0 auto; }
  .mini { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
  .foot a { text-decoration: none; } .foot a:hover { text-decoration: underline; }
  #tabs { display: none; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
  button.tab { background: var(--panel); color: var(--cyan); margin: 0; padding: 6px 12px; }
  button.tab.open { background: var(--cyan); color: var(--ink); }
  button.tab:not(.open):hover { background: #1a2740 !important; color: var(--white); }
  .panel { background: var(--panel); padding: 8px 10px; margin: 0 0 6px; }
  .panel .note { color: var(--dim); margin-bottom: 4px; }
  .panel .stem { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
  .panel .name { width: 70px; color: var(--yellow); font-weight: bold; }
  .panel .none { color: var(--dim); }
  .panel pre.chart { font-family: var(--mono); font-size: 12.5px; color: var(--green); background: var(--ink); margin: 6px 0 0; padding: 8px;
          max-height: 320px; overflow: auto; line-height: 1.25; }
  #log { background: var(--ink); height: 300px; font-size: 10px; overflow-y: auto; padding: 6px 8px; white-space: pre-wrap; word-break: break-word;
         line-height: 1.5; }
  #log .t { color: var(--dim); }
  #log .step { color: var(--cyan); font-weight: bold; } #log .ok { color: var(--green); } #log .warn { color: var(--orange); }
  #log .err { color: var(--red); } #log .dimline { color: var(--dim); } #log .hot { color: var(--yellow); }
  #log .done { color: var(--pink); font-weight: bold; } #log .plain { color: var(--white); }
  #live { color: var(--dim); min-height: 18px; white-space: pre; overflow: hidden; margin-top: 2px; }
  .foot { font-size: 12px; margin-top: 2px; text-align: center; }
  .foot.menu { margin: 8px 0 12px; }
  .foot.menu a { color: var(--cyan); font-weight: bold; margin: 0 2px; }
  .foot.menu a.here { color: var(--pink); }
  input[type=file] { display: none; }

  /* ---- the About / Credits / Privacy pages: same panel, same colours, words where the controls would be ---- */
  a#home { display: block; }
  .page { color: var(--white); line-height: 1.6; margin: 6px 0 14px; }
  .page .rule { margin: 16px 0 6px; font-weight: bold; }
  .page .rule.pink { color: var(--pink); } .page .rule.cyan { color: var(--cyan); } .page .rule.yellow { color: var(--yellow); }
  .page .rule.green { color: var(--green); } .page .rule.orange { color: var(--orange); }
  .page p { margin: 0 0 10px; }
  .page a { color: var(--cyan); }
  .page b { font-weight: bold; }
  .page .box { background: var(--panel); padding: 8px 12px; margin: 0 0 10px; }
  .page ul { list-style: none; margin: 0 0 10px; padding: 0; }
  .page ul li { padding-left: 18px; text-indent: -18px; margin: 0 0 4px; }
  .page ul li::before { content: "> "; color: var(--green); font-weight: bold; }
  .page table { border-collapse: collapse; width: 100%; margin: 0 0 10px; background: var(--panel); }
  .page th, .page td { text-align: left; vertical-align: top; padding: 5px 10px; border-bottom: 1px solid #1c2940; }
  .page th { color: var(--yellow); font-weight: bold; }
  .page td.n { color: var(--pink); font-weight: bold; white-space: nowrap; }
  .page .small { font-size: 12px; color: var(--dim); }
  .page dl { margin: 0 0 10px; }
  .page dt { color: var(--yellow); font-weight: bold; margin-top: 10px; }
  .page dd { margin: 0 0 0 18px; }
  .page dd .who { color: var(--green); }
  .page dd .lic { color: var(--orange); }