/* Pure Data patcher aesthetic ------------------------------------------------
 * Light grey canvas, white object boxes with thin black borders and inlet/
 * outlet nibs, teal `cnv` panels (the patch uses cnv colour ~rgb(3,174,186)),
 * `tgl` toggles drawn as a square with an X, `hsl` sliders as a white track
 * with a thin black handle. Font: DejaVu Sans Mono (Pd's default).
 * --------------------------------------------------------------------------*/
:root {
  --canvas: #dcdcdc;
  --obj-bg: #ffffff;
  --ink: #101010;
  --cnv: rgb(3, 174, 186);     /* decoded from the patch's -241339 */
  --cnv-label: #00343a;
  --nib: #000000;
  --purr: #1c6fb0;
  --eco: #2e7d32;
  --mouse: #b5651d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
  font-size: 13px;
  line-height: 1.5;
}

.patch {
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px 22px 60px;
}

/* ---- Pd comments (plain text on the canvas) ---- */
.pd-comment { color: #1a1a1a; margin: 4px 0; }
.pd-title { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; margin: 0; }
.pd-sub { color: #555; margin: 2px 0 16px; }

/* prominent "this is a port of Akira's patch" credit */
.pd-credit {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 4px; padding: 8px 12px;
  background: var(--cnv); color: var(--cnv-label);
  border: 1px solid rgba(0,0,0,.35);
  font-size: 14px;
}
.pd-credit b { color: #00252a; }
.pd-credit-tag {
  background: #00343a; color: #fff; padding: 1px 7px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
}
code {
  background: #fff; border: 1px solid var(--ink);
  padding: 0 4px; font-family: inherit; font-size: .92em;
}
.pd-credit code { border-color: rgba(0,0,0,.4); }
.pd-head { font-weight: 700; margin-top: 18px; }
.pd-foot { color: #555; margin-top: 16px; }

/* ---- Pd object box: white, 1px black border, inlet/outlet nibs ---- */
.pd-obj {
  position: relative;
  display: inline-block;
  background: var(--obj-bg);
  border: 1px solid var(--ink);
  padding: 2px 8px;
  white-space: nowrap;
}
.pd-obj::before, .pd-obj::after {
  content: ""; position: absolute; top: -1px;
  width: 7px; height: 2px; background: var(--nib);
}
.pd-obj::before { left: 0; }
.pd-obj::after  { right: 0; }

/* ---- DSP toggle row ---- */
.pd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dsp-row { margin: 6px 0 8px; }

/* ---- audibility warning (Pd message-box look) ---- */
.pd-warn {
  margin: 0 0 14px; padding: 8px 12px;
  background: #fff7d6; border: 1px solid #000;
  color: #4a3b00; font-size: 12px; line-height: 1.45;
}
.pd-warn b { color: #1a1500; }

/* ---- Pd tgl: square with an X when on ---- */
.pd-tgl {
  position: relative;
  width: 26px; height: 26px; flex: 0 0 26px;
  background: var(--obj-bg);
  border: 1px solid var(--ink);
  padding: 0; cursor: pointer;
}
.pd-tgl::before, .pd-tgl::after {
  content: ""; position: absolute; top: -1px;
  width: 6px; height: 2px; background: var(--nib);
}
.pd-tgl::before { left: 0; }
.pd-tgl::after  { right: 0; }
.pd-tgl .x { position: absolute; inset: 2px; }
.pd-tgl[aria-pressed="true"] .x::before,
.pd-tgl[aria-pressed="true"] .x::after {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 1.5px; height: 100%; background: var(--ink); transform-origin: center;
}
.pd-tgl[aria-pressed="true"] .x::before { transform: translateX(-50%) rotate(45deg); }
.pd-tgl[aria-pressed="true"] .x::after  { transform: translateX(-50%) rotate(-45deg); }

/* ---- array / scope (the spectrum) ---- */
.pd-array {
  width: 100%; height: auto; aspect-ratio: 900 / 200;
  display: block; margin: 4px 0 18px;
  background: #fff; border: 1px solid var(--ink);
}

/* ---- cnv panels (teal) ---- */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pd-cnv {
  position: relative;
  background: var(--cnv);
  border: 1px solid rgba(0,0,0,.35);
  padding: 30px 14px 14px;
}
.pd-cnv-wide { margin-top: 16px; }
.pd-cnv-label {
  position: absolute; top: 6px; left: 12px; margin: 0;
  font-size: 15px; font-weight: 700; color: var(--cnv-label);
}

/* ---- a voice channel: tgl + object + slider + comment ---- */
.chan {
  display: grid;
  grid-template-columns: 26px auto 1fr;
  align-items: center;
  gap: 10px 12px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(0,0,0,.2);
  padding: 10px;
  margin-bottom: 10px;
}
.chan .pd-comment { grid-column: 2 / 4; color: #04363b; font-size: 12px; margin: 0; }
.chan .pd-obj { justify-self: start; }

/* ---- hsl: Pd horizontal slider ---- */
.pd-hsl {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px;
  background: #fff; border: 1px solid var(--ink);
  cursor: pointer; margin: 0;
}
.pd-hsl::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 5px; height: 18px; background: var(--ink); border: 0; border-radius: 0;
}
.pd-hsl::-moz-range-thumb {
  width: 5px; height: 18px; background: var(--ink); border: 0; border-radius: 0;
}

/* ---- global controls ---- */
.globals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; }
.pd-ctl { display: flex; flex-direction: column; gap: 6px; }
.pd-ctl .pd-comment { color: #04363b; margin: 0; }
.pd-ctl b { color: #042; }

/* ---- documentation ---- */
.pd-doc { margin-top: 24px; max-width: 760px; }
.bands { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0; }
.band {
  background: #fff; border: 1px solid var(--ink); padding: 10px; font-size: 12px;
}
.band-purr  { border-left: 4px solid var(--purr); }
.band-eco   { border-left: 4px solid var(--eco); }
.band-mouse { border-left: 4px solid var(--mouse); }
.reflist { padding-left: 20px; font-size: 12px; color: #333; }
.reflist li { margin: 2px 0; }

@media (max-width: 680px) {
  .panels { grid-template-columns: 1fr; }
}