/* PURE EQ · GRAPHITE HARDWARE RENDER
 * Visual layer only. No DSP, audio graph or control behavior is changed.
 */

:root{
  --peq-acid:#c8ff24;
  --peq-graphite-hi:#777b79;
  --peq-graphite:#4b4f4d;
  --peq-graphite-mid:#383c3a;
  --peq-graphite-low:#202321;
  --peq-ink:#090b0a;
}

.peq-page{perspective:1900px;perspective-origin:50% 28%}

/* ---------- ONE REAL METAL ENCLOSURE ---------- */
.peq-shell{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  max-width:1180px!important;
  padding:26px 30px 28px!important;
  border:2px solid #141715!important;
  border-top-color:#aeb2af!important;
  border-left-color:#919693!important;
  border-right-color:#242825!important;
  border-bottom-color:#090b0a!important;
  border-bottom-width:5px!important;
  border-radius:20px!important;
  background:
    radial-gradient(900px 180px at 48% 0%,rgba(255,255,255,.17),transparent 66%),
    linear-gradient(104deg,transparent 0 8%,rgba(255,255,255,.05) 21%,transparent 34% 68%,rgba(0,0,0,.10) 87%,transparent),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px,rgba(0,0,0,.022) 4px 5px,transparent 5px 9px),
    url("/assets/pure-eq-graphite-texture-v3.webp"),
    linear-gradient(90deg,#45433f,#55514b 18%,#3d3c39 47%,#4d4a45 72%,#353532 100%)!important;
  background-size:auto,auto,auto,cover,auto!important;
  background-position:center,center,center,center,center!important;
  background-blend-mode:screen,soft-light,soft-light,soft-light,normal!important;
  box-shadow:
    0 1px rgba(255,255,255,.74),
    0 8px 10px -4px rgba(0,0,0,.72),
    0 20px 28px rgba(0,0,0,.48),
    0 54px 86px rgba(0,0,0,.56),
    inset 0 2px rgba(255,255,255,.47),
    inset 2px 0 rgba(255,255,255,.16),
    inset -2px 0 rgba(0,0,0,.42),
    inset 0 -1px rgba(255,255,255,.07),
    inset 0 -4px rgba(0,0,0,.72)!important;
  transform:translateZ(0);
}

/* Rolled outer rim. */
.peq-shell::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  inset:7px!important;
  border:1px solid #171a18!important;
  border-top-color:rgba(255,255,255,.58)!important;
  border-left-color:rgba(255,255,255,.32)!important;
  border-radius:14px!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 0 0 3px rgba(0,0,0,.20)!important;
  pointer-events:none!important;
}

/* Fine cast-metal surface irregularity. */
.peq-shell::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:7!important;
  inset:2px!important;
  border-radius:17px!important;
  pointer-events:none!important;
  opacity:.46!important;
  background:
    radial-gradient(ellipse at 14% 24%,rgba(255,255,255,.09),transparent 21%),
    repeating-linear-gradient(17deg,rgba(255,255,255,.020) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(103deg,rgba(0,0,0,.018) 0 1px,transparent 1px 5px)!important;
  mix-blend-mode:soft-light;
}

