/* Shared artwork and controls for the editor and workshop. */ @scope (.rig-effects, .effects-workshop) { /* All lettering and moving hardware are live elements over a reusable enclosure. */ .pedal{position:relative;width:326px;max-width:100%;aspect-ratio:.88;padding:15px 14px 43px;border-radius:5px 5px 3px 3px;background:linear-gradient(#ffffff36,transparent 8%,#0002 90%,#0005),url('assets/theme/shared/metal-texture.png') center/cover;border:1px solid #868e8c;box-shadow:0 22px 18px -7px #000c,0 5px 0 #606967,0 9px 0 #3a4240,inset 0 1px 2px #fff9;color:#e2e0d4}.pedal-face{position:relative;height:100%;border:3px double #b2b5aa;border-radius:7px;padding:13px 12px;background:linear-gradient(#141818f2,#141818f0),url('assets/theme/shared/metal-texture.png') center/cover;box-shadow:0 0 0 3px #202625,inset 0 1px 5px #000}.pedal-title{text-align:center;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:bold;font-size:32px;margin:0 0 25px;letter-spacing:-1px;text-shadow:0 1px 1px #000}.pedal-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pedal-control{min-width:0;text-align:center}.pedal-dial{position:relative;width:70px;height:70px;max-width:100%;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;border:1px solid #b5b5a888;background:repeating-conic-gradient(from 225deg,#c6c7bc 0deg 1deg,transparent 2deg 22.5deg)}.pedal-dial:before{content:'';position:absolute;inset:7px;border:1px solid #d2d1c388;border-radius:50%;background:#202422}.pedal-knob{position:relative;width:47px;height:47px;border-radius:50%;border:1px solid #030504;background:radial-gradient(circle at 35% 25%,#444a46,#121613 65%);box-shadow:0 4px 4px #0009,inset 0 1px 1px #a9ada366;touch-action:none;cursor:ns-resize}.pedal-pointer{position:absolute;inset:-3px 15px -1px;border:1px solid #6a7066;border-radius:40% 40% 18% 18%;background:linear-gradient(90deg,#080b09,#687065 40%,#202820 58%,#0b0f0c);transform:rotate(var(--angle));transform-origin:50% 51%;clip-path:polygon(36% 0,64% 0,100% 90%,90% 100%,10% 100%,0 90%)}.pedal-pointer:after{content:'';position:absolute;top:4px;left:calc(50% - 1px);height:18px;width:2px;background:#c9c9b8}.pedal-control label{display:block;font-family:'Arial Narrow',Arial,sans-serif;font-weight:700;font-size:12px;letter-spacing:.4px;margin-bottom:7px}.pedal-readout{display:flex;align-items:baseline;justify-content:center;gap:2px;font-size:10px;color:#b1b9ad}.pedal-readout input{width:42px;background:#080d0a55;border:1px solid #c3d1b318;border-radius:3px;padding:3px 0;color:inherit;text-align:center;appearance:textfield;font-size:11px}.pedal-readout input::-webkit-inner-spin-button{appearance:none}.pedal-bottom{display:flex;align-items:center;justify-content:center;gap:46px;margin-top:23px}.pedal-toggle{position:relative;display:grid;place-items:center;width:44px;height:52px;border:0;background:transparent}.toggle-nut{position:relative;display:block;width:32px;height:32px;background:conic-gradient(#e5e9e3,#7e8984,#eef1e9,#5e6a63,#d9e0d8);clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}.toggle-nut:before{content:'';position:absolute;inset:5px;border:2px solid #a9b4aa;border-radius:50%;background:#0d1510}.toggle-lever{position:absolute;left:17px;top:23px;width:11px;height:26px;border:1px solid #8e9a8e;border-radius:5px;background:linear-gradient(90deg,#7c8d7f,#f0f5e6 45%,#899889);box-shadow:2px 4px 3px #0009;transform-origin:50% 2px;transform:none;transition:none}.pedal[data-on="false"] .toggle-lever{transform:none}.pedal-led{width:26px;height:26px;border-radius:50%;border:4px solid #aab4a7;background:radial-gradient(circle at 35% 30%,#ffdad2,#e34235 30%,#8b0e08 70%);box-shadow:0 0 0 1px #1b211c,0 0 12px #f349342c,inset 0 1px 2px #fffa}.pedal[data-on="false"] .pedal-led{background:radial-gradient(circle at 35% 30%,#8a5147,#421813 60%);box-shadow:0 0 0 1px #1b211c}.screw{position:absolute;width:9px;height:9px;border:1px solid #1c2420;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c2c9bb,#525f54 70%);box-shadow:0 1px 2px #000}.screw:after{content:'';position:absolute;top:3px;left:1px;right:1px;height:1px;background:#1b231c;transform:rotate(-35deg)}.screw:nth-of-type(1){top:1px;left:1px}.screw:nth-of-type(2){top:1px;right:1px}.screw:nth-of-type(3){bottom:1px;left:1px}.screw:nth-of-type(4){bottom:1px;right:1px}@media(max-width:760px){main{padding-top:30px}.intro{align-items:start}.preview-badge{font-size:9px;padding:7px 9px}.workbench{grid-template-columns:1fr}.pedal-stage{min-height:550px}aside{border-left:0;border-top:1px solid #ffffff13;padding:30px}.brand span{display:none}.effect-copy{max-width:none}}@media(prefers-reduced-motion:reduce){.toggle-lever{transition:none}} .workbench+.workbench{margin-top:28px} .pedal[data-effect="tube-od"]{width:300px;aspect-ratio:2/3;padding:0;border:0;border-radius:0;background:url('assets/pedals/tube-od/background-ts9-printed-v1.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#142017} .pedal[data-effect="tube-od"] .pedal-face{padding:0;border:0;border-radius:0;background:none;box-shadow:none} .pedal[data-effect="tube-od"] .pedal-title{position:absolute;top:49%;left:18%;width:64%;height:15%;display:grid;place-items:center;margin:0;font-family:Arial,sans-serif;font-weight:800;font-style:italic;font-size:29px;letter-spacing:-1px;color:#1d6183;text-shadow:0 1px #f6ecd099;pointer-events:none} .pedal[data-effect="tube-od"] .pedal-controls{display:contents} .pedal[data-effect="tube-od"] .pedal-control{position:absolute;width:31%;top:5.8%} .pedal[data-effect="tube-od"] .pedal-control:nth-child(1){left:10.5%} .pedal[data-effect="tube-od"] .pedal-control:nth-child(3){right:10.5%} .pedal[data-effect="tube-od"] .pedal-control:nth-child(2){left:34.5%;top:18.5%} .pedal[data-effect="tube-od"] .pedal-control:nth-child(2) label{position:absolute;top:-16px;left:0;right:0} .pedal[data-effect="tube-od"] .pedal-dial{width:76px;height:76px;margin-bottom:4px;border:0;background:repeating-conic-gradient(#171c13 0deg 13deg,transparent 13deg 25deg)} .pedal[data-effect="tube-od"] .pedal-dial:before{inset:8px;background:#333329;border:1px solid #887e5c} .pedal[data-effect="tube-od"] .pedal-knob{width:61px;height:61px;border:3px solid #1e2117;background:repeating-conic-gradient(#171b12 0deg 11deg,#34382b 12deg 20deg);box-shadow:0 4px 4px #0009,inset 0 1px 1px #ddd8b866} .pedal[data-effect="tube-od"] .pedal-pointer{inset:5px;clip-path:none;border-radius:50%;border:1px solid #9b977f;background:repeating-radial-gradient(circle at center,#e0d8b5 0 .5px,#a8a58d 1px,#d5ccb0 2px);box-shadow:inset 0 1px 4px #fff6;transform-origin:center} .pedal[data-effect="tube-od"] .pedal-pointer:after{width:5px;height:17px;top:-5px;left:calc(50% - 2.5px);border-radius:2px;background:#1d2416;box-shadow:0 0 1px #e3dbb1} .pedal[data-effect="tube-od"] .pedal-control label{font-size:11px;margin-bottom:2px} .pedal[data-effect="tube-od"] .pedal-readout{color:#142017;font-weight:bold} .pedal[data-effect="tube-od"] .pedal-readout input{color:#142017;background:#eee8c864;border-color:#152d2229} .pedal[data-effect="tube-od"] .pedal-bottom{display:contents} .pedal[data-effect="tube-od"] .pedal-led{position:absolute;top:4.3%;left:calc(50% - 10px);width:20px;height:20px;border:3px solid #61543a} .pedal[data-effect="tube-od"] .tube-footswitch{position:absolute;left:18%;top:66%;width:64%;height:25%;border:0;border-radius:8px;background:transparent;cursor:pointer} .pedal[data-effect="tube-od"] .tube-footswitch:hover{background:#fff1} .pedal[data-effect="tube-od"] .tube-footswitch:active{background:#0002;box-shadow:inset 0 3px 6px #0004} .pedal-nav{display:flex;gap:10px;margin:0 0 22px}.pedal-nav a{border:1px solid #ffffff25;border-radius:5px;padding:9px 14px;font-size:11px;color:#c1cbc3}.pedal-nav a:hover{background:#ffffff0a}.workbench{scroll-margin-top:24px} .pedal[data-effect="tube-od"] .pedal-face{clip-path:none} .pedal[data-effect="tube-od"]{clip-path:polygon(12% .4%,88% .4%,91% 1%,92.5% 3%,92.5% 41%,96% 41%,96% 42.5%,99.7% 43%,99.7% 49.5%,96% 50%,93% 50%,92.5% 96.5%,91% 98.5%,88% 99.7%,12% 99.7%,9% 98.5%,7.5% 96.5%,7% 50%,4% 50%,.3% 49.5%,.3% 43%,4% 42.5%,4% 41%,7.5% 41%,7.5% 3%,9% 1%)} /* Real Uni-Vibe reference: wide zinc enclosure and worn charcoal faceplate. */ .pedal-mount{max-width:100%} .pedal[data-effect="u-vibe"]{container-type:inline-size;width:480px;aspect-ratio:1.4;padding:0;border:0;border-radius:7px;background:url('assets/pedals/u-vibe/background-printed-v2.png') center/100% 100% no-repeat;box-shadow:0 20px 20px -10px #000c;color:#d8d5bb} .pedal[data-effect="u-vibe"] .pedal-face{padding:0;border:0;border-radius:0;background:none;box-shadow:none} .pedal[data-effect="u-vibe"] .screw{display:none} .pedal[data-effect="u-vibe"] .pedal-title{position:absolute;top:6%;left:10%;width:80%;height:20%;display:grid;place-items:center;margin:0;font-size:7cqw;letter-spacing:-.2cqw;color:#e0dfc9;text-shadow:0 1px 1px #222a;transform:skew(-8deg)} .pedal[data-effect="u-vibe"] .pedal-controls{display:contents} .pedal[data-effect="u-vibe"] .pedal-control{position:absolute;width:23%;top:32%} .pedal[data-effect="u-vibe"] .pedal-control:nth-child(1){left:8.5%} .pedal[data-effect="u-vibe"] .pedal-control:nth-child(2){left:34.5%} .pedal[data-effect="u-vibe"] .pedal-control:nth-child(3){left:60.5%} .pedal[data-effect="u-vibe"] .pedal-dial{width:20cqw;height:20cqw;margin-bottom:1cqw;border:1px solid #c1bda180;background:none} .pedal[data-effect="u-vibe"] .pedal-dial:before{inset:5%;border:1px solid #c1bda1a0;background:none;box-shadow:inset 0 0 0 2px #101613,0 0 0 1px #232821} .pedal[data-effect="u-vibe"] .pedal-control label{font-size:2.8cqw;letter-spacing:.1cqw;margin-bottom:1cqw;text-shadow:0 1px #000} .pedal[data-effect="u-vibe"] .pedal-readout{font-size:2.2cqw;color:#d0cfb8} .pedal[data-effect="u-vibe"] .pedal-readout input{width:9cqw;font-size:2.5cqw;background:#0b111066;border-color:#d8d5bb26;padding:.4cqw 0} .pedal[data-effect="u-vibe"] .pedal-knob{width:84%;height:84%;border:0;background:none;box-shadow:none} .pedal[data-effect="u-vibe"] .pedal-pointer{inset:0;border:0;border-radius:0;background:url('assets/pedals/u-vibe/knob.png') center/contain no-repeat;clip-path:none;box-shadow:none;transform-origin:center;filter:drop-shadow(1px 3px 2px #0009)} .pedal[data-effect="u-vibe"] .pedal-pointer:after{display:none} .pedal[data-effect="u-vibe"] .pedal-bottom{display:contents} .pedal[data-effect="u-vibe"] .pedal-toggle{position:absolute;top:71%;left:75%;width:12%;height:19%} .pedal[data-effect="u-vibe"] .toggle-nut{width:7cqw;height:7cqw;background:conic-gradient(#d4d5bc,#626d5f,#eeefd4,#5f6758,#c2c7af)} .pedal[data-effect="u-vibe"] .toggle-lever{width:2.5cqw;height:6cqw;left:calc(50% - 1.25cqw);top:50%;border-color:#8e9380;background:linear-gradient(90deg,#646f60,#e1e5c9 45%,#7c8774)} .pedal[data-effect="u-vibe"] .pedal-led{position:absolute;top:43%;left:86%;width:8cqw;height:8cqw;border:1.2cqw solid #282b22;box-shadow:0 0 0 1px #7c8069,inset 0 1px 2px #fff9;background:radial-gradient(circle at 35% 25%,#f7b0a0,#d02015 32%,#790900 75%)} .pedal[data-effect="u-vibe"][data-on="false"] .pedal-led{background:radial-gradient(circle at 35% 25%,#785348,#3d1b14 70%)} .pedal[data-effect="u-vibe"] .pedal-control{top:28%} .pedal[data-effect="u-vibe"] .pedal-led{top:33.5%;left:86.5%} .pedal[data-effect="u-vibe"] .pedal-toggle{top:57%;left:84%} /* Toggle artwork and states are defined in pedal-hardware.css. */ .pedal[data-effect="u-vibe"] .toggle-nut,.pedal[data-effect="u-vibe"] .toggle-lever{display:none} /* Chorus: reference-inspired silver enclosure; lettering and controls stay live. */ .pedal-nav{flex-wrap:wrap} .pedal[data-effect="chorus"]{container-type:inline-size;width:310px;aspect-ratio:3/5;padding:0;border:0;border-radius:0;background:url('assets/pedals/chorus/background-vox-printed-v2.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 10px #0009);color:#24252a} .pedal[data-effect="chorus"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="chorus"] .pedal-title{position:absolute;top:47%;left:18%;width:64%;margin:0;font:normal 9cqw Georgia,serif;letter-spacing:.2cqw;text-shadow:none} .pedal[data-effect="chorus"] .chorus-model{position:absolute;top:54%;right:20%;font:700 2.6cqw Arial,sans-serif;color:#595b61} .pedal[data-effect="chorus"] .pedal-controls{display:contents} .pedal[data-effect="chorus"] .pedal-control{position:absolute;top:11%;width:18%} .pedal[data-effect="chorus"] .pedal-control:nth-child(1){left:11%} .pedal[data-effect="chorus"] .pedal-control:nth-child(2){left:31%} .pedal[data-effect="chorus"] .pedal-control:nth-child(3){left:51%} .pedal[data-effect="chorus"] .pedal-control:nth-child(4){left:71%} .pedal[data-effect="chorus"] .pedal-dial{width:15.5cqw;height:15.5cqw;margin:0 auto 2cqw;border:0;background:none} .pedal[data-effect="chorus"] .pedal-dial:before{display:none} .pedal[data-effect="chorus"] .pedal-knob{width:100%;height:100%;border:0;background:none;box-shadow:none} .pedal[data-effect="chorus"] .pedal-pointer{inset:0;clip-path:none;border:0;border-radius:0;background:url('assets/pedals/chorus/knob.png') center/contain no-repeat;transform-origin:center;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="chorus"] .pedal-pointer:after{display:none} .pedal[data-effect="chorus"] .pedal-control label{font:700 3.2cqw 'Arial Narrow',Arial,sans-serif;margin-bottom:1cqw} .pedal[data-effect="chorus"] .pedal-readout{color:#34353a;font-size:2.6cqw} .pedal[data-effect="chorus"] .pedal-readout input{width:12cqw;font-size:3cqw;background:#ffffff30;border-color:#292c3b30;color:inherit} .pedal[data-effect="chorus"] .pedal-bottom{display:contents} .pedal[data-effect="chorus"] .pedal-led{position:absolute;top:5%;left:46%;width:8cqw;height:8cqw} .pedal[data-effect="chorus"] .chorus-footswitch{position:absolute;top:69%;left:34%;width:32%;height:17%;border:1px solid #bcbcb7;border-radius:3px;background:linear-gradient(135deg,#e9e5dd,#a4a29c 48%,#d2cec5);box-shadow:0 3px 4px #0007,inset 0 0 0 3px #b9b7b0,inset 0 0 0 4px #e2dfd6} .pedal[data-effect="chorus"] .chorus-footswitch:active{box-shadow:0 1px 2px #0007,inset 0 0 0 3px #b9b7b0;transform:translateY(1px)} .pedal[data-effect="chorus"] .chorus-brand{position:absolute;bottom:5%;left:24%;width:52%;text-align:center;font:bold italic 9cqw Georgia,serif;letter-spacing:-.6cqw} .pedal[data-effect="chorus"] .chorus-input,.pedal[data-effect="chorus"] .chorus-output{position:absolute;top:54%;font:normal 3cqw Arial,sans-serif;writing-mode:vertical-rl;letter-spacing:.3cqw} .pedal[data-effect="chorus"] .chorus-input{right:12%}.pedal[data-effect="chorus"] .chorus-output{left:12%} .pedal[data-effect="chorus"] .chorus-footswitch{background:linear-gradient(135deg,#e4d39c,#b29a62 48%,#d5bd87);border-color:#b4a26b;box-shadow:0 3px 4px #0007,inset 0 0 0 3px #b6a06d,inset 0 0 0 4px #e2d3a0} .pedal[data-effect="chorus"] .chorus-footswitch{border:0;border-radius:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 3px 2px #0006)} .pedal[data-effect="chorus"] .chorus-footswitch:active{box-shadow:none;filter:drop-shadow(0 1px 1px #0006)} /* Flanger: gunmetal MXR-inspired chassis with four primary controls and a mix trim. */ .pedal[data-effect="flanger"]{container-type:inline-size;width:470px;aspect-ratio:1.4;padding:0;border:0;border-radius:0;background:url('assets/pedals/flanger/background-centre-v1.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#eee8ce} .pedal[data-effect="flanger"] .pedal-face{padding:0;border:0;border-radius:0;background:none;box-shadow:none} .pedal[data-effect="flanger"] .pedal-controls{display:contents} .pedal[data-effect="flanger"] .pedal-control{position:absolute;top:13%;width:19%} .pedal[data-effect="flanger"] .pedal-control:nth-child(1){left:51.8%} .pedal[data-effect="flanger"] .pedal-control:nth-child(3){left:29.8%} .pedal[data-effect="flanger"] .pedal-control:nth-child(4){left:7.8%} .pedal[data-effect="flanger"] .pedal-control:nth-child(2){left:73.8%} .pedal[data-effect="flanger"] .pedal-dial{width:14cqw;height:14cqw;margin:0 auto 1cqw;border:0;background:none} .pedal[data-effect="flanger"] .pedal-dial:before{display:none} .pedal[data-effect="flanger"] .pedal-knob{width:100%;height:100%;border:0;background:none;box-shadow:none} .pedal[data-effect="flanger"] .pedal-pointer{inset:0;border:0;border-radius:0;background:url('assets/pedals/chorus/knob.png') center/contain no-repeat;clip-path:none;box-shadow:none;transform-origin:center;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="flanger"] .pedal-pointer:after{display:none} .pedal[data-effect="flanger"] .pedal-control label{font-size:2.5cqw;letter-spacing:0;margin:0 0 1cqw} .pedal[data-effect="flanger"] .pedal-readout{font-size:2.1cqw;color:#eee8ce} .pedal[data-effect="flanger"] .pedal-readout input{width:10cqw;font-size:2.4cqw;padding:.4cqw 0;background:#f2fbff33;border-color:#eee8ce30;color:inherit} .pedal[data-effect="flanger"] .pedal-control:nth-child(5){top:51%;left:72.525606469%;width:16%} .pedal[data-effect="flanger"] .pedal-control:nth-child(5) .pedal-dial{width:9cqw;height:9cqw} .pedal[data-effect="flanger"] .flanger-brand{position:absolute;top:66%;left:9%;width:30%;text-align:center;font:900 8cqw Arial,sans-serif;letter-spacing:-.4cqw;color:#eee8ce;line-height:1.1;border:1cqw solid #eee8ce;border-radius:4cqw;padding:.5cqw} .pedal[data-effect="flanger"] .pedal-title{position:absolute;top:78%;left:65%;width:25%;margin:0;font:normal 4.4cqw Arial,sans-serif;text-transform:lowercase;letter-spacing:-.2cqw;color:#eee8ce;text-shadow:none} .pedal[data-effect="flanger"] .pedal-bottom{display:contents} .pedal[data-effect="flanger"] .pedal-led{position:absolute;top:46%;left:48%;width:6cqw;height:6cqw} .pedal[data-effect="flanger"] .flanger-footswitch{position:absolute;top:65%;left:45%;width:12cqw;height:12cqw;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0006)} .pedal[data-effect="flanger"] .flanger-footswitch:active{transform:translateY(1px);filter:drop-shadow(0 1px 1px #0006)} @media(max-width:760px){.pedal[data-effect="flanger"]{width:470px;max-width:100%}[data-effect="flanger"] .pedal-stage{min-height:440px}} .workbench[data-effect="flanger"] .pedal-mount{width:470px;max-width:100%;min-width:0} .pedal[data-effect="flanger"]{width:100%;max-width:100%} .workbench[data-effect="flanger"] .pedal-mount{width:min(470px,calc(100vw - 100px));max-width:100%;flex-shrink:0} /* Twin-inspired tremolo: overhead enclosure and stationary cap lighting. */ .workbench[data-effect="tremolo"] .pedal-mount{width:min(450px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="tremolo"]{container-type:inline-size;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:0;background:url('assets/pedals/tremolo/background-printed-v1.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#e7ddc6} .pedal[data-effect="tremolo"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="tremolo"] .pedal-controls{display:contents} .pedal[data-effect="tremolo"] .pedal-control{position:absolute;top:10%;width:26%} .pedal[data-effect="tremolo"] .pedal-control:nth-child(1){left:9%} .pedal[data-effect="tremolo"] .pedal-control:nth-child(3){left:37%} .pedal[data-effect="tremolo"] .pedal-control:nth-child(2){left:65%} .pedal[data-effect="tremolo"] .pedal-dial{width:24cqw;height:24cqw;margin:0 auto 1cqw;border:0;background:none} .pedal[data-effect="tremolo"] .pedal-dial:before{display:none} .pedal[data-effect="tremolo"] .tremolo-scale{position:absolute;inset:0;pointer-events:none} .tremolo-scale span{position:absolute;transform:translate(-50%,-50%);font:2.4cqw Georgia,serif;color:#d9cfb6} .pedal[data-effect="tremolo"] .pedal-knob{width:76%;height:76%;padding:0;border:0;background:transparent url('assets/pedals/tremolo/knob.png') center/contain no-repeat;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="tremolo"] .pedal-pointer{inset:0;border:0;clip-path:none;border-radius:0;background:none;box-shadow:none;transform-origin:50% 50%} .pedal[data-effect="tremolo"] .pedal-pointer:after{display:block;position:absolute;top:22%;left:calc(50% - .5cqw);height:25%;width:1cqw;border-radius:.2cqw;background:#171916;box-shadow:0 0 .2cqw #fff8} .pedal[data-effect="tremolo"] .pedal-control label{font-size:3cqw;letter-spacing:.1cqw;margin:0 0 .7cqw} .pedal[data-effect="tremolo"] .pedal-readout{color:#d5cbb6;font-size:2.2cqw} .pedal[data-effect="tremolo"] .pedal-readout input{width:11cqw;font-size:2.5cqw;padding:.3cqw 0;background:#0004;border-color:#e7ddc626;color:inherit} .pedal[data-effect="tremolo"] .pedal-title{position:absolute;top:58%;left:61%;width:28%;margin:0;font:bold italic 7cqw Georgia,serif;line-height:.95;letter-spacing:-.3cqw;transform:rotate(-8deg);text-shadow:1px 2px 2px #0009} .pedal[data-effect="tremolo"] .pedal-bottom{display:contents} .pedal[data-effect="tremolo"] .pedal-led{position:absolute;top:55%;left:44%;width:12%;height:12%;filter:hue-rotate(28deg) saturate(.9)} .pedal[data-effect="tremolo"] .tremolo-footswitch{position:absolute;top:71%;left:40%;width:20%;height:20%;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="tremolo"] .tremolo-footswitch:active{transform:translateY(1px)} @media(max-width:760px){.workbench[data-effect="tremolo"] .pedal-stage{min-height:440px}} /* Perspective correction: calibrated overhead Uni-Vibe pointer, fixed shadow. */ .pedal[data-effect="u-vibe"] .pedal-knob{filter:drop-shadow(1px 3px 2px #0009)} .pedal[data-effect="u-vibe"] .pedal-pointer{background-image:url('assets/theme/shared/knobs/black-pointer.png');transform:translate(.079962%,-1.68388%) rotate(var(--angle)) scaleX(1.009366);transform-origin:49.920038% 51.68388%;filter:none} /* Round black knobs use fixed photographic bodies and independent index lines. */ .pedal[data-effect="chorus"] .pedal-knob,.pedal[data-effect="flanger"] .pedal-knob{background:transparent url('assets/pedals/shared/flat-black-knob.png') center/contain no-repeat;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="chorus"] .pedal-pointer,.pedal[data-effect="flanger"] .pedal-pointer{background:none;filter:none;transform:rotate(var(--angle));transform-origin:50% 50%} .pedal[data-effect="chorus"] .pedal-pointer:after,.pedal[data-effect="flanger"] .pedal-pointer:after{display:block;position:absolute;top:13%;left:calc(50% - .4cqw);width:.8cqw;height:23%;border:0;border-radius:.15cqw;background:#e0d9b7;box-shadow:none} .workbench[data-effect="u-vibe"] .pedal-mount{width:min(480px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .workbench[data-effect="chorus"] .pedal-mount{width:min(310px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="u-vibe"],.pedal[data-effect="chorus"]{width:100%;max-width:100%} /* Rotary: reference-style main Depth/Speed knobs, smaller ToneLab Time trim. */ .workbench[data-effect="rotary"] .pedal-mount{width:min(350px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="rotary"]{container-type:inline-size;width:100%;aspect-ratio:.8;padding:0;border:0;border-radius:0;background:url('assets/pedals/rotary/background-printed-v2.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#d3c29b} .pedal[data-effect="rotary"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="rotary"] .pedal-controls{display:contents} .pedal[data-effect="rotary"] .pedal-control{position:absolute;top:12%;width:32%} .pedal[data-effect="rotary"] .pedal-control:nth-child(3){left:12%} .pedal[data-effect="rotary"] .pedal-control:nth-child(1){left:56%} .pedal[data-effect="rotary"] .pedal-dial{width:28cqw;height:28cqw;margin:0 auto 2cqw;border:0;background:repeating-conic-gradient(from 225deg,#b7a77c 0 2deg,transparent 2deg 27deg);mask-image:conic-gradient(from 225deg,#000 0 271deg,transparent 271deg);border-radius:50%} .pedal[data-effect="rotary"] .pedal-dial:before{inset:5%;border:0;background:#19211b;box-shadow:none} .pedal[data-effect="rotary"] .pedal-knob{width:93%;height:93%;padding:0;border:0;background:transparent url('assets/pedals/shared/flat-black-knob.png') center/contain no-repeat;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="rotary"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:none;box-shadow:none;filter:none;transform-origin:50% 50%} .pedal[data-effect="rotary"] .pedal-pointer:after{display:block;position:absolute;top:13%;left:calc(50% - .45cqw);width:.9cqw;height:23%;border:0;border-radius:.15cqw;background:#ddd4b6;box-shadow:none} .pedal[data-effect="rotary"] .pedal-control label{font-size:4cqw;letter-spacing:.05cqw;margin:0 0 1cqw} .pedal[data-effect="rotary"] .pedal-readout{color:#d3c29b;font-size:2.6cqw} .pedal[data-effect="rotary"] .pedal-readout input{width:13cqw;font-size:3cqw;padding:.5cqw 0;background:#0004;border-color:#d3c29b26;color:inherit} .pedal[data-effect="rotary"] .pedal-control:nth-child(2){top:61%;left:64%;width:22%} .pedal[data-effect="rotary"] .pedal-control:nth-child(2) .pedal-dial{width:16cqw;height:16cqw} .pedal[data-effect="rotary"] .pedal-control:nth-child(2) label{font-size:3cqw} .pedal[data-effect="rotary"] .pedal-title{position:absolute;top:46%;left:12%;width:76%;margin:0;padding:1cqw 0;border-block:1px solid #cbbb8b;font:900 10cqw Arial,sans-serif;text-transform:uppercase;letter-spacing:-.3cqw;text-shadow:1px 1px #0006} .pedal[data-effect="rotary"] .pedal-bottom{display:contents} .pedal[data-effect="rotary"] .pedal-led{position:absolute;top:36%;left:45%;width:10%;height:8%} .pedal[data-effect="rotary"] .rotary-footswitch{position:absolute;top:75%;left:38%;width:24%;height:20%;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="rotary"] .rotary-footswitch:active{transform:translateY(1px)} .pedal[data-effect="rotary"] .pedal-dial{background:none;mask-image:none} .pedal[data-effect="rotary"] .pedal-dial:before{inset:0;background:repeating-conic-gradient(from 225deg,#b7a77c 0 2deg,transparent 2deg 27deg);mask-image:radial-gradient(circle,transparent 62%,#000 63%)} /* Super Comp: flat scalloped bodies, triangular controls, independent pointers. */ .workbench[data-effect="comp"] .pedal-mount{width:min(290px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="comp"]{container-type:inline-size;width:100%;aspect-ratio:.56;padding:0;border:0;border-radius:0;background:url('assets/pedals/comp/background-printed-v2.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#eeeede} .pedal[data-effect="comp"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="comp"] .pedal-controls{display:contents} .pedal[data-effect="comp"] .pedal-control{position:absolute;width:38%;top:25%} .pedal[data-effect="comp"] .pedal-control:nth-child(2){left:31%;top:5%} .pedal[data-effect="comp"] .pedal-control:nth-child(3){left:8%} .pedal[data-effect="comp"] .pedal-control:nth-child(1){left:54%} .pedal[data-effect="comp"] .pedal-dial{width:32cqw;height:32cqw;margin:0 auto 1cqw;border:0;background:none} .pedal[data-effect="comp"] .pedal-dial:before{inset:auto;top:-.6cqw;left:calc(50% - .7cqw);width:1.4cqw;height:1.4cqw;border:0;border-radius:50%;background:#eeeddb;box-shadow:none} .pedal[data-effect="comp"] .pedal-knob{width:100%;height:100%;padding:0;border:0;background:transparent url('assets/pedals/comp/knob.png') center/contain no-repeat;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="comp"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:none;box-shadow:none;filter:none;transform-origin:50% 50%} .pedal[data-effect="comp"] .pedal-pointer:after{display:block;position:absolute;top:14%;left:calc(50% - .65cqw);width:1.3cqw;height:22%;border:0;border-radius:.5cqw;background:#f1f0db;box-shadow:none} .pedal[data-effect="comp"] .pedal-control label{font:bold 3.5cqw Arial,sans-serif;letter-spacing:0;margin:0 0 1cqw;white-space:nowrap} .pedal[data-effect="comp"] .pedal-readout{color:#e9e8dc;font-size:2.7cqw} .pedal[data-effect="comp"] .pedal-readout input{width:14cqw;font-size:3cqw;padding:.4cqw 0;background:#0004;border-color:#eeedde30;color:inherit} .pedal[data-effect="comp"] .comp-brand{position:absolute;top:50%;left:25%;width:50%;text-align:center;font:900 12cqw Arial,sans-serif;letter-spacing:-.5cqw;line-height:1.15;border:1.5cqw solid #eeeede;border-radius:5cqw;padding:.7cqw} .pedal[data-effect="comp"] .pedal-title{position:absolute;top:87%;left:12%;width:76%;margin:0;font:900 12cqw Arial,sans-serif;line-height:.95;text-transform:uppercase;letter-spacing:-.2cqw;text-shadow:none} .pedal[data-effect="comp"] .pedal-bottom{display:contents} .pedal[data-effect="comp"] .pedal-led{position:absolute;top:65%;left:43%;width:14%;height:8%} .pedal[data-effect="comp"] .comp-footswitch{position:absolute;top:74%;left:35%;width:30%;height:17%;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="comp"] .comp-footswitch:active{transform:translateY(1px)} .pedal[data-effect="comp"] .pedal-title span{display:block;font-size:4cqw;letter-spacing:2.5cqw;margin:0 0 1.2cqw 2.5cqw} .pedal[data-effect="comp"] .comp-footswitch{top:73%;height:14%} .pedal[data-effect="comp"]{background-size:125% 112%} /* Phase 90 inspired: primary Speed plus three ToneLab trims. */ .workbench[data-effect="phaser"] .pedal-mount{width:min(290px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="phaser"]{container-type:inline-size;width:100%;aspect-ratio:.57;padding:0;border:0;border-radius:0;background:url('assets/pedals/phaser/background-centre-v1.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#222016} .pedal[data-effect="phaser"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="phaser"] .pedal-controls{display:contents} .pedal[data-effect="phaser"] .pedal-control{position:absolute;top:34%;width:26%} .pedal[data-effect="phaser"] .pedal-control:nth-child(1){top:7%;left:25%;width:50%} .pedal[data-effect="phaser"] .pedal-control:nth-child(2){left:9%} .pedal[data-effect="phaser"] .pedal-control:nth-child(3){left:37%} .pedal[data-effect="phaser"] .pedal-control:nth-child(4){left:65%} .pedal[data-effect="phaser"] .pedal-dial{width:21cqw;height:21cqw;margin:0 auto 1cqw;border:0;background:none} .pedal[data-effect="phaser"] .pedal-control:nth-child(1) .pedal-dial{width:37cqw;height:37cqw} .pedal[data-effect="phaser"] .pedal-dial:before{inset:auto;top:-1cqw;left:calc(50% - .6cqw);width:1.2cqw;height:1.2cqw;border:0;border-radius:50%;background:#28231a;box-shadow:none} .pedal[data-effect="phaser"] .pedal-knob{width:100%;height:100%;padding:0;border:0;background:transparent url('assets/pedals/comp/knob.png') center/contain no-repeat;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="phaser"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:none;box-shadow:none;filter:none;transform-origin:50% 50%} .pedal[data-effect="phaser"] .pedal-pointer:after{display:block;position:absolute;top:14%;left:calc(50% - .5cqw);width:1cqw;height:22%;border:0;border-radius:.3cqw;background:#ece6c8;box-shadow:none} .pedal[data-effect="phaser"] .pedal-control label{font:bold 2.8cqw Arial,sans-serif;letter-spacing:0;margin:0 0 1cqw;white-space:nowrap} .pedal[data-effect="phaser"] .pedal-control:nth-child(1) label{font-size:4cqw} .pedal[data-effect="phaser"] .pedal-readout{color:#2e271b;font-size:2.5cqw} .pedal[data-effect="phaser"] .pedal-readout input{width:13cqw;font-size:3cqw;padding:.4cqw 0;background:#fff2;border-color:#28231a30;color:inherit} .pedal[data-effect="phaser"] .phaser-brand{position:absolute;top:55%;left:20%;width:60%;text-align:center;font:bold italic 16cqw 'Brush Script MT',Georgia,serif;letter-spacing:-1cqw;transform:rotate(-8deg);line-height:1;color:#211e17} .pedal[data-effect="phaser"] .pedal-title{position:absolute;top:88%;left:10%;width:80%;margin:0;font:italic 10cqw 'Brush Script MT',Georgia,serif;letter-spacing:-.4cqw;color:#211e17;text-shadow:none} .pedal[data-effect="phaser"] .pedal-bottom{display:contents} .pedal[data-effect="phaser"] .pedal-led{position:absolute;top:67%;left:44%;width:12%;height:7%} .pedal[data-effect="phaser"] .phaser-footswitch{position:absolute;top:75%;left:35%;width:30%;height:16%;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="phaser"] .phaser-footswitch:active{transform:translateY(1px)} /* Knob editing keeps its normal appearance. */ .pedal-knob:focus,.pedal-knob:focus-visible{outline:none} /* Whole overhead knob rotates with its index; the button's shadow stays fixed. */ .pedal:is([data-effect="chorus"],[data-effect="flanger"],[data-effect="tremolo"],[data-effect="rotary"],[data-effect="comp"],[data-effect="phaser"]) .pedal-knob{background:none} .pedal:is([data-effect="chorus"],[data-effect="flanger"],[data-effect="rotary"]) .pedal-pointer{background:transparent url('assets/pedals/shared/flat-black-knob.png') center/contain no-repeat} .pedal:is([data-effect="comp"],[data-effect="phaser"]) .pedal-pointer{background:transparent url('assets/pedals/comp/knob.png') center/contain no-repeat} .pedal[data-effect="tremolo"] .pedal-pointer{background:transparent url('assets/pedals/tremolo/knob.png') center/contain no-repeat} /* Acoustic Sim: calibrated flat gold knobs rotate as complete hardware. */ .workbench[data-effect="acoustic"] .pedal-mount{width:min(470px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="acoustic"]{container-type:inline-size;width:100%;aspect-ratio:1.4;padding:0;border:0;border-radius:0;background:url('assets/pedals/acoustic/background.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#282316} .pedal[data-effect="acoustic"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="acoustic"] .pedal-controls{display:contents} .pedal[data-effect="acoustic"] .pedal-control{position:absolute;top:9%;width:25%} .pedal[data-effect="acoustic"] .pedal-control:nth-child(2){left:9%} .pedal[data-effect="acoustic"] .pedal-control:nth-child(1){left:37.5%} .pedal[data-effect="acoustic"] .pedal-control:nth-child(3){left:66%} .pedal[data-effect="acoustic"] .pedal-dial{width:21cqw;height:21cqw;margin:0 auto .8cqw;border:0;background:none} .pedal[data-effect="acoustic"] .pedal-dial:before{inset:auto;top:0;left:calc(50% - .3cqw);width:.6cqw;height:.6cqw;border:0;border-radius:50%;background:#282316;box-shadow:none} .pedal[data-effect="acoustic"] .pedal-knob{width:82%;height:82%;top:1.7cqw;padding:0;border:0;background:none;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="acoustic"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:transparent url('assets/pedals/acoustic/knob-worn-v2.png') center/contain no-repeat;box-shadow:none;filter:none;transform:translate(0.11535269%,-0.09380417%) rotate(var(--angle)) scaleX(1.00010450);transform-origin:49.88464731% 50.09380417%} .pedal[data-effect="acoustic"] .pedal-pointer:after{display:none} .pedal[data-effect="acoustic"] .pedal-control label{font:bold 3cqw Arial,sans-serif;letter-spacing:.1cqw;margin:0 0 .8cqw} .pedal[data-effect="acoustic"] .pedal-readout{color:#282316;font-size:2.4cqw} .pedal[data-effect="acoustic"] .pedal-readout input{width:10cqw;font-size:2.7cqw;padding:.4cqw 0;background:#fff2;border-color:#28231630;color:inherit} .pedal[data-effect="acoustic"] .pedal-title{position:absolute;top:52%;left:10%;width:80%;margin:0;font:bold italic 9cqw Georgia,serif;letter-spacing:-.5cqw;color:#282316;text-shadow:none;border-bottom:.7cqw solid #282316;text-align:left;line-height:1.05} .pedal[data-effect="acoustic"] .pedal-bottom{display:contents} .pedal[data-effect="acoustic"] .pedal-led{position:absolute;top:68%;left:46%;width:8%;height:11.2%} .pedal[data-effect="acoustic"] .acoustic-footswitch{position:absolute;top:80%;left:43%;width:14%;height:19.6%;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="acoustic"] .acoustic-footswitch:active{transform:translateY(1px)} .pedal[data-effect="acoustic"] .pedal-title{top:48%;font-size:7cqw;line-height:1;border-bottom:.5cqw solid #282316} .pedal[data-effect="acoustic"] .pedal-led{top:62%} .pedal[data-effect="acoustic"] .acoustic-footswitch{top:74%;height:16%} .pedal[data-effect="acoustic"] .pedal-control{top:5%} /* Fuzz Ace: circular Arbiter-inspired silver shell and black ribbed tread. */ .workbench[data-effect="fuzz"] .pedal-mount{width:min(440px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="fuzz"]{container-type:inline-size;width:100%;aspect-ratio:1292/1218;padding:0;border:0;border-radius:0;background:url('assets/pedals/fuzz/background-printed-v4.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#24261f} .pedal[data-effect="fuzz"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="fuzz"] .pedal-controls{display:contents} .pedal[data-effect="fuzz"] .pedal-control{position:absolute;top:30%;width:26%} .pedal[data-effect="fuzz"] .pedal-control:nth-child(3){left:11.6%} .pedal[data-effect="fuzz"] .pedal-control:nth-child(1){left:63.2%} .pedal[data-effect="fuzz"] .pedal-control:nth-child(2){top:24.5%;left:41.5%;width:17%} .pedal[data-effect="fuzz"] .pedal-dial{width:18.5cqw;height:18.5cqw;margin:0 auto 1cqw;border:0;background:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="fuzz"] .pedal-control:nth-child(2) .pedal-dial{width:12.5cqw;height:12.5cqw} .pedal[data-effect="fuzz"] .pedal-dial:before{display:none} .pedal[data-effect="fuzz"] .pedal-knob{width:100%;height:100%;padding:0;border:0;border-radius:50%;clip-path:circle(50%);overflow:hidden;background:none;box-shadow:none;filter:none} .pedal[data-effect="fuzz"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:#10100f;box-shadow:none;filter:none;transform-origin:50% 50%} .pedal[data-effect="fuzz"] .pedal-pointer:before{content:"";position:absolute;left:50%;top:50%;width:135.714286%;height:135.714286%;background:url('assets/pedals/fuzz/knob-vintage-v2.png') center/contain no-repeat;transform-origin:50.079745% 48.883573%;transform:translate(-50.079745%,-48.883573%)} .pedal[data-effect="fuzz"] .pedal-pointer:after{display:none} .pedal[data-effect="fuzz"] .pedal-control label{font:bold 3cqw Arial,sans-serif;letter-spacing:0;margin:0 0 .7cqw} .pedal[data-effect="fuzz"] .pedal-control:nth-child(2) label{font-size:2.5cqw} .pedal[data-effect="fuzz"] .pedal-readout{color:#24261f;font-size:2.3cqw} .pedal[data-effect="fuzz"] .pedal-readout input{width:10cqw;font-size:2.7cqw;line-height:1;padding:.2cqw 0;background:#fff3;border-color:#24261f30;color:inherit} .pedal[data-effect="fuzz"] .pedal-title{position:absolute;top:9%;left:22%;width:56%;margin:0;font:italic 9cqw 'Brush Script MT',Georgia,serif;letter-spacing:-.3cqw;color:#24261f;text-shadow:none} .pedal[data-effect="fuzz"] .pedal-bottom{display:contents} .pedal[data-effect="fuzz"] .pedal-led{position:absolute;top:60%;left:22.1%;width:5cqw;height:5cqw} .pedal[data-effect="fuzz"] .fuzz-footswitch{position:absolute;top:72.5%;left:43.5%;width:13cqw;height:13cqw;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="fuzz"] .fuzz-footswitch:active{transform:translateY(1px)} /* FAT OD: printed lettering is part of the enclosure artwork. */ .workbench[data-effect="fat-od"] .pedal-mount{width:min(410px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="fat-od"]{container-type:inline-size;width:100%;aspect-ratio:1.06;padding:0;border:0;border-radius:0;background:url('assets/pedals/fat-od/background-printed.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#e0dfca} .pedal[data-effect="fat-od"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="fat-od"] .pedal-controls{display:contents} .pedal[data-effect="fat-od"] .pedal-control{position:absolute;top:20%;width:26%} .pedal[data-effect="fat-od"] .pedal-control:nth-child(1){left:10%} .pedal[data-effect="fat-od"] .pedal-control:nth-child(2){left:37%} .pedal[data-effect="fat-od"] .pedal-control:nth-child(3){left:64%} .pedal[data-effect="fat-od"] .pedal-dial{width:20cqw;height:20cqw;margin:0 auto 1cqw;border:0;background:none} .pedal[data-effect="fat-od"] .pedal-dial:before{display:none} .pedal[data-effect="fat-od"] .pedal-knob{width:100%;height:100%;padding:0;border:0;background:transparent url('assets/pedals/shared/flat-black-knob.png') center/contain no-repeat;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="fat-od"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:none;box-shadow:none;filter:none;transform-origin:50% 50%} .pedal[data-effect="fat-od"] .pedal-pointer:after{display:block;position:absolute;top:13%;left:calc(50% - .35cqw);width:.7cqw;height:23%;border:0;border-radius:.15cqw;background:#e0dfca;box-shadow:none} .pedal[data-effect="fat-od"] .pedal-control label,.pedal[data-effect="fat-od"] .pedal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="fat-od"] .pedal-readout{color:#e0dfca;font-size:2.4cqw} .pedal[data-effect="fat-od"] .pedal-readout input{width:10cqw;font-size:2.8cqw;padding:.4cqw 0;background:#0004;border-color:#e0dfca30;color:inherit} .pedal[data-effect="fat-od"] .pedal-bottom{display:contents} .pedal[data-effect="fat-od"] .pedal-led{position:absolute;top:71.5%;left:47.5%;width:5cqw;height:5cqw} .pedal[data-effect="fat-od"] .fat-od-footswitch{position:absolute;top:78%;left:41.5%;width:17cqw;height:17cqw;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="fat-od"] .fat-od-footswitch:active{transform:translateY(1px)} .pedal[data-effect="fat-od"]{background-size:110% 120%} /* Multihead Delay: baked screenprinted legends, five live hardware controls. */ .workbench[data-effect="multihead"] .pedal-mount{width:min(600px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="multihead"]{container-type:inline-size;width:100%;aspect-ratio:1.5;padding:0;border:0;border-radius:0;background:url('assets/pedals/multihead/background-mode-ordered.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#d8cfb6} .pedal[data-effect="multihead"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="multihead"] .pedal-controls{display:contents} .pedal[data-effect="multihead"] .pedal-control{position:absolute;top:15.6%;width:16%} .pedal[data-effect="multihead"] .pedal-control:nth-child(1){left:7.2%} .pedal[data-effect="multihead"] .pedal-control:nth-child(2){left:24%} .pedal[data-effect="multihead"] .pedal-control:nth-child(3){left:40.8%} .pedal[data-effect="multihead"] .pedal-control:nth-child(4){left:56.4%} .pedal[data-effect="multihead"] .pedal-control:nth-child(5){left:76%} .pedal[data-effect="multihead"] .pedal-dial{width:11cqw;height:11cqw;margin:0 auto;border:0;background:none} .pedal[data-effect="multihead"] .pedal-dial:before{display:none} .pedal[data-effect="multihead"] .pedal-knob{width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="multihead"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:transparent url('assets/pedals/tremolo/knob.png') center/contain no-repeat;box-shadow:none;filter:none;transform-origin:50% 50%} .pedal[data-effect="multihead"] .pedal-pointer:after{display:block;position:absolute;top:16%;left:calc(50% - .3cqw);width:.6cqw;height:22%;border:0;border-radius:.1cqw;background:#24241e;box-shadow:none} .pedal[data-effect="multihead"] .pedal-control:nth-child(5) .pedal-pointer{background-image:url('assets/theme/shared/knobs/black-pointer.png');transform:translate(.079962%,-1.68388%) rotate(var(--angle)) scaleX(1.009366);transform-origin:49.920038% 51.68388%} .pedal[data-effect="multihead"] .pedal-control:nth-child(5) .pedal-pointer:after{display:none} .pedal[data-effect="multihead"] .pedal-control label,.pedal[data-effect="multihead"] .pedal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="multihead"] .pedal-readout{color:#d8cfb6;font-size:2cqw} .pedal[data-effect="multihead"] .pedal-readout input{width:10cqw;font-size:2.2cqw;padding:.4cqw 0;background:#0004;border-color:#d8cfb630;color:inherit} .pedal[data-effect="multihead"] .pedal-control:nth-child(1) .pedal-readout input{width:11cqw} .pedal[data-effect="multihead"] .pedal-bottom{display:contents} .pedal[data-effect="multihead"] .pedal-led{position:absolute;top:68%;left:47.5%;width:5cqw;height:5cqw} .pedal[data-effect="multihead"] .multihead-footswitch{position:absolute;top:78%;left:45%;width:10cqw;height:10cqw;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="multihead"] .multihead-footswitch:active{transform:translateY(1px)} .pedal[data-effect="multihead"] .pedal-readout{position:absolute;top:-3.5cqw;left:0;width:100%;font-size:1.9cqw} .pedal[data-effect="multihead"] .pedal-readout input{font-size:1.9cqw;line-height:1;padding:0;border:0} .pedal[data-effect="multihead"] .pedal-control:nth-child(5) .pedal-readout{display:none} /* Plate: printed enclosure with large Mix and two damping controls. */ .workbench[data-effect="plate"] .pedal-mount{width:min(340px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="plate"]{container-type:inline-size;width:100%;aspect-ratio:1147/1371;padding:0;border:0;border-radius:0;background:url('assets/pedals/plate/background-printed.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#e8e1ce} .pedal[data-effect="plate"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="plate"] .pedal-controls{display:contents} .pedal[data-effect="plate"] .pedal-control{position:absolute;top:52%;width:26%} .pedal[data-effect="plate"] .pedal-control:nth-child(1){left:15%} .pedal[data-effect="plate"] .pedal-control:nth-child(3){left:59%} .pedal[data-effect="plate"] .pedal-control:nth-child(2){top:21.61%;left:29.7%;width:40%} .pedal[data-effect="plate"] .pedal-dial{width:18cqw;height:18cqw;margin:0 auto .8cqw;border:0;background:none} .pedal[data-effect="plate"] .pedal-control:nth-child(2) .pedal-dial{width:32cqw;height:32cqw} .pedal[data-effect="plate"] .pedal-dial:before{display:none} .pedal[data-effect="plate"] .pedal-knob{width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="plate"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:transparent url('assets/pedals/comp/knob.png') center/contain no-repeat;box-shadow:none;filter:none;transform-origin:50% 50%} .pedal[data-effect="plate"] .pedal-pointer:after{display:block;position:absolute;top:14%;left:calc(50% - .5cqw);width:1cqw;height:22%;border:0;border-radius:.3cqw;background:#e8e1ce;box-shadow:none} .pedal[data-effect="plate"] .pedal-control label,.pedal[data-effect="plate"] .pedal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="plate"] .pedal-readout{color:#e8e1ce;font-size:2.5cqw} .pedal[data-effect="plate"] .pedal-readout input{width:12cqw;font-size:2.8cqw;line-height:1;padding:.2cqw 0;background:#0004;border-color:#e8e1ce30;color:inherit} .pedal[data-effect="plate"] .pedal-bottom{display:contents} .pedal[data-effect="plate"] .pedal-led{position:absolute;top:calc(35.5% - 5cqw);left:70.5%;width:10cqw;height:10cqw} .pedal[data-effect="plate"] .plate-footswitch{position:absolute;top:79.5%;left:41%;width:18cqw;height:18cqw;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="plate"] .plate-footswitch:active{transform:translateY(1px)} /* VOX Wah: printed chrome panel and live whole-knob controls; rubber tread toggles bypass. */ .workbench[data-effect="vox-wah"] .pedal-stage{min-height:700px} .workbench[data-effect="vox-wah"] .pedal-mount{width:min(260px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="vox-wah"]{container-type:inline-size;width:100%;aspect-ratio:664/1536;padding:0;border:0;border-radius:0;background:url('assets/pedals/vox-wah/background-no-knobs-v1.png') center/154.217% 100% no-repeat;box-shadow:none;color:#252421;clip-path:polygon(18% 2.7%,82% 2.7%,88% 3.5%,91% 5%,93% 8%,98% 90%,97% 94%,93% 96%,86% 97.3%,14% 97.3%,7% 96%,3% 94%,2% 90%,7% 8%,9% 5%,12% 3.5%)} .pedal[data-effect="vox-wah"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="vox-wah"] .pedal-controls{display:contents} .pedal[data-effect="vox-wah"] .pedal-control{position:absolute;top:81.1%;width:25%} .pedal[data-effect="vox-wah"] .pedal-control:nth-child(1){left:8.6%} .pedal[data-effect="vox-wah"] .pedal-control:nth-child(2){left:37.5%} .pedal[data-effect="vox-wah"] .pedal-control:nth-child(3){left:65.8%} .pedal[data-effect="vox-wah"] .pedal-dial{width:21cqw;height:21cqw;margin:0 auto;border:0;background:none} .pedal[data-effect="vox-wah"] .pedal-dial:before{display:none} .pedal[data-effect="vox-wah"] .pedal-knob{width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="vox-wah"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:transparent url('assets/pedals/shared/flat-black-knob.png') center/contain no-repeat;box-shadow:none;transform-origin:center} .pedal[data-effect="vox-wah"] .pedal-pointer:after{display:block;position:absolute;top:13%;left:calc(50% - .5cqw);width:1cqw;height:23%;border:0;border-radius:.2cqw;background:#e0d9b7;box-shadow:none} .pedal[data-effect="vox-wah"] .pedal-control label,.pedal[data-effect="vox-wah"] .pedal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="vox-wah"] .pedal-readout{position:absolute;top:30cqw;left:0;right:0;color:#252421} .pedal[data-effect="vox-wah"] .pedal-readout input{width:12cqw;font-size:3cqw;padding:.2cqw 0;background:#ffffff60;border-color:#25242130;color:inherit} .pedal[data-effect="vox-wah"] .pedal-bottom{display:contents} .pedal[data-effect="vox-wah"] .wah-treadle{position:absolute;top:6%;left:14%;width:72%;height:62%;padding:0;border:0;border-radius:5cqw;background:transparent} .pedal[data-effect="vox-wah"] .wah-treadle:active{background:#0002} .pedal[data-effect="vox-wah"][data-on="false"]{filter:brightness(.7) saturate(.6)} /* Fuzz Face logo and legends are printed into the enclosure; values remain live. */ .pedal[data-effect="fuzz"] .pedal-control label,.pedal[data-effect="fuzz"] .pedal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="fuzz"] .pedal-readout{position:absolute;top:24cqw;left:0;right:0} .pedal[data-effect="fuzz"] .pedal-control:nth-child(2) .pedal-readout{top:15.5cqw} /* Spring Reverb: printed tweed/black enclosure, calibrated chicken-head controls. */ .workbench[data-effect="spring"] .pedal-mount{width:min(420px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="spring"]{container-type:inline-size;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:0;background:url('assets/pedals/spring/background-printed-v1.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#eee4cc} .pedal[data-effect="spring"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="spring"] .pedal-controls{display:contents} .pedal[data-effect="spring"] .pedal-control{position:absolute;top:38%;width:24%} .pedal[data-effect="spring"] .pedal-control:nth-child(1){left:13.2%} .pedal[data-effect="spring"] .pedal-control:nth-child(2){left:38%} .pedal[data-effect="spring"] .pedal-control:nth-child(3){left:62.8%} .pedal[data-effect="spring"] .pedal-dial{width:20cqw;height:20cqw;margin:0 auto;border:0;background:none} .pedal[data-effect="spring"] .pedal-dial:before{display:none} .pedal[data-effect="spring"] .pedal-knob{width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="spring"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:url('assets/theme/shared/knobs/black-pointer.png') center/contain no-repeat;box-shadow:none;filter:none;transform:translate(.079962%,-1.68388%) rotate(var(--angle)) scaleX(1.009366);transform-origin:49.920038% 51.68388%} .pedal[data-effect="spring"] .pedal-pointer:after{display:none} .pedal[data-effect="spring"] .pedal-control label,.pedal[data-effect="spring"] .pedal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="spring"] .pedal-readout{position:absolute;top:28cqw;left:0;right:0;color:#eee4cc} .pedal[data-effect="spring"] .pedal-readout input{width:10cqw;font-size:2.8cqw;line-height:1;padding:.25cqw 0;background:#0005;border-color:#eee4cc40;color:inherit} .pedal[data-effect="spring"] .pedal-bottom{display:contents} .pedal[data-effect="spring"] .pedal-led{position:absolute;top:78%;left:69.8%;width:10cqw;height:10cqw} .pedal[data-effect="spring"] .spring-footswitch{position:absolute;top:72%;left:39%;width:22cqw;height:22cqw;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="spring"] .spring-footswitch:active{transform:translateY(1px)} /* Room Reverb: printed blue logo/legends, whole scalloped knobs and blue status lamp. */ .workbench[data-effect="room"] .pedal-mount{width:min(380px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="room"]{container-type:inline-size;width:100%;aspect-ratio:1122/1402;padding:0;border:0;border-radius:0;background:url('assets/pedals/room/background-printed-v1.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#eee5d7} .pedal[data-effect="room"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="room"] .pedal-controls{display:contents} .pedal[data-effect="room"] .pedal-control{position:absolute;top:29%;width:20%} .pedal[data-effect="room"] .pedal-control:nth-child(1){left:18.1%} .pedal[data-effect="room"] .pedal-control:nth-child(2){left:40%} .pedal[data-effect="room"] .pedal-control:nth-child(3){left:60.5%} .pedal[data-effect="room"] .pedal-dial{width:17cqw;height:17cqw;margin:0 auto;border:0;background:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="room"] .pedal-dial:before{display:none} .pedal[data-effect="room"] .pedal-knob{width:100%;height:100%;padding:0;border:0;border-radius:50%;clip-path:circle(50%);overflow:hidden;background:none;box-shadow:none} .pedal[data-effect="room"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:#10100f;box-shadow:none;filter:none;transform-origin:center} .pedal[data-effect="room"] .pedal-pointer:before{content:"";position:absolute;left:50%;top:50%;width:109.615385%;height:109.615385%;background:url('assets/pedals/comp/knob.png') center/contain no-repeat;transform-origin:49.848135% 50.058741%;transform:translate(-49.848135%,-50.058741%) scaleX(1.009653)} .pedal[data-effect="room"] .pedal-pointer:after{display:block;position:absolute;top:12%;left:calc(50% - .45cqw);width:.9cqw;height:24%;border:0;border-radius:.2cqw;background:#eee5d7;box-shadow:none} .pedal[data-effect="room"] .pedal-control label,.pedal[data-effect="room"] .pedal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="room"] .pedal-readout{position:absolute;top:32.5cqw;left:0;right:0;color:#eee5d7} .pedal[data-effect="room"] .pedal-readout input{width:10cqw;font-size:2.8cqw;line-height:1;padding:.3cqw 0;background:#0005;border-color:#eee5d740;color:inherit} .pedal[data-effect="room"] .pedal-bottom{display:contents} .pedal[data-effect="room"] .pedal-led{position:absolute;top:60%;left:46%;width:8cqw;height:8cqw;filter:hue-rotate(215deg)} .pedal[data-effect="room"] .room-footswitch{position:absolute;top:72.6%;left:42%;width:16cqw;height:16cqw;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="room"] .room-footswitch:active{transform:translateY(1px)} /* Maestro Echoplex / Tape Echo: printed cream panel and calibrated metal-cap knobs. */ .workbench[data-effect="tape-echo"] .pedal-mount{width:min(460px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="tape-echo"]{container-type:inline-size;width:100%;aspect-ratio:1122/1402;padding:0;border:0;border-radius:0;background:url('assets/pedals/tape-echo/background-no-reels-v2.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#29271e} .pedal[data-effect="tape-echo"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="tape-echo"] .pedal-controls{display:contents} .pedal[data-effect="tape-echo"] .pedal-control{position:absolute;top:12%;width:20%} .pedal[data-effect="tape-echo"] .pedal-control:nth-child(1){left:8.9%} .pedal[data-effect="tape-echo"] .pedal-control:nth-child(2){left:29.65%} .pedal[data-effect="tape-echo"] .pedal-control:nth-child(3){left:50.4%} .pedal[data-effect="tape-echo"] .pedal-control:nth-child(4){left:71%} .pedal[data-effect="tape-echo"] .pedal-dial{width:15cqw;height:15cqw;margin:0 auto;border:0;background:none} .pedal[data-effect="tape-echo"] .pedal-dial:before{display:none} .pedal[data-effect="tape-echo"] .pedal-knob{width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="tape-echo"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:url('assets/theme/shared/knobs/champagne-cap.png') center/contain no-repeat;box-shadow:none;filter:none;transform:translate(.035546%,.151911%) rotate(var(--angle)) scaleX(.983176);transform-origin:49.964454% 49.848089%} .pedal[data-effect="tape-echo"] .pedal-pointer:after{display:none} .pedal[data-effect="tape-echo"] .pedal-control label,.pedal[data-effect="tape-echo"] .pedal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="tape-echo"] .pedal-readout{position:absolute;top:-7.2cqw;left:0;right:0;color:#29271e;font-size:2.2cqw} .pedal[data-effect="tape-echo"] .pedal-readout input{width:10cqw;font-size:2.5cqw;line-height:1;padding:.2cqw 0;background:#fff5;border-color:#29271e40;color:inherit} .pedal[data-effect="tape-echo"] .pedal-control:first-child .pedal-readout{display:block} .pedal[data-effect="tape-echo"] .pedal-control:first-child .pedal-readout span{position:absolute;left:calc(50% + 5.3cqw);top:.25cqw;white-space:nowrap} .pedal[data-effect="tape-echo"] .pedal-bottom{display:contents} .pedal[data-effect="tape-echo"] .pedal-led{position:absolute;top:67%;left:46%;width:8cqw;height:8cqw} .pedal[data-effect="tape-echo"] .tape-echo-footswitch{position:absolute;top:75.5%;left:42%;width:16cqw;height:16cqw;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="tape-echo"] .tape-echo-footswitch:active{transform:translateY(1px)} /* Memory Man-inspired Delay: printed worn enclosure and calibrated full-knob rotation. */ .workbench[data-effect="delay"] .pedal-mount{width:min(520px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="delay"]{container-type:inline-size;width:100%;aspect-ratio:1408/1117;padding:0;border:0;border-radius:0;background:url('assets/pedals/delay/background-printed-v1.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#28251b} .pedal[data-effect="delay"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="delay"] .pedal-controls{display:contents} .pedal[data-effect="delay"] .pedal-control{position:absolute;left:73.3%;width:22%} .pedal[data-effect="delay"] .pedal-control:nth-child(1){top:15.9%} .pedal[data-effect="delay"] .pedal-control:nth-child(3){top:42.55%} .pedal[data-effect="delay"] .pedal-control:nth-child(2){top:68.8%} .pedal[data-effect="delay"] .pedal-dial{width:16cqw;height:16cqw;margin:0 auto;border:0;background:none} .pedal[data-effect="delay"] .pedal-dial:before{display:none} .pedal[data-effect="delay"] .pedal-knob{width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="delay"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:url('assets/pedals/delay/knob-worn-v1.png') center/contain no-repeat;box-shadow:none;filter:none;transform:translate(0.12099432%,0.27821668%) rotate(var(--angle)) scaleX(1.00486112);transform-origin:49.87900568% 49.72178332%} .pedal[data-effect="delay"] .pedal-pointer:after{display:none} .pedal[data-effect="delay"] .pedal-control label,.pedal[data-effect="delay"] .pedal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="delay"] .pedal-readout{position:absolute;top:17.8cqw;left:0;right:0;color:#28251b;font-size:2cqw} .pedal[data-effect="delay"] .pedal-readout input{width:10cqw;font-size:2.2cqw;line-height:1;padding:.15cqw 0;background:#fff5;border:0;color:inherit} .pedal[data-effect="delay"] .pedal-bottom{display:contents} .pedal[data-effect="delay"] .pedal-led{position:absolute;top:18.85%;left:9.5%;width:5cqw;height:5cqw} .pedal[data-effect="delay"] .delay-footswitch{position:absolute;top:73.3%;left:15.5%;width:13cqw;height:13cqw;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="delay"] .delay-footswitch:active{transform:translateY(1px)} /* VOX Octave: printed artwork, Direct/1 Octave/2 Octave visual order. */ .workbench[data-effect="octave"] .pedal-mount{width:min(420px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="octave"]{container-type:inline-size;width:100%;aspect-ratio:1230/1278;padding:0;border:0;border-radius:0;background:url('assets/pedals/octave/background-printed-v1.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#e8d2a6} .pedal[data-effect="octave"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="octave"] .pedal-controls{display:contents} .pedal[data-effect="octave"] .pedal-control{position:absolute;top:19.25%;width:24%} .pedal[data-effect="octave"] .pedal-control:nth-child(2){left:16.45%} .pedal[data-effect="octave"] .pedal-control:nth-child(1){left:38.08%} .pedal[data-effect="octave"] .pedal-control:nth-child(3){left:59.63%} .pedal[data-effect="octave"] .pedal-dial{width:20cqw;height:20cqw;margin:0 auto;border:0;background:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="octave"] .pedal-dial:before{display:none} .pedal[data-effect="octave"] .pedal-knob{width:100%;height:100%;padding:0;border:0;border-radius:50%;clip-path:circle(37%);overflow:hidden;background:none;box-shadow:none;filter:none} .pedal[data-effect="octave"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:#10100f;box-shadow:none;filter:none;transform-origin:center} .pedal[data-effect="octave"] .pedal-pointer:before{content:"";position:absolute;left:50%;top:50%;width:97%;height:97%;background:url('assets/pedals/octave/knob-concentric-v2.png') center/contain no-repeat;transform-origin:50% 48.32535885%;transform:translate(-50%,-48.32535885%)} .pedal[data-effect="octave"] .pedal-pointer:after{display:none} .pedal[data-effect="octave"] .pedal-control label,.pedal[data-effect="octave"] .pedal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="octave"] .pedal-readout{position:absolute;top:25.2cqw;left:0;right:0;color:#e8d2a6} .pedal[data-effect="octave"] .pedal-readout input{width:10cqw;font-size:2.6cqw;line-height:1;padding:.25cqw 0;background:#0004;border:0;color:inherit} .pedal[data-effect="octave"] .pedal-bottom{display:contents} .pedal[data-effect="octave"] .pedal-led{position:absolute;top:61.7%;left:47%;width:6cqw;height:6cqw} .pedal[data-effect="octave"] .octave-footswitch{position:absolute;top:70%;left:42%;width:16cqw;height:16cqw;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="octave"] .octave-footswitch:active{transform:translateY(1px)} /* Treble Boost: calibrated chicken-head Boost plus concentric Tone/Level trims. */ .workbench[data-effect="treble-boost"] .pedal-mount{width:min(360px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="treble-boost"]{container-type:inline-size;width:100%;aspect-ratio:1086/1448;padding:0;border:0;border-radius:0;background:url('assets/pedals/treble-boost/background-printed-v1.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#e8ce84} .pedal[data-effect="treble-boost"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="treble-boost"] .pedal-controls{display:contents} .pedal[data-effect="treble-boost"] .pedal-control{position:absolute;top:40.58%;width:22%} .pedal[data-effect="treble-boost"] .pedal-control:nth-child(1){top:17.58%;left:35%;width:30%} .pedal[data-effect="treble-boost"] .pedal-control:nth-child(2){left:23.8%} .pedal[data-effect="treble-boost"] .pedal-control:nth-child(3){left:54.2%} .pedal[data-effect="treble-boost"] .pedal-dial{width:15cqw;height:15cqw;margin:0 auto;border:0;background:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="treble-boost"] .pedal-control:first-child .pedal-dial{width:22cqw;height:22cqw} .pedal[data-effect="treble-boost"] .pedal-dial:before{display:none} .pedal[data-effect="treble-boost"] .pedal-knob{width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="treble-boost"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:url('assets/theme/shared/knobs/black-pointer.png') center/contain no-repeat;box-shadow:none;filter:none;transform:translate(.079962%,-1.68388%) rotate(var(--angle)) scaleX(1.009366);transform-origin:49.920038% 51.68388%} .pedal[data-effect="treble-boost"] .pedal-pointer:after{display:none} .pedal[data-effect="treble-boost"] .pedal-control:not(:first-child) .pedal-knob{border-radius:50%;clip-path:circle(37%);overflow:hidden} .pedal[data-effect="treble-boost"] .pedal-control:not(:first-child) .pedal-pointer{background:#10100f;transform:rotate(var(--angle));transform-origin:center} .pedal[data-effect="treble-boost"] .pedal-control:not(:first-child) .pedal-pointer:before{content:"";position:absolute;left:50%;top:50%;width:97%;height:97%;background:url('assets/pedals/octave/knob-concentric-v2.png') center/contain no-repeat;transform-origin:50% 48.32535885%;transform:translate(-50%,-48.32535885%)} .pedal[data-effect="treble-boost"] .pedal-control label,.pedal[data-effect="treble-boost"] .pedal-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="treble-boost"] .pedal-readout{position:absolute;top:6cqw;width:8cqw;color:#e8ce84} .pedal[data-effect="treble-boost"] .pedal-control:nth-child(1) .pedal-readout{top:10cqw;left:calc(50% + 14cqw);width:10cqw} .pedal[data-effect="treble-boost"] .pedal-control:nth-child(2) .pedal-readout{left:-5.8cqw} .pedal[data-effect="treble-boost"] .pedal-control:nth-child(3) .pedal-readout{left:20.8cqw} .pedal[data-effect="treble-boost"] .pedal-readout input{width:100%;font-size:2.6cqw;line-height:1;padding:.2cqw 0;background:#0004;border:0;color:inherit} .pedal[data-effect="treble-boost"] .pedal-bottom{display:contents} .pedal[data-effect="treble-boost"] .pedal-led{position:absolute;top:74.125%;left:65.5%;width:9cqw;height:9cqw} .pedal[data-effect="treble-boost"] .treble-boost-footswitch{position:absolute;top:70.75%;left:41%;width:18cqw;height:18cqw;border:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #0008)} .pedal[data-effect="treble-boost"] .treble-boost-footswitch:active{transform:translateY(1px)} /* Auto Wah: two rotary controls and a discrete, independent direction flip switch. */ .workbench[data-effect="auto-wah"] .pedal-mount{width:min(380px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="auto-wah"]{container-type:inline-size;width:100%;aspect-ratio:1145/1374;padding:0;border:0;border-radius:0;background:url('assets/pedals/auto-wah/background-printed-v1.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 15px 9px #0009);color:#24231b} .pedal[data-effect="auto-wah"] .pedal-face{padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="auto-wah"] .pedal-controls{display:contents} .pedal[data-effect="auto-wah"] .pedal-control{position:absolute;top:31.817%;width:26%} .pedal[data-effect="auto-wah"] .pedal-control:nth-child(1){left:12.76%} .pedal[data-effect="auto-wah"] .pedal-control:nth-child(2){left:61.4%} .pedal[data-effect="auto-wah"] .pedal-dial{width:22cqw;height:22cqw;margin:0 auto;border:0;background:none;filter:drop-shadow(1px 3px 2px #0008)} .pedal[data-effect="auto-wah"] .pedal-dial:before{display:none} .pedal[data-effect="auto-wah"] .pedal-knob{width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none} .pedal[data-effect="auto-wah"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:url('assets/theme/ac15/knob.png') center/contain no-repeat;box-shadow:none;filter:none;transform:translate(.076735%,-1.395192%) rotate(var(--angle)) scaleX(.996138);transform-origin:49.923265% 51.395192%} .pedal[data-effect="auto-wah"] .pedal-pointer:after{display:block;position:absolute;top:12%;left:calc(50% - .35cqw);width:.7cqw;height:19%;border:0;border-radius:.2cqw;background:#26241a;box-shadow:none} .pedal[data-effect="auto-wah"] .pedal-control label,.pedal[data-effect="auto-wah"] .pedal-title,.pedal-direction-state{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .pedal[data-effect="auto-wah"] .pedal-readout{position:absolute;top:30cqw;left:0;right:0;color:#24231b} .pedal[data-effect="auto-wah"] .pedal-readout input{width:10cqw;font-size:2.8cqw;line-height:1;padding:.2cqw 0;background:#fff3;border:0;color:inherit} .pedal[data-effect="auto-wah"] .pedal-direction-control{top:36.6%;left:44.6%;width:10.8%} .pedal[data-effect="auto-wah"] .pedal-bottom{display:contents} .pedal[data-effect="auto-wah"] .pedal-led{position:absolute;top:66.167%;left:46%;width:8cqw;height:8cqw} /* Auto Wah bypass uses the same photographed toggle as the amps. */ .pedal[data-effect="auto-wah"] .auto-wah-footswitch{transition:none} .pedal[data-effect="auto-wah"] .auto-wah-footswitch{position:absolute;top:76%;left:41%;width:18cqw;height:18cqw;padding:0;border:0;border-radius:0;background-color:transparent;background-image:url('assets/theme/ac15/switches/toggle-down-v1.png'),url('assets/theme/ac15/switches/toggle-mount-v1.png');background-position:53.5% 50%,center;background-size:contain;background-repeat:no-repeat;box-shadow:none;filter:drop-shadow(0 .15cqw .15cqw #000a)} .pedal[data-effect="auto-wah"][data-on="false"] .auto-wah-footswitch{background-image:url('assets/theme/ac15/switches/toggle-up-v1.png'),url('assets/theme/ac15/switches/toggle-mount-v1.png');background-position:53% 48.5%,center} .pedal[data-effect="auto-wah"] .auto-wah-footswitch:hover,.pedal[data-effect="auto-wah"] .auto-wah-footswitch:active{background-color:transparent} .pedal[data-effect="auto-wah"] .auto-wah-footswitch:active{transform:none} /* MXR printing is worn into the enclosure bitmap. Keep semantic labels and their flow boxes so live values retain spacing beneath the printed captions. */ .pedal[data-effect="comp"]{background-image:url('assets/pedals/comp/background-printed-v2.png');background-size:100% 100%} .pedal[data-effect="phaser"]{background-image:url('assets/pedals/phaser/background-centre-v1.png')} .pedal[data-effect="flanger"]{background-image:url('assets/pedals/flanger/background-centre-v1.png')} .pedal:is([data-effect="comp"],[data-effect="phaser"],[data-effect="flanger"]) :is(.pedal-control label,.pedal-title,.comp-brand,.phaser-brand,.flanger-brand){opacity:0} .pedal[data-effect="phaser"] .phaser-footswitch{top:69%} .pedal[data-effect="comp"] .comp-footswitch{top:70%} /* Uni-Vibe uses worn baked script and captions; semantic flow boxes retain value spacing. */ .pedal[data-effect="u-vibe"]{background-image:url('assets/pedals/u-vibe/background-printed-v2.png')} .pedal[data-effect="u-vibe"] :is(.pedal-title,.pedal-control label){opacity:0} /* VOX Chorus redesign: worn printed faceplate, stationary silver bezels, live black caps. */ .workbench[data-effect="chorus"] .pedal-mount{width:min(520px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="chorus"]{width:100%;aspect-ratio:3/2;background-image:url('assets/pedals/chorus/background-vox-printed-v2.png');color:#e4d8bd} .pedal[data-effect="chorus"] .pedal-control{top:21.1%;width:16%} .pedal[data-effect="chorus"] .pedal-control:nth-child(1){left:10.994%} .pedal[data-effect="chorus"] .pedal-control:nth-child(2){left:31.659%} .pedal[data-effect="chorus"] .pedal-control:nth-child(3){left:52.017%} .pedal[data-effect="chorus"] .pedal-control:nth-child(4){left:72.551%} .pedal[data-effect="chorus"] .pedal-dial{width:11.2cqw;height:11.2cqw;margin:0 auto;border:0;background:none} .pedal[data-effect="chorus"] .pedal-knob{width:7.1cqw;height:7.1cqw;padding:0;border:0;border-radius:50%;clip-path:circle(50%);background:#151513;box-shadow:none} .pedal[data-effect="chorus"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:none;box-shadow:none;filter:none;transform:rotate(var(--angle));transform-origin:50% 50%} .pedal[data-effect="chorus"] .pedal-pointer:before{content:"";position:absolute;left:50%;top:50%;width:106%;height:106%;background:url('assets/pedals/chorus/knob-cap-worn-v1.png') center/contain no-repeat;transform:translate(-49.920255%,-49.681021%)} .pedal[data-effect="chorus"] .pedal-pointer:after{content:"";display:block;position:absolute;top:10%;left:calc(50% - .13cqw);width:.26cqw;height:31%;border:0;border-radius:.12cqw;background:#ddd5c0;box-shadow:none} .pedal[data-effect="chorus"] :is(.pedal-title,.pedal-control label,.chorus-input,.chorus-output,.chorus-brand,.chorus-model){opacity:0} .pedal[data-effect="chorus"] .pedal-readout{position:absolute;top:13cqw;left:0;right:0;font-size:1.8cqw;color:#e6dcc5;line-height:1} .pedal[data-effect="chorus"] .pedal-readout input{width:8cqw;font-size:2.4cqw;line-height:1;padding:0;border:0;background:#f0e4c21c;color:inherit;border-radius:.3cqw} .pedal[data-effect="chorus"] .pedal-led{top:68.75%;left:78.5%;width:7cqw;height:7cqw} .pedal[data-effect="chorus"] .chorus-footswitch{top:65.75%;left:43.5%;width:13cqw;height:13cqw;border:0;border-radius:0;background:transparent url('assets/pedals/flanger/footswitch.png') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 3px 2px #0008)} /* Worn baked graphics for Twin Trem and G4 Rotary. Semantic flow boxes retain live value spacing. */ .pedal[data-effect="tremolo"]{background-image:url('assets/pedals/tremolo/background-printed-v1.png')} .pedal[data-effect="rotary"]{background-image:url('assets/pedals/rotary/background-printed-v2.png')} .pedal:is([data-effect="tremolo"],[data-effect="rotary"]) :is(.pedal-title,.pedal-control label){opacity:0} .pedal[data-effect="tremolo"] .tremolo-scale{opacity:0} .pedal[data-effect="rotary"] .pedal-dial:before{opacity:0} /* Tube OD: user-supplied worn TS9 design, printed enclosure and rubber bypass pad. */ .workbench[data-effect="tube-od"] .pedal-mount{width:min(330px,calc(100vw - 100px));max-width:100%;flex-shrink:0} .pedal[data-effect="tube-od"]{container-type:inline-size;width:100%;aspect-ratio:2/3;clip-path:none;background:url('assets/pedals/tube-od/background-ts9-printed-v1.png') center/100% 100% no-repeat;color:#142219;filter:drop-shadow(0 15px 9px #0009)} .pedal[data-effect="tube-od"] .pedal-control{width:28%;top:15.1575%} .pedal[data-effect="tube-od"] .pedal-control:nth-child(1){left:9.9137%} .pedal[data-effect="tube-od"] .pedal-control:nth-child(2){left:36.4805%;top:18.7244%} .pedal[data-effect="tube-od"] .pedal-control:nth-child(3){left:62.9553%;right:auto} .pedal[data-effect="tube-od"] .pedal-dial{width:24cqw;height:24cqw;margin:0 auto;border:0;border-radius:50%;background:none;filter:drop-shadow(0 2px 1px #0006)} .pedal[data-effect="tube-od"] .pedal-dial:before{display:none} .pedal[data-effect="tube-od"] .pedal-knob{width:18.8cqw;height:18.8cqw;padding:0;border:0;border-radius:50%;clip-path:circle(50%);background:#171c13;box-shadow:none} .pedal[data-effect="tube-od"] .pedal-pointer{inset:0;border:0;border-radius:0;clip-path:none;background:none;box-shadow:none;filter:none;transform:rotate(var(--angle));transform-origin:50% 50%} .pedal[data-effect="tube-od"] .pedal-pointer:before{content:"";position:absolute;top:50%;left:50%;width:110%;height:110%;background:url('assets/pedals/tube-od/knob-ts9-worn-v2.png') center/contain no-repeat;transform:translate(-49.605322%,-48.701734%)} .pedal[data-effect="tube-od"] .pedal-pointer:after{content:"";display:block;position:absolute;top:12%;left:calc(50% - .45cqw);width:.9cqw;height:28%;border:0;border-radius:.35cqw;background:#262b20;box-shadow:none} .pedal[data-effect="tube-od"] :is(.pedal-title,.pedal-control label){opacity:0} .pedal[data-effect="tube-od"] .pedal-readout{position:absolute;top:30.15cqw;left:0;right:0;color:#142219;font-size:2.8cqw;line-height:1} .pedal[data-effect="tube-od"] .pedal-control:nth-child(2) .pedal-readout{top:28.8cqw} .pedal[data-effect="tube-od"] .pedal-readout input{width:12cqw;padding:.15cqw 0;border:0;border-radius:.5cqw;background:#f0e8cb66;font-size:3cqw;line-height:1.1;color:inherit} .pedal[data-effect="tube-od"] .pedal-led{top:11.3333%;left:46.4805%;width:8cqw;height:8cqw} .pedal[data-effect="tube-od"] .tube-footswitch{top:65%;left:18%;width:65%;height:25%;border:0;border-radius:2cqw;background:transparent;box-shadow:none} .pedal[data-effect="tube-od"] .tube-footswitch:hover{background:#fff1} .pedal[data-effect="tube-od"] .tube-footswitch:active{background:#0002;box-shadow:inset 0 2px 5px #0003} /* Mix value sits above its trim, clear of the baked flanger title. */ .pedal[data-effect="flanger"] .pedal-control:nth-child(5) .pedal-readout{position:absolute;top:-4.6cqw;left:0;right:0} /* Align each baked word's visible ink bounds to its shaft, independently. */ .pedal[data-effect="flanger"] .flanger-caption-art{position:absolute;z-index:0;inset:0;background:url('assets/pedals/flanger/background-centre-v1.png') center/100% 100% no-repeat;pointer-events:none} .pedal[data-effect="flanger"] .flanger-caption-manual{clip-path:inset(33% 75% 60% 8%);transform:translateX(1.0938005391%)} .pedal[data-effect="flanger"] .flanger-caption-width{clip-path:inset(33% 54% 60% 28%);transform:translateX(2.6423180593%)} .pedal[data-effect="flanger"] .flanger-caption-speed{clip-path:inset(33% 31% 60% 49%);transform:translateX(2.3040431267%)} .pedal[data-effect="flanger"] .flanger-caption-regen{clip-path:inset(33% 9% 60% 72%);transform:translateX(.6180592992%)} .pedal[data-effect="flanger"] .pedal-control{z-index:1} } /* Keep current values out of the artwork in both rig and workshop views. */ .pedal .pedal-control .pedal-readout{visibility:hidden;pointer-events:none} /* Double-click timing editor, shared by the rig and standalone workshop. */ .pedal-tempo-dialog{width:min(420px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;padding:22px;border:1px solid #46515d;border-radius:12px;background:#1c2028;color:#e6e8ed;font:13px Arial,sans-serif;box-shadow:0 24px 80px #0009} .pedal-tempo-dialog::backdrop{background:#080b12b8;backdrop-filter:blur(5px)} .pedal-tempo-dialog .dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .pedal-tempo-dialog h2{font-size:18px;margin:0} .pedal-tempo-dialog label{display:block;margin:16px 0 6px;color:#cbd3e2;font-size:12px} .pedal-tempo-dialog input,.pedal-tempo-dialog select{width:100%;padding:9px 12px;border:1px solid #46515d;border-radius:6px;background-color:#12161d;color:#eee} .pedal-tempo-dialog p{font-size:12px;line-height:1.6;color:#abb7be} .pedal-tempo-dialog #tempo-preview{color:#dce8dc} .pedal-tempo-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px} /* Shared translucent dropdown background. */ .pedal-tempo-dialog select{background-color:#ffffff12}