/*
  Filter rack — /studio/filter-rack/

  Ported from intsros/011/zygapp-filter-rack.html. The demo was a standalone
  page and owned its own background, body and container; on ZygApp it lives
  inside the public base template, so anything that would fight that template
  has been scoped or removed:

    * body background / font / colour  -> deleted, public.css owns them
    * .wrap, header, h1                -> renamed under .frk so they cannot
                                          restyle the site nav or the footer

  Everything visual inside the rack itself is unchanged from the demo.
  Zero dependencies, no build step — same as the original.
*/

.frk{
  --bg-0:#07101a; --bg-1:#0b1220;
  --panel:rgba(255,255,255,0.035); --panel-hi:rgba(255,255,255,0.06);
  --line:rgba(255,255,255,0.08); --line-hi:rgba(159,215,255,0.35);
  --ink:#e6eef6; --ink-2:#9fb8d8; --ink-3:#6b8099;
  --accent:#3aa0ff; --violet:#764ba2; --warn:#f0997b; --ok:#5dcaa5;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
.frk *{box-sizing:border-box}
.frk{max-width:1040px;margin:0 auto;padding:32px 20px 80px}
.frk-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
/* Not .stage h2 / .srcbox h2 — those are the uppercase mono labels. This is
   the rack's own title, so it keeps the display treatment the demo's h1 had. */
.frk-head h2{font-size:26px;font-weight:600;letter-spacing:-.01em;margin:0;color:#cfe9ff;
  font-family:var(--sans);text-transform:none}
.frk-head p{margin:4px 0 0;font-size:14px;color:var(--ink-3);max-width:52ch;line-height:1.6}
.frk-brand{font-weight:700}
.frk-brand span{background:linear-gradient(90deg,var(--accent),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.frk .scope-wrap{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(3,8,16,.55);margin-bottom:16px}
.frk canvas{display:block;width:100%;height:180px}
.frk .scope-tag{position:absolute;top:12px;left:14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-3);pointer-events:none}
.frk .meter{position:absolute;right:14px;top:12px;display:flex;gap:3px;align-items:flex-end;height:22px;pointer-events:none}
.frk .meter i{width:3px;background:rgba(107,128,153,.5);border-radius:1px;height:3px;transition:height .06s linear,background .06s linear}

.frk .sources{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;margin-bottom:12px}
@media(max-width:680px){.frk .sources{grid-template-columns:1fr}}
.frk .srcbox{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--panel)}
.frk .srcbox h2{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--ink-3);font-family:var(--mono);text-transform:uppercase}
.frk .credit{font-size:12.5px;color:var(--ink-3);margin:9px 0 0;line-height:1.6;min-height:34px}
.frk .credit b{color:var(--ink-2);font-weight:500}
.frk .lic{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;padding:2px 7px;border-radius:20px;border:1px solid var(--line);color:var(--ink-3);margin-left:6px}

.frk .transport{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.frk button{font-family:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 16px;cursor:pointer;transition:background .15s,border-color .15s,transform .06s}
.frk button:hover:not(:disabled){background:var(--panel-hi);border-color:var(--line-hi)}
.frk button:active:not(:disabled){transform:translateY(1px)}
.frk button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.frk button[aria-pressed="true"]{background:linear-gradient(90deg,rgba(58,160,255,.22),rgba(118,75,162,.22));border-color:var(--line-hi);color:#eaf6ff}
.frk button.rec[aria-pressed="true"]{background:rgba(226,75,74,.22);border-color:rgba(240,149,149,.45)}
.frk button:disabled{opacity:.35;cursor:not-allowed}
.frk .status{font-size:13px;color:var(--ink-2);margin:0 0 22px;min-height:20px;line-height:1.5}
.frk .status.warn{color:var(--warn)}
.frk .status.ok{color:var(--ok)}

.frk .chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin-bottom:22px}
.frk .stage{border:1px solid var(--line);border-radius:12px;padding:16px 16px 18px;background:var(--panel);backdrop-filter:blur(8px) saturate(120%)}
.frk .stage h2{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--ink-3);font-family:var(--mono);text-transform:uppercase}
.frk .stage h2 b{color:var(--accent);font-weight:600;margin-right:8px}
.frk .ctl{margin-bottom:14px}
.frk .ctl:last-child{margin-bottom:0}
.frk .ctl label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-2);margin-bottom:7px}
.frk .ctl output{font-family:var(--mono);font-size:13px;color:#cfe9ff}
.frk input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;margin:0}
.frk input[type=range]::-webkit-slider-runnable-track{height:3px;background:rgba(255,255,255,.12);border-radius:2px}
.frk input[type=range]::-moz-range-track{height:3px;background:rgba(255,255,255,.12);border-radius:2px}
.frk input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;margin-top:-6px;background:linear-gradient(180deg,#7fc4ff,var(--accent));border:none}
.frk input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;border:none;background:var(--accent)}
.frk input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.frk select,.frk input[type=text]{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:9px 10px}
.frk select{cursor:pointer}
.frk select:focus-visible,.frk input[type=text]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.frk .presets{border-top:1px solid var(--line);padding-top:20px;margin-bottom:22px}
.frk .presets h2{font-size:13px;font-weight:500;color:var(--ink-2);margin:0 0 12px}
.frk .chips{display:flex;flex-wrap:wrap;gap:8px}
.frk .chips button{padding:8px 14px;font-size:13px;border-radius:20px}