/* ---------- CORNER HARDWARE ---------- */
.peq-screw{
  z-index:9!important;
  width:17px!important;
  height:17px!important;
  border:1px solid #030403!important;
  border-radius:50%!important;
  background:
    linear-gradient(45deg,transparent 44%,#020302 45% 52%,transparent 53%),
    radial-gradient(circle at 34% 27%,#d8dcda 0 4%,#777d79 12%,#252925 34%,#090b0a 58%,#454a47 76%,#080a09 100%)!important;
  box-shadow:0 2px 3px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.62),0 0 0 2px rgba(255,255,255,.08)!important;
}
.peq-screw--tl{top:12px!important;left:12px!important}.peq-screw--tr{top:12px!important;right:12px!important}
.peq-screw--bl{bottom:12px!important;left:12px!important}.peq-screw--br{bottom:12px!important;right:12px!important}

/* ---------- HEADER ---------- */
.peq-panel-head{
  position:relative!important;
  z-index:3!important;
  min-height:82px!important;
  padding:5px 32px 15px!important;
  margin:0 0 5px!important;
  border:0!important;
  border-bottom:1px solid rgba(0,0,0,.40)!important;
  background:transparent!important;
  box-shadow:0 1px rgba(255,255,255,.18)!important;
}
.peq-panel-head strong{
  color:#111412!important;
  font-size:23px!important;
  letter-spacing:-.035em!important;
  text-shadow:0 1px rgba(255,255,255,.42)!important;
}
.peq-panel-head small{color:#101311!important;font-size:8px!important;letter-spacing:.14em!important;text-shadow:0 1px rgba(255,255,255,.30)!important}
.peq-panel-logo{
  top:50%!important;
  width:clamp(225px,23vw,285px)!important;
  height:auto!important;
  align-items:center!important;
  overflow:visible!important;
}
.peq-panel-logo::after{
  content:"CREATE. INN\00D3VATE. DOMINATE.";
  position:absolute;
  z-index:2;
  left:50%;
  bottom:7px;
  transform:translateX(-50%);
  color:#f0f1ee;
  font:800 clamp(5.5px,.65vw,7.5px)/1 Arial,sans-serif;
  letter-spacing:.28em;
  white-space:nowrap;
  text-shadow:0 1px 1px #000,0 0 3px rgba(255,255,255,.16);
}
.peq-panel-logo img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  transform:none!important;
  clip-path:inset(0 0 36% 0)!important;
  image-rendering:auto!important;
  filter:drop-shadow(0 1px rgba(255,255,255,.34)) drop-shadow(0 3px 2px rgba(0,0,0,.44)) contrast(1.04)!important;
}
.peq-head-actions{gap:10px!important}

/* Hardware buttons from the reference unit. */
.peq-small-btn,.peq-ab,.peq-gain-range__button,.peq-width__button,.peq-gain-zero,.peq-audition,
.peq-export-format button,.peq-play,.peq-export{
  border:1px solid #111412!important;
  border-top-color:#888e8a!important;
  border-left-color:#6d736f!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,#777c79 0%,#565b58 45%,#2e322f 52%,#414542 100%)!important;
  color:#e6e9e6!important;
  text-shadow:0 1px #000!important;
  box-shadow:0 3px 4px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.30),inset 0 -1px rgba(0,0,0,.48)!important;
}
.peq-small-btn,.peq-ab{height:42px!important;padding-inline:18px!important;font-size:9px!important}
.peq-ab i{background:#151915!important;border-color:#060806!important}
.peq-ab[aria-pressed="true"] i{background:var(--peq-acid)!important;box-shadow:0 0 8px rgba(200,255,36,.72)!important}
.peq-gain-range{height:42px!important;padding:0!important;border:1px solid #171a18!important;background:#262a27!important;box-shadow:0 3px 5px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.12)!important}
.peq-gain-range__label{height:100%;display:grid!important;place-items:center;padding-inline:11px!important;color:#101311!important;background:linear-gradient(#8b908d,#555a57)!important;text-shadow:0 1px rgba(255,255,255,.35)!important}
.peq-gain-range__button{height:100%!important;min-width:55px!important;border-radius:0!important}
.peq-gain-range__button.is-active,.peq-width__button.is-active,.peq-audition.is-active,.peq-audition[aria-pressed="true"],.peq-export-format button.is-active{
  color:var(--peq-acid)!important;
  border-color:#171b12!important;
  background:linear-gradient(#4d524e,#222622 54%,#131612)!important;
  text-shadow:0 0 5px rgba(200,255,36,.26),0 1px #000!important;
  box-shadow:inset 0 0 0 1px rgba(200,255,36,.18),0 3px 4px rgba(0,0,0,.50)!important;
}

/* ---------- ANALYZER WINDOW ---------- */
.peq-display{
  position:relative!important;
  z-index:3!important;
  height:268px!important;
  margin:0 4px 0!important;
  padding-right:54px!important;
  overflow:hidden!important;
  border:7px solid #141715!important;
  border-top-color:#070908!important;
  border-left-color:#181b19!important;
  border-right-color:#727875!important;
  border-bottom-color:#858b87!important;
  border-radius:13px!important;
  outline:1px solid rgba(255,255,255,.35)!important;
  outline-offset:2px!important;
  background:radial-gradient(ellipse at 50% 72%,rgba(200,255,36,.055),transparent 58%),linear-gradient(#010201,#070b07 78%,#020302)!important;
  box-shadow:inset 0 28px 42px #000,inset 14px 0 22px rgba(0,0,0,.55),inset -12px 0 18px rgba(0,0,0,.48),0 1px rgba(255,255,255,.34),0 5px 9px rgba(0,0,0,.44)!important;
}
.peq-display::before{opacity:.32!important}
.peq-readout{color:var(--peq-acid)!important;font-size:9px!important;letter-spacing:.08em!important}
.peq-readout b{color:#d0d5d1!important}
.peq-display__labels{color:rgba(231,235,231,.82)!important;font-size:8px!important}
.peq-meter{width:19px!important;border-color:#111411!important;background:#020302!important}
.peq-tp-readout{background:#080b09!important;border-color:#343936!important;color:#d7dcd7!important}

/* ---------- SIX DARK CHANNEL STRIPS ---------- */
.peq-controls{
  position:relative!important;
  isolation:isolate!important;
  z-index:3!important;
  margin:0 5px 8px!important;
  overflow:hidden!important;
  border:1px solid #141715!important;
  border-top-color:rgba(177,184,179,.52)!important;
  border-left-color:rgba(139,146,141,.30)!important;
  border-radius:6px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),transparent 16% 82%,rgba(0,0,0,.12)),
    url("/assets/pure-eq-graphite-texture-v3.webp"),
    linear-gradient(180deg,#4b4945,#3c3b38 48%,#353633)!important;
  background-size:auto,cover,auto!important;
  background-position:center!important;
  background-blend-mode:screen,soft-light,normal!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.24),
    inset 0 -2px rgba(0,0,0,.32),
    0 5px 8px rgba(0,0,0,.30)!important;
}
.peq-controls::after{
  content:"";
  position:absolute;
  z-index:8;
  inset:1px;
  border:1px solid rgba(211,217,212,.13);
  border-top-color:rgba(239,243,239,.31);
  border-radius:4px;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(230,235,231,.105) 0%,rgba(116,123,118,.035) 12%,rgba(21,24,22,.025) 58%,rgba(5,7,6,.15) 100%),
    linear-gradient(108deg,transparent 0 9%,rgba(255,255,255,.035) 21%,transparent 36% 69%,rgba(255,255,255,.022) 84%,transparent 96%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.22),
    inset 1px 0 rgba(255,255,255,.07),
    inset -1px 0 rgba(0,0,0,.22),
    inset 0 -3px rgba(0,0,0,.20);
}
.peq-control{
  min-height:405px!important;
  padding:17px 8px 15px!important;
  border-left:1px solid rgba(255,255,255,.18)!important;
  border-right:1px solid rgba(0,0,0,.62)!important;
  background:
    radial-gradient(ellipse at 50% 4%,rgba(255,255,255,.07),transparent 25%),
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 22% 78%,rgba(0,0,0,.10))!important;
  background-size:auto,auto!important;
  background-blend-mode:screen,soft-light!important;
  box-shadow:inset 1px 0 rgba(255,255,255,.045),inset -1px 0 rgba(0,0,0,.22)!important;
}
.peq-control:first-child{border-left:0!important}.peq-control:last-child{border-right:0!important}
.peq-control__name{color:#f0f2f0!important;font-size:12px!important;text-shadow:0 2px 2px #000!important}
.peq-control__freq{color:#f0f2ef!important;font-size:8px!important;text-shadow:0 1px #000!important}
.peq-control__freq--selectable:hover{border-color:#777d78!important;background:rgba(255,255,255,.08)!important;color:var(--peq-acid)!important}

.peq-width-slot{
  width:100%!important;
  height:32px!important;
  margin-top:7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.peq-width{
  width:min(120px,calc(100% - 16px))!important;
  height:29px!important;
  margin:0 auto!important;
  border:1px solid #141715!important;
  background:#282c29!important;
  box-shadow:0 3px 4px rgba(0,0,0,.48)!important;
}
.peq-width__button{height:100%!important;min-height:0!important;font-size:7px!important;padding-inline:7px!important}

/* Narrow recessed travels, etched scales and machined graphite caps. */
.peq-fader{
  width:88px!important;
  height:214px!important;
  margin-top:13px!important;
  color:#f0f3ef!important;
  background:
    linear-gradient(90deg,transparent 0 12%,rgba(238,240,236,.22) 12% 13%,transparent 13% 29%,rgba(0,0,0,.62) 29% 30%,transparent 30% 70%,rgba(0,0,0,.62) 70% 71%,transparent 71% 87%,rgba(238,240,236,.18) 87% 88%,transparent 88%),
    repeating-linear-gradient(to bottom,transparent 0 11px,rgba(235,237,233,.20) 11px 12px,rgba(0,0,0,.64) 12px 13px,transparent 13px 23px)!important;
}
.peq-fader::before{
  top:7px!important;bottom:7px!important;width:9px!important;
  border:1px solid #050605!important;border-radius:5px!important;
  background:linear-gradient(90deg,#010201,#141613 31%,#030403 53%,#1d201c 79%,#020302)!important;
  box-shadow:inset 3px 0 4px #000,inset -2px 0 3px rgba(255,255,255,.07),inset 0 6px 9px #000,0 1px rgba(255,255,255,.27)!important;
}
.peq-fader::after{right:1px!important;color:#f3f5f2!important;text-shadow:0 1px 2px #000!important}
.peq-fader__cap{
  width:44px!important;height:29px!important;
  bottom:clamp(0px,calc(var(--position) - 14.5px),185px)!important;
  border:1px solid #111310!important;border-top-color:#aeb2ad!important;border-bottom-color:#050605!important;border-radius:3px!important;
  background:
    repeating-linear-gradient(0deg,rgba(235,239,234,.20) 0 1px,rgba(17,20,18,.35) 1px 3px),
    linear-gradient(90deg,#242825,#5b615d 13%,#303532 34%,#7b817d 50%,#303532 66%,#5b605c 87%,#202421)!important;
  box-shadow:0 10px 12px rgba(0,0,0,.54),0 3px 3px rgba(0,0,0,.68),inset 0 1px rgba(255,255,255,.66),inset 0 -2px rgba(0,0,0,.72)!important;
}
.peq-fader__cap::before,.peq-fader__cap::after{width:4px!important;top:3px!important;bottom:3px!important;background:repeating-linear-gradient(0deg,#242724 0 1px,#8b908b 1px 2px,#343834 2px 3px)!important}
.peq-fader__cap i{left:7px!important;right:7px!important;top:13px!important;height:2px!important;background:var(--peq-acid)!important;box-shadow:0 0 4px rgba(200,255,36,.46)!important}

.peq-gain-tools{margin-top:8px!important}
.peq-control output,.peq-gain-entry{
  min-width:88px!important;height:31px!important;
  border:2px solid #111412!important;border-radius:4px!important;
  background:linear-gradient(#020302,#080c08)!important;
  color:var(--peq-acid)!important;font-size:10px!important;
  box-shadow:inset 0 4px 7px #000,0 1px rgba(255,255,255,.24),0 3px 4px rgba(0,0,0,.34)!important;
}
.peq-gain-zero{width:30px!important;height:31px!important;font-size:0!important}
.peq-gain-zero::after{content:"Ø";font-size:13px}
.peq-audition{width:76px!important;height:32px!important;margin-top:9px!important;font-size:8px!important}

/* ---------- PERFORATED LOAD BAY ---------- */
.peq-file{
  position:relative!important;z-index:3!important;
  margin:6px 5px 16px!important;
  border:5px solid #151816!important;border-top-color:#070908!important;border-right-color:#676d69!important;border-bottom-color:#7a807c!important;
  border-radius:12px!important;
  outline:1px solid rgba(255,255,255,.20)!important;
  background:radial-gradient(circle,#020302 0 2px,transparent 2.4px) 0 0/12px 12px,linear-gradient(#181c19,#080a09)!important;
  box-shadow:inset 0 8px 16px #000,inset 9px 0 14px rgba(0,0,0,.55),0 1px rgba(255,255,255,.22),0 5px 7px rgba(0,0,0,.42)!important;
}
.peq-load{min-height:78px!important;color:#f2f4f1!important}
.peq-load__icon{width:45px!important;height:45px!important;border-color:#7c8d31!important;background:radial-gradient(circle at 38% 32%,#444a45,#121512 68%)!important;color:var(--peq-acid)!important;box-shadow:inset 0 3px 6px #000,0 2px 3px #000!important}
.peq-load b{font-size:11px!important}.peq-load small{color:#e1e5e1!important}

/* ---------- BOTTOM TRANSPORT ---------- */
.peq-transport{position:relative!important;z-index:3!important;margin:0 8px!important;padding:3px 0 5px!important;border-top:0!important}
.peq-play{width:59px!important;height:43px!important}.peq-play i{border-left-color:var(--peq-acid)!important;filter:drop-shadow(0 0 3px rgba(200,255,36,.35))}
.peq-time{color:#f0f3ef!important;font-size:9px!important;text-shadow:0 1px #000!important}
.peq-seek{height:5px!important;accent-color:#b8bdba!important;filter:drop-shadow(0 2px 1px rgba(0,0,0,.58))!important}
.peq-export-format{height:43px!important;border-color:#101311!important;background:#151816!important}
.peq-export-format button{min-width:72px!important;color:#f2f4f1!important}
.peq-export{height:43px!important;min-width:205px!important;color:var(--peq-acid)!important;border-color:#263017!important;background:linear-gradient(#3d4730,#1c2317 54%,#11150e)!important;box-shadow:inset 0 0 0 1px rgba(200,255,36,.18),0 4px 6px rgba(0,0,0,.50)!important}

@media(max-width:980px){
  .peq-panel-logo{width:205px!important;height:auto!important}
  .peq-panel-head{padding-inline:20px!important}
  .peq-control{min-height:390px!important}
}
@media(max-width:900px){
  .peq-controls{grid-template-columns:repeat(3,1fr)!important}
  .peq-control{min-height:375px!important}
}
@media(max-width:820px){.peq-panel-logo{display:none!important}}
@media(max-width:680px){
  .peq-shell{padding:21px 15px 23px!important;border-radius:16px!important;transform:none!important}
  .peq-shell::before{inset:5px!important;border-radius:11px!important}
  .peq-shell::after{border-radius:14px!important}
  .peq-panel-head{display:grid!important;grid-template-columns:1fr!important;gap:11px!important;min-height:auto!important;padding:3px 16px 14px!important}
  .peq-panel-head>div:first-child{width:100%!important}
  .peq-panel-head strong{font-size:20px!important}
  .peq-head-actions{width:100%!important;justify-content:flex-start!important;gap:7px!important}
  .peq-small-btn,.peq-ab{height:37px!important;padding-inline:13px!important}
  .peq-gain-range{height:37px!important}
  .peq-gain-range__button{min-width:42px!important}
  .peq-display{height:205px!important;border-width:6px!important}
  .peq-controls{grid-template-columns:repeat(2,1fr)!important}
  .peq-control{min-height:345px!important}
  .peq-fader{height:188px!important;width:82px!important}
  .peq-fader__cap{width:42px!important;height:28px!important;bottom:clamp(0px,calc(var(--position) - 14px),160px)!important}
  .peq-fader__cap i{top:12px!important}
  .peq-transport{grid-template-columns:48px 1fr auto!important}
  .peq-export{min-width:0!important}
}

@media(prefers-reduced-motion:reduce){.peq-shell{transform:none!important}}