/* PURE FILTER · blue graphite hardware pass. Visual layer only. */
:root{
  --pf-blue-metal:#3b474f;
  --pf-blue-metal-dark:#202a30;
  --pf-blue-line:rgba(184,205,217,.24);
  --pf-acid:#c8ff46;
}

.pf-page{perspective:1500px}

.pf-page .pf-shell{
  isolation:isolate!important;
  overflow:hidden!important;
  border:2px solid #11191e!important;
  border-top-color:#8b9aa3!important;
  border-right-color:#27333a!important;
  border-bottom:6px solid #11191e!important;
  border-radius:19px!important;
  background:
    radial-gradient(1100px 220px at 50% -4%,rgba(255,255,255,.31),transparent 61%),
    linear-gradient(102deg,rgba(255,255,255,.08),transparent 24% 72%,rgba(0,0,0,.13)),
    url("../../assets/pure-eq-graphite-texture-v3.webp") center/cover no-repeat,
    linear-gradient(105deg,#28333a 0%,#53616a 17%,#354149 48%,#48565f 74%,#222c32 100%)!important;
  background-blend-mode:screen,soft-light,soft-light,normal!important;
  box-shadow:
    0 3px 0 #070b0d,
    0 11px 18px rgba(0,0,0,.52),
    0 36px 52px rgba(0,0,0,.46),
    0 70px 105px rgba(0,0,0,.30),
    inset 0 2px rgba(255,255,255,.62),
    inset 2px 0 rgba(255,255,255,.13),
    inset -2px 0 rgba(0,0,0,.31),
    inset 0 -5px rgba(0,0,0,.43)!important;
}

.pf-page .pf-shell::before{
  display:block!important;
  inset:6px!important;
  z-index:20!important;
  border:1px solid rgba(210,226,235,.46)!important;
  border-right-color:rgba(7,12,15,.48)!important;
  border-bottom-color:rgba(3,7,9,.74)!important;
  border-radius:13px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 -1px rgba(0,0,0,.42)!important;
  pointer-events:none!important;
}

/* Keep the body as one continuous object: no detached rear plate. */
.pf-page .pf-shell::after{display:none!important}

.pf-page .pf-screw{
  z-index:22!important;
  width:14px!important;
  height:14px!important;
  border:1px solid #060a0c!important;
  background:
    linear-gradient(45deg,transparent 43%,#090d0f 44% 53%,transparent 54%),
    radial-gradient(circle at 35% 27%,#d8e0e4 0 5%,#7e8a91 12%,#313b41 43%,#11181c 70%,#05080a 100%)!important;
  box-shadow:0 3px 5px rgba(0,0,0,.78),inset 0 1px rgba(255,255,255,.56),0 0 0 1px rgba(174,194,205,.14)!important;
}

.pf-page .pf-head{
  min-height:76px!important;
  padding:6px 10px 16px!important;
  text-shadow:0 2px 2px rgba(0,0,0,.58)!important;
}
.pf-page .pf-head::after{
  height:2px!important;
  background:linear-gradient(90deg,transparent,rgba(8,13,16,.62) 10%,rgba(186,205,215,.42) 50%,rgba(8,13,16,.62) 90%,transparent)!important;
  box-shadow:0 1px rgba(255,255,255,.08)!important;
}
.pf-page .pf-title strong{color:#f2f5f6!important;text-shadow:0 2px 2px #101619!important}
.pf-page .pf-title small{color:#bdc8ce!important;text-shadow:0 1px 1px #151c20!important}
.pf-page .pf-logo{
  top:50%!important;
  width:clamp(225px,23vw,285px)!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.pf-page .pf-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);
}
.pf-page .pf-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;
}
.pf-page .pf-final-plate{display:none!important}

.pf-page .pf-btn,.pf-page .pf-ab,.pf-page .pf-delta{
  border-color:#10171b!important;
  border-top-color:#7f9099!important;
  background:linear-gradient(#59666d 0%,#37434a 45%,#202a30 53%,#46535a 100%)!important;
  box-shadow:0 5px 8px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.42),inset 0 -2px rgba(0,0,0,.35)!important;
  color:#eef3f5!important;
  text-shadow:0 1px 2px #0a0e11!important;
}

.pf-page .pf-display{
  border:6px solid #11191e!important;
  border-top-color:#070c0f!important;
  border-left-color:#0a1115!important;
  border-right-color:#45535b!important;
  border-bottom-color:#74828a!important;
  border-radius:12px!important;
  background:radial-gradient(circle at 50% 60%,rgba(184,255,61,.055),transparent 52%),linear-gradient(#030706,#08100c 80%,#050907)!important;
  box-shadow:inset 0 22px 38px rgba(0,0,0,.96),inset 0 -2px rgba(181,202,212,.08),0 2px rgba(201,218,226,.30),0 10px 16px rgba(0,0,0,.52)!important;
}

.pf-page .pf-controls{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  margin:8px 4px 14px!important;
  border:1px solid #131c21!important;
  border-top-color:#71818a!important;
  border-bottom:3px solid #11191e!important;
  border-radius:10px!important;
  background:
    radial-gradient(640px 190px at 50% 0%,rgba(207,224,233,.16),transparent 70%),
    linear-gradient(96deg,rgba(255,255,255,.05),transparent 30% 70%,rgba(0,0,0,.12)),
    url("../../assets/pure-eq-graphite-texture-v3.webp") center/cover no-repeat,
    linear-gradient(96deg,#2d3940,#4b5961 18%,#333f46 50%,#45535b 78%,#283239)!important;
  background-blend-mode:screen,soft-light,soft-light,normal!important;
  box-shadow:inset 0 2px rgba(255,255,255,.17),inset 0 -8px 18px rgba(0,0,0,.25),0 8px 14px rgba(0,0,0,.34)!important;
}
.pf-page .pf-controls::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:7;
  border-radius:9px;
  background:linear-gradient(165deg,rgba(229,242,248,.075),transparent 32% 76%,rgba(5,10,13,.10));
  box-shadow:inset 0 0 0 1px rgba(211,227,235,.07),inset 0 14px 24px rgba(218,234,242,.025);
  pointer-events:none;
}
.pf-page .pf-controls::after{
  content:"";
  position:absolute;
  z-index:8;
  left:2%;right:2%;top:1px;height:35%;
  border-radius:9px 9px 45% 45%;
  background:linear-gradient(178deg,rgba(228,241,247,.055),rgba(191,215,226,.012) 58%,transparent);
  pointer-events:none;
}
.pf-page .pf-channel{
  z-index:1!important;
  border-left:1px solid rgba(185,207,218,.16)!important;
  border-right:1px solid rgba(5,10,13,.52)!important;
  background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 24% 76%,rgba(0,0,0,.06))!important;
  box-shadow:inset 1px 0 rgba(255,255,255,.045),inset -1px 0 rgba(0,0,0,.22)!important;
}
.pf-page .pf-channel:first-child{border-left:0!important}
.pf-page .pf-channel:last-child{border-right:0!important}
.pf-page .pf-channel h2{color:#f1f5f6!important;text-shadow:0 2px 2px #11171b!important}
.pf-page .pf-channel>small{color:#b9c5ca!important;text-shadow:0 1px 1px #10161a!important}

.pf-page .pf-knob-wrap{
  filter:drop-shadow(0 14px 10px rgba(0,0,0,.48))!important;
}
.pf-page .pf-knob-wrap::before{
  border-color:#121a1f!important;
  background:radial-gradient(circle at 38% 30%,#86959d 0%,#46535b 42%,#202a30 70%,#0b1115 100%)!important;
  box-shadow:0 0 0 2px rgba(5,9,12,.55),0 5px 8px rgba(0,0,0,.64),inset 0 2px 2px rgba(218,231,237,.34),inset 0 -3px 5px rgba(0,0,0,.57)!important;
}
.pf-page .pf-knob{
  border-color:#747f85!important;
  background:
    linear-gradient(var(--knob-sheen-angle,125deg),rgba(255,255,255,.38),rgba(255,255,255,.08) 31%,transparent 43% 72%,rgba(47,57,62,.12)),
    radial-gradient(circle at 38% 30%,#ffffff 0 6%,#eff0ec 22%,#d8dad5 54%,#aeb4b2 78%,#737d7d 100%)!important;
  box-shadow:0 12px 15px rgba(0,0,0,.48),0 3px 4px rgba(0,0,0,.55),inset 0 2px 2px rgba(255,255,255,.92),inset 0 -4px 7px rgba(40,51,57,.32)!important;
}
.pf-page .pf-knob::before{
  background:linear-gradient(#efffc7,#c8ff46 38%,#76a71c)!important;
  box-shadow:0 0 7px rgba(200,255,70,.68),0 1px 1px rgba(0,0,0,.30)!important;
}

.pf-page .pf-value,.pf-page .pf-slope,.pf-page .pf-filter-toggle,.pf-page .pf-reset-small,.pf-page .pf-freq-reset{
  border-color:#11191d!important;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.86),0 1px rgba(192,211,220,.20),0 3px 5px rgba(0,0,0,.25)!important;
}
.pf-page .pf-value{background:linear-gradient(#040809,#10181b)!important}
.pf-page .pf-slope button,.pf-page .pf-filter-toggle,.pf-page .pf-reset-small,.pf-page .pf-freq-reset{background:linear-gradient(#4c5960,#202a30 54%,#344148)!important;color:#dde5e8!important;text-shadow:0 1px #101518!important}
.pf-page .pf-slope button.is-active,.pf-page .pf-filter-toggle[aria-pressed="true"]{color:var(--pf-acid)!important}

.pf-page .pf-file{
  border-color:#10171b!important;
  border-top-color:#4d5c64!important;
  border-bottom:3px solid #080d10!important;
  border-radius:10px!important;
  box-shadow:inset 0 11px 24px rgba(0,0,0,.88),inset 0 -1px rgba(183,204,214,.08),0 2px rgba(194,212,221,.16),0 8px 13px rgba(0,0,0,.38)!important;
}
.pf-page .pf-load__icon{background:radial-gradient(circle at 38% 31%,#4a5960,#182228 67%)!important;border-color:#77952d!important;box-shadow:inset 0 4px 8px #050809,0 3px 5px rgba(0,0,0,.58)!important}

.pf-page .pf-time{color:#e1e7e9!important;text-shadow:0 1px 2px #101518!important}
.pf-page .pf-play{
  border-color:#11191d!important;
  border-top-color:#87979f!important;
  background:linear-gradient(#66747c,#38454c 47%,#202a30 55%,#4c5960)!important;
  box-shadow:0 6px 9px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.43),inset 0 -2px rgba(0,0,0,.35)!important;
}
.pf-page .pf-format{border-color:#11191e!important;box-shadow:inset 0 4px 8px #000,0 1px rgba(191,211,221,.22),0 5px 7px rgba(0,0,0,.34)!important}
.pf-page .pf-format button{background:linear-gradient(#46535a,#182126)!important;color:#d7e0e4!important}
.pf-page .pf-export{box-shadow:0 7px 10px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.85),inset 0 -2px rgba(48,73,16,.30)!important}

@media(max-width:820px){
  .pf-page .pf-head{display:grid!important;grid-template-columns:1fr auto!important;grid-template-areas:"title actions" "logo logo"!important;row-gap:8px!important;padding-bottom:12px!important}
  .pf-page .pf-title{grid-area:title!important}
  .pf-page .pf-actions{grid-area:actions!important}
  .pf-page .pf-logo{grid-area:logo!important;position:relative!important;inset:auto!important;transform:none!important;display:flex!important;width:clamp(150px,46vw,205px)!important;margin:-3px auto -17px!important}
  .pf-page .pf-logo::after{bottom:5px!important;font-size:5.5px!important}
  .pf-page .pf-channel{border-left:0!important;border-right:0!important;border-bottom:1px solid rgba(7,12,15,.62)!important;box-shadow:inset 0 -1px rgba(193,214,224,.10)!important}
}

@media(max-width:980px) and (min-width:821px){
  .pf-page .pf-logo{width:205px!important;height:auto!important}
}

@media(max-width:620px){
  .pf-page .pf-shell{border-radius:14px!important;border-bottom-width:5px!important}
  .pf-page .pf-controls{border-radius:8px!important}
}