.frk details{border:1px solid var(--line);border-radius:12px;background:rgba(3,8,16,.4);margin-bottom:12px}
.frk summary{padding:14px 16px;cursor:pointer;font-size:13px;color:var(--ink-2);list-style:none}
.frk summary::-webkit-details-marker{display:none}
.frk summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}
.frk summary::before{content:"+ ";color:var(--accent);font-family:var(--mono)}
.frk details[open] summary::before{content:"\2212 "}
.frk pre{margin:0;padding:0 16px 16px;font-family:var(--mono);font-size:12.5px;color:#9fd7ff;overflow-x:auto;line-height:1.7}
.frk .inner{padding:0 16px 18px}
.frk .hint{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin:0 0 14px}
.frk .note{font-size:13px;color:var(--ink-3);line-height:1.7;margin:22px 0 0;max-width:66ch}
.frk .note code{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.frk *{transition:none!important}}
@media (max-width:560px){
  .frk{padding:24px 0 40px}
  .frk canvas{height:130px}
  .frk-head h2{font-size:22px}
}

/* --- additions for the ported page ------------------------------------- */

/* The demo carried its own dark panel background. Inside public.css the page
   already has one, so the rack only needs a boundary. */
.frk { max-width: 1040px; }

/* Elapsed / remaining time while recording (Task 3). Monospace so the digits
   do not jump around as they count. */
.frk .rec-clock {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
  letter-spacing: .06em; margin-left: 2px;
}
.frk .rec-clock.is-close { color: var(--warn); }

/* Headphone warning. Deliberately always visible above the transport rather
   than a dismissible notice: mic + resonance + delay through speakers feeds
   back, and someone wearing headphones is the only reliable fix. */
.frk .frk-warn {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid rgba(240,153,123,.28); border-radius: 10px;
  background: rgba(240,153,123,.06);
  padding: 10px 13px; margin: 0 0 14px;
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
.frk .frk-warn b { color: var(--warn); font-weight: 600; }

/* Gear recommendation (Task 5) — prose with a disclosure, not a product card. */
.frk-gear {
  max-width: 66ch; margin: 34px 0 0; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 15px; line-height: 1.65;
}
.frk-gear .frk-disclosure {
  font-size: 13px; color: #6b8099; margin: 0 0 10px;
}
.frk-gear p { margin: 0 0 10px; }
.frk-gear a { color: #7aa2ff; }

/* Per-source input levels. They sit inside the source boxes rather than in the
   chain below, because they are not part of the tone — they are the balance
   between the loop and the voice while both are running. */
.frk .srcbox .frk-lvl { margin: 12px 0 0; }
.frk .srcbox .frk-lvl label {
  font-size: 12.5px; color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: baseline;
}
.frk .srcbox .frk-lvl output { font-family: var(--mono); color: #cfe9ff; }

/* The one line that tells a visitor the two sources combine. Placed between
   the sources and the headphone warning so it is read in that order: you can
   do this / here is what to watch out for when you do. */
.frk .frk-hint-inline {
  margin: 0 0 12px; font-size: 13px; line-height: 1.6;
  color: var(--ink-2); max-width: 66ch;
}

/* The class the port brought with it was never defined anywhere on ZygApp, so
   "Choose a demo clip" — meant for screen readers only — was rendering as
   visible unstyled text above the select. Scoped to .frk rather than declared
   globally: nothing else on the site uses the class, and a global rule that
   hides text is not something to introduce as a side effect. */
.frk .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- explanatory copy as cards ------------------------------------------
   These sit OUTSIDE .frk (they are page content, not rack chrome), so they
   carry their own colours rather than inheriting the rack's custom
   properties — a rule under .frk would not reach them.

   A SINGLE COLUMN, not a grid. Two things ruled the grid out once it was on
   screen: an open card leaves a dead void beside it in its row, and 300px
   columns are far too narrow for prose — the stage descriptions were breaking
   every five or six words. One column at a reading measure keeps the collapsed
   cards stacked tight, which is the tidiness the grid was reaching for, and
   costs nothing when a card opens. */
.frk-doc-head{
  font-size:20px;font-weight:600;color:#cfe9ff;
  margin:38px 0 16px;letter-spacing:-.01em;
}
.frk-docs{max-width:66ch;margin-bottom:8px}
.frk-doc{
  border:1px solid rgba(255,255,255,0.08);border-radius:12px;
  background:rgba(3,8,16,0.4);margin-bottom:10px;
  transition:border-color .15s,background .15s;
}
.frk-doc:last-child{margin-bottom:0}
.frk-doc[open]{background:rgba(3,8,16,0.6);border-color:rgba(159,215,255,0.22)}
.frk-doc:hover{border-color:rgba(159,215,255,0.22)}
.frk-doc summary{
  padding:15px 17px;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:500;color:#cfe9ff;line-height:1.4;
  display:flex;align-items:baseline;gap:9px;
}
.frk-doc summary::-webkit-details-marker{display:none}
.frk-doc summary:focus-visible{outline:2px solid #3aa0ff;outline-offset:-2px;border-radius:12px}
/* The marker is a separate ::before so the summary text wraps as a block
   instead of hanging under a leading glyph. */
.frk-doc summary::before{
  content:"+";color:#3aa0ff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;flex:0 0 auto;line-height:1.4;
}
.frk-doc[open] summary::before{content:"\2212"}
.frk-doc-body{padding:2px 17px 17px 41px}
.frk-doc-body p{margin:0 0 11px;font-size:14.5px;line-height:1.7;color:#9fb8d8}
.frk-doc-body p:last-child{margin-bottom:0}
.frk-doc-body strong{color:#e6eef6;font-weight:600}
.frk-doc-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:#9fd7ff;
}
@media (max-width:560px){.frk-doc-body{padding-left:17px}}
@media (prefers-reduced-motion:reduce){.frk-doc{transition:none}}

/* --- the creator's way in ------------------------------------------------
   Visually distinct from the tool above it: this is an invitation aimed at a
   different person (a musician with an account) than the rack itself (anyone
   with a browser). A left rule rather than a box, so it reads as an aside
   and does not compete with the tool for attention. */
.frk-contribute{
  max-width:66ch; margin:34px 0 0; padding:2px 0 2px 20px;
  border-left:2px solid rgba(58,160,255,0.45);
}
.frk-contribute h2{
  font-size:19px; font-weight:600; color:#cfe9ff; margin:0 0 10px;
  letter-spacing:-.01em;
}
.frk-contribute p{ margin:0 0 12px; font-size:15px; line-height:1.7; color:#9fb8d8; }
.frk-contribute strong{ color:#e6eef6; font-weight:600; }
/* Smaller and dimmer on purpose. It is the caveat that keeps the invitation
   from reading as a contradiction of "nothing is uploaded" — it has to be
   present and legible, not loud. */
.frk-contribute-note{ font-size:13.5px !important; color:#6b8099 !important; }
.frk-contribute-cta{
  display:inline-block; color:#7aa2ff; text-decoration:none; font-weight:600;
  font-size:15px; border-bottom:1px solid rgba(122,162,255,.4); padding-bottom:1px;
}
.frk-contribute-cta:hover{ border-bottom-color:#7aa2ff; }

/* --- "Elsewhere on ZygApp" ----------------------------------------------
   This block shipped with markup and no CSS, so it rendered as a bare
   bulleted list with the tag label running straight into the product name
   ("Microphone FIFINE AmpliGame AM8..."). The spans were always meant to be
   an eyebrow above the name; nothing had ever told them to stack.

   Cards rather than a list, matching the documentation cards above, so the
   bottom of the page reads as one page instead of a tool followed by an
   index. */
.frk-more{ max-width:66ch; margin:38px 0 0; padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.08); }
.frk-more h2{ font-size:19px; font-weight:600; color:#cfe9ff;
  margin:0 0 6px; letter-spacing:-.01em; }
.frk-more-lead{ font-size:14px; color:#6b8099; margin:18px 0 10px; }

.frk-more-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px;
}
.frk-more-grid li{ margin:0; }
.frk-more-grid a{
  display:block; height:100%; text-decoration:none;
  border:1px solid rgba(255,255,255,0.08); border-radius:11px;
  background:rgba(255,255,255,0.025); padding:13px 15px;
  transition:border-color .15s, background .15s;
}
.frk-more-grid a:hover{
  border-color:rgba(159,215,255,0.3); background:rgba(255,255,255,0.05);
}
/* The reason the raw output read badly: these two need to be on their own
   lines, with the tag as a small label above the name. */
.frk-more-tag{
  display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:#6b8099; margin-bottom:5px;
}
.frk-more-name{
  display:block; font-size:14.5px; line-height:1.45; color:#cfe9ff;
  font-weight:500;
}
.frk-more-foot{
  margin:20px 0 0; font-size:14px; color:#6b8099; line-height:1.8;
}
.frk-more-foot a{ color:#7aa2ff; text-decoration:none; }
.frk-more-foot a:hover{ text-decoration:underline; }