/* PURE FILTER — V1 hardware/VST interface */
:root{--pf-acid:#b8ff3d;--pf-paper:#eef0ea;--pf-ink:#161a17;--pf-metal:#c7cac4;--pf-dark:#090d0a}
*{box-sizing:border-box}.pf-page{width:min(1220px,calc(100% - 30px));margin:0 auto;padding:28px 0 80px;color:var(--pf-ink)}
.pf-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px;color:rgba(239,242,235,.55);font:700 8px/1.3 "Courier New",monospace;letter-spacing:.12em}.pf-topbar a{color:var(--pf-acid);text-decoration:none}.pf-engine{display:flex;align-items:center;gap:7px}.pf-engine i{width:6px;height:6px;border-radius:50%;background:var(--pf-acid);box-shadow:0 0 8px rgba(184,255,61,.55)}
.pf-intro{margin-bottom:20px;color:#e8ebe5}.pf-intro p{margin:0 0 4px;color:var(--pf-acid);font:700 8px/1.2 "Courier New",monospace;letter-spacing:.15em}.pf-intro h1{margin:0;font-size:clamp(34px,5vw,58px);line-height:.9;letter-spacing:-.055em}.pf-intro span{display:block;margin-top:8px;color:rgba(232,235,229,.48);font-size:11px}
.pf-shell{--spec-x:50%;position:relative;isolation:isolate;overflow:hidden;padding:24px 28px 25px;border:1px solid #555b56;border-radius:12px;background:radial-gradient(520px 220px at var(--spec-x) 0%,rgba(255,255,255,.25),transparent 62%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(40,46,41,.02) 1px 3px),linear-gradient(96deg,#d2d4cf 0%,#f0f1ed 14%,#c1c5bf 48%,#dfe1dc 73%,#b6bab4 100%);box-shadow:0 40px 86px rgba(0,0,0,.38),0 10px 20px rgba(0,0,0,.24),inset 0 2px #fff,inset 0 -3px rgba(42,48,43,.24)}
.pf-shell:before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.72);border-bottom-color:rgba(40,46,41,.24);border-radius:8px;pointer-events:none}.pf-screw{position:absolute;z-index:5;width:12px;height:12px;border-radius:50%;background:linear-gradient(45deg,transparent 44%,rgba(25,30,26,.78) 45% 52%,transparent 53%),radial-gradient(circle at 34% 26%,#fff 0 5%,#dfe1dc 14%,#939993 45%,#555c56 68%,#252a26 100%);box-shadow:0 3px 4px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.72)}.pf-screw--tl{left:10px;top:10px}.pf-screw--tr{right:10px;top:10px}.pf-screw--bl{left:10px;bottom:10px}.pf-screw--br{right:10px;bottom:10px}
.pf-head{position:relative;min-height:76px;display:flex;align-items:flex-start;justify-content:space-between;padding:7px 7px 17px}.pf-head:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(50,57,51,.25),rgba(255,255,255,.85),rgba(50,57,51,.25),transparent)}.pf-title strong{display:block;font-size:20px;letter-spacing:-.04em}.pf-title small{display:block;margin-top:4px;font:700 7px/1 "Courier New",monospace;letter-spacing:.13em;color:#4d554e}.pf-logo{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:clamp(205px,23vw,280px);pointer-events:none}.pf-logo img{display:block;width:100%;filter:drop-shadow(0 1px #fff) drop-shadow(0 3px 2px rgba(0,0,0,.27))}.pf-actions{position:relative;z-index:2;display:flex;align-items:center;gap:8px}.pf-btn,.pf-ab{height:36px;padding:0 16px;border:1px solid #555b56;border-radius:4px;background:linear-gradient(#f4f5f1,#d2d5cf 43%,#a8ada7 57%,#c8cbc6);box-shadow:0 4px 6px rgba(0,0,0,.23),inset 0 1px #fff,inset 0 -2px rgba(45,51,46,.16);color:#202520;font:800 7px/1 "Courier New",monospace;letter-spacing:.08em;cursor:pointer}.pf-ab{display:flex;align-items:center;gap:8px}.pf-ab i{width:7px;height:7px;border-radius:50%;background:#59605a;box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}.pf-ab[aria-pressed="true"] i{background:var(--pf-acid);box-shadow:0 0 8px rgba(184,255,61,.65),inset 0 1px #fff}.pf-btn:active,.pf-ab:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 2px 4px rgba(0,0,0,.16)}
.pf-display{position:relative;height:230px;margin-bottom:4px;overflow:hidden;border:5px solid #292f2a;border-top-color:#111612;border-left-color:#1c221d;border-right-color:#4b524c;border-bottom-color:#636b64;border-radius:9px;background:radial-gradient(circle at 50% 60%,rgba(184,255,61,.05),transparent 52%),linear-gradient(#050806,#0b110d 80%,#070a08);box-shadow:inset 0 18px 34px rgba(0,0,0,.96),0 1px #fff,0 7px 12px rgba(0,0,0,.29)}.pf-display:after{content:"";position:absolute;z-index:3;left:2%;top:-24%;width:62%;height:56%;transform:rotate(-4deg);background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.012) 43%,transparent 72%);pointer-events:none}.pf-display canvas{display:block;width:100%;height:100%}.pf-readout{position:absolute;z-index:4;left:14px;right:14px;top:10px;display:flex;justify-content:space-between;color:#c8ff46;font:800 8px/1 "Courier New",monospace;letter-spacing:.055em;text-shadow:0 0 6px rgba(184,255,61,.3)}.pf-axis{position:absolute;z-index:4;left:15px;right:15px;bottom:9px;display:flex;justify-content:space-between;color:rgba(230,235,228,.62);font:700 7px/1 "Courier New",monospace}.pf-meter{position:absolute;z-index:5;right:12px;top:32px;bottom:28px;width:10px;border:1px solid #39403a;border-radius:2px;background:#020403;box-shadow:inset 0 0 5px #000}.pf-meter i{position:absolute;left:1px;right:1px;bottom:1px;height:2%;background:linear-gradient(to top,#78bb23,#b8ff3d 74%,#efff87);box-shadow:0 0 5px rgba(184,255,61,.24)}
.pf-controls{display:grid;grid-template-columns:1fr .72fr 1fr;margin:0 4px 10px;border-bottom:1px solid rgba(71,78,72,.23)}.pf-channel{position:relative;min-height:350px;padding:22px 18px 18px;text-align:center;border-right:1px solid #777d77;border-left:1px solid rgba(255,255,255,.58);background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 22%,transparent 78%,rgba(55,62,56,.04));box-shadow:inset 1px 0 rgba(255,255,255,.45),inset -1px 0 rgba(60,67,61,.12)}.pf-channel:first-child{border-left:0}.pf-channel:last-child{border-right:0}.pf-channel h2{margin:0;font-size:13px;letter-spacing:.08em}.pf-channel>small{display:block;margin-top:5px;color:#586059;font:700 6px/1 "Courier New",monospace;letter-spacing:.14em}
.pf-knob-wrap{position:relative;width:146px;height:146px;margin:20px auto 10px}.pf-knob{position:absolute;inset:10px;border:1px solid #49504a;border-radius:50%;background:radial-gradient(circle at 36% 28%,#fff 0 4%,#e9ebe6 8%,#b4bab4 30%,#626a64 54%,#8d958f 69%,#d8dad5 84%,#747b75 100%);box-shadow:0 10px 15px rgba(0,0,0,.35),0 3px 3px rgba(0,0,0,.28),inset 0 2px 2px rgba(255,255,255,.72),inset 0 -3px 5px rgba(38,44,39,.25)}.pf-knob:before{content:"";position:absolute;left:50%;top:10px;width:3px;height:38px;border-radius:2px;background:linear-gradient(#eaff9b,#91c720);box-shadow:0 0 5px rgba(184,255,61,.45);transform-origin:50% 55px;transform:translateX(-50%) rotate(var(--angle,-135deg))}.pf-knob-wrap input[type=range]{position:absolute;z-index:3;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}.pf-value{display:inline-grid;place-items:center;min-width:96px;height:31px;padding:0 10px;border:1px solid #252b26;border-radius:3px;background:linear-gradient(#060907,#111611);box-shadow:inset 0 3px 7px #000,0 1px rgba(255,255,255,.55);color:#c8ff46;font:800 10px/1 "Courier New",monospace;text-shadow:0 0 5px rgba(184,255,61,.3)}
.pf-slope{display:grid;grid-template-columns:repeat(4,1fr);width:min(280px,100%);height:30px;margin:18px auto 0;border:1px solid #555c56;border-radius:4px;overflow:hidden;box-shadow:0 4px 5px rgba(0,0,0,.21),inset 0 1px #fff}.pf-slope button{border:0;border-right:1px solid #747b75;background:linear-gradient(#f0f1ed,#b6bab4);color:#343a35;font:800 6px/1 "Courier New",monospace;cursor:pointer}.pf-slope button:last-child{border-right:0}.pf-slope button.is-active{background:linear-gradient(#deff89,#99d233);color:#20300f;box-shadow:inset 0 1px #f5ffdc,inset 0 -2px rgba(58,91,17,.25)}
.pf-resonance .pf-knob-wrap{width:130px;height:130px;margin-top:28px}.pf-resonance .pf-knob{inset:13px}.pf-resonance .pf-knob:before{height:32px;transform-origin:50% 47px}.pf-resonance-note{margin:18px auto 0;max-width:190px;color:#5a625b;font:700 7px/1.55 "Courier New",monospace;letter-spacing:.05em}.pf-reset-small{margin-top:16px;height:29px;padding:0 15px;border:1px solid #5d645e;border-radius:3px;background:linear-gradient(#eff0ec,#b4b8b2);box-shadow:0 3px 4px rgba(0,0,0,.18),inset 0 1px #fff;color:#303631;font:800 6px/1 "Courier New",monospace;letter-spacing:.08em;cursor:pointer}
.pf-file{margin:8px 4px 15px;border:2px solid #282e29;border-radius:7px;background:radial-gradient(circle,rgba(255,255,255,.05) 0 1px,transparent 1.2px) 0 0/5px 5px,linear-gradient(#171c18,#090c0a 72%);box-shadow:inset 0 8px 18px rgba(0,0,0,.8),0 1px #fff,0 5px 8px rgba(0,0,0,.2)}.pf-load{width:100%;min-height:76px;display:flex;align-items:center;justify-content:center;gap:14px;border:0;background:transparent;color:#f0f3ed;cursor:pointer}.pf-load__icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid #72862b;border-radius:50%;background:radial-gradient(circle at 38% 34%,#303831,#111512 66%);box-shadow:inset 0 3px 7px #000;color:#c8ff46;font-size:28px}.pf-load b{display:block;text-align:left;font:800 11px/1 "Courier New",monospace;letter-spacing:.1em}.pf-load small{display:block;margin-top:7px;text-align:left;color:#ccd2ca;font:700 7px/1 "Courier New",monospace;letter-spacing:.06em}
.pf-transport{display:grid;grid-template-columns:58px auto minmax(180px,1fr) auto auto;align-items:center;gap:12px;margin:0 5px}.pf-play{width:58px;height:42px;border:1px solid #555c56;border-radius:5px;background:linear-gradient(#eceee9,#b9bdb7 48%,#969c96 54%,#cdd0ca);box-shadow:0 5px 7px rgba(0,0,0,.27),inset 0 1px #fff;cursor:pointer}.pf-play i{display:block;width:0;height:0;margin:auto;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #8fc925;filter:drop-shadow(0 0 2px rgba(184,255,61,.35))}.pf-play.is-playing i{width:12px;height:14px;border:0;border-left:4px solid #82b922;border-right:4px solid #82b922}.pf-time{font:800 8px/1 "Courier New",monospace;color:#2a302b}.pf-seek{accent-color:#8dc925}.pf-format{height:38px;display:grid;grid-template-columns:1fr 1.15fr;border:2px solid #353b36;border-radius:4px;overflow:hidden;background:#111512;box-shadow:inset 0 2px 5px #000}.pf-format button{min-width:60px;border:0;border-right:1px solid #5f665f;background:linear-gradient(#454b46,#242925);color:#d0d5cf;font:800 6px/1 "Courier New",monospace;cursor:pointer}.pf-format button:last-child{border-right:0}.pf-format button.is-active{background:linear-gradient(#1b211b,#0c100d);color:#c8ff46;box-shadow:inset 0 0 0 1px #87b423}.pf-export{height:42px;min-width:186px;padding:0 14px;border:1px solid #3c4919;border-radius:4px;background:linear-gradient(#e2ff84,#a9df3a 18%,#8bc321 54%,#78aa16 57%,#9fd42b);box-shadow:0 5px 7px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.8);color:#17210d;font:900 7px/1 "Courier New",monospace;letter-spacing:.06em;cursor:pointer}.pf-export:disabled,.pf-play:disabled{opacity:.48;cursor:not-allowed}
.pf-note{margin:22px 6px 0;color:rgba(237,240,233,.5);font-size:10px;line-height:1.6}.pf-note b{color:#e9ece6}
@media(max-width:820px){.pf-controls{grid-template-columns:1fr}.pf-channel{min-height:auto;border-left:0;border-right:0;border-bottom:1px solid #777d77}.pf-logo{width:190px}.pf-transport{grid-template-columns:58px 1fr auto}.pf-time{display:none}.pf-seek{grid-column:2/4;grid-row:2}.pf-format{grid-column:2;grid-row:1}.pf-export{grid-column:3;grid-row:1;min-width:145px}}
@media(max-width:620px){.pf-page{width:min(100% - 14px,1220px)}.pf-shell{padding:18px 12px 20px}.pf-logo{display:none}.pf-head{min-height:64px}.pf-actions{gap:5px}.pf-btn,.pf-ab{padding:0 9px}.pf-display{height:190px}.pf-transport{grid-template-columns:48px 1fr}.pf-play{width:48px}.pf-format{grid-column:2;grid-row:1}.pf-export{grid-column:1/3;grid-row:3;width:100%}.pf-seek{grid-column:1/3;grid-row:2}.pf-knob-wrap{width:130px;height:130px}}