@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#272c29;background:#eae8df}*{box-sizing:border-box}body{margin:0;background:radial-gradient(#b9b7ac55 .6px,transparent .6px);background-size:5px 5px}button,a,select,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit;color:inherit}header{height:104px;margin:0 5%;display:flex;align-items:center;border-bottom:1px solid #c6c6ba;justify-content:space-between}.logo{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:800;letter-spacing:-1px;color:inherit;text-decoration:none}.logo span{font:12px 'DM Sans';vertical-align:top;display:inline-block;margin-top:10px}.tag{font-size:10px;letter-spacing:2px}header button,#demo{background:none;border:0;font-size:12px}main{max-width:1400px;min-height:760px;margin:auto;display:grid;grid-template-columns:1fr 1fr 60px;align-items:center;padding:45px 5% 55px;gap:40px}.eyebrow{font-size:11px;letter-spacing:2px;margin-bottom:24px;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';width:8px;height:8px;border-radius:50%;background:#c36241}h1{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:clamp(70px,7.7vw,112px);line-height:.91;letter-spacing:-2px;margin:0 0 28px}.intro p{font-size:15px;line-height:1.8;color:#73776e}.finishes{margin-top:48px}.finishes>span{font-size:9px;letter-spacing:1.7px}.finishes>div{display:flex;align-items:center;gap:13px;margin-top:15px}.swatch{width:25px;height:25px;border-radius:50%;border:3px solid #eae8df;box-shadow:0 0 0 1px #b9bcb2}.swatch.active{outline:1px solid #343b33;outline-offset:4px}.rust{background:#c56645}.silver{background:#acb3b0}.black{background:#343b38}.finishes small{font-size:11px;color:#73776e;margin-left:10px}.features{display:flex;gap:24px;margin-top:52px;font-size:9px;letter-spacing:.7px;color:#777b71}.pedal-area{position:relative;max-width:420px;width:100%;justify-self:center}.cable{position:absolute;left:50%;top:-80px;width:16px;height:100px;background:linear-gradient(90deg,#222,#555,#222);border-radius:4px}.pedal{--paint:#c56645;background:linear-gradient(100deg,#ffffff22,transparent 40%,#00000018),var(--paint);border-radius:22px 22px 28px 28px;box-shadow:inset 0 2px 2px #ffffff70,inset 0 -9px 1px #00000030,0 28px 30px #282d2930,0 3px 3px #00000070;padding:32px 30px 30px;position:relative;border:1px solid #783f2e;transform:rotate(-2deg)}.pedal:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.09' filter='url(%23n)' d='M0 0h200v200H0z'/%3E%3C/svg%3E")}.screw{position:absolute;width:13px;height:13px;background:linear-gradient(120deg,#bab7aa,#514f47);border-radius:50%;box-shadow:0 1px 2px #0008}.screw:after{content:'';position:absolute;width:8px;height:2px;background:#393c36;top:6px;left:2px;transform:rotate(35deg)}.tl{top:15px;left:15px}.tr{top:15px;right:15px}.bl{bottom:17px;left:15px}.br{bottom:17px;right:15px}.pedal-head{display:flex;justify-content:space-between;align-items:center;color:#f5e6cc;margin:2px 0 22px}.pedal-head b{font-family:'Barlow Condensed';font-size:36px;font-weight:800;letter-spacing:1px}.pedal-head>span{font-size:8px;line-height:1.6;letter-spacing:1.5px;text-align:right}.screen{background:#172923;border:7px solid #29312c;border-radius:10px;box-shadow:inset 0 4px 12px #0009,0 2px 1px #ffffff40;color:#bed1a6;padding:13px 12px 16px}.screen-top{display:flex;justify-content:space-between;font-size:7px;letter-spacing:1px;color:#879e81}.meter-labels{display:flex;justify-content:space-between;font-size:7px;margin-top:26px;letter-spacing:1px}.meter{display:flex;align-items:center;justify-content:center;gap:5px;height:27px;margin-top:8px}.meter i{width:6px;height:10px;background:#3d513d;border-radius:2px}.meter i:nth-child(11){height:23px}.meter i.lit{background:#eda354;box-shadow:0 0 8px #e9a34c77}.meter i.good{background:#c5ef98;box-shadow:0 0 9px #c5ef9866}.note{height:110px;display:flex;justify-content:center;align-items:center;font-family:'Barlow Condensed';font-weight:600}.note>span{font-size:100px;line-height:1;text-shadow:0 0 20px #bde29222}.note small{font:20px 'DM Sans';margin:30px 0 0 5px;color:#889e7e}.readout{display:flex;justify-content:space-between;font-family:monospace;font-size:10px}.strings{display:flex;justify-content:space-between;margin:18px 0 24px;gap:6px}.strings button{width:38px;height:34px;border:1px solid #f1d7bd55;background:#00000012;color:#fae6ce;border-radius:5px;font-size:12px}.strings button.selected{background:#f2dfbd;color:#6a3829;box-shadow:0 1px 3px #0004}.controls{display:flex;justify-content:space-between;gap:20px}label{font-size:8px;letter-spacing:1.5px;color:#fae6ce}select,.reference{display:block;margin-top:9px;background:#272e29;color:#eadbc4;border:1px solid #18251c;border-radius:5px;padding:9px 8px;font-size:11px;letter-spacing:0;height:35px;box-shadow:0 1px 1px #ffffff30}select{width:170px}.reference{display:flex;align-items:center;padding:7px}.reference input{width:38px;background:none;border:0;color:inherit;font:11px 'DM Sans';appearance:textfield}.reference input::-webkit-inner-spin-button{appearance:none}.reference span{font-size:9px;color:#969d8c}.switch-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:26px 0 16px;color:#f3ddc4;font-size:8px;letter-spacing:1.5px}.status-led{height:7px;width:7px;border-radius:50%;background:#5d3e31;box-shadow:inset 0 1px 2px #0008}.status-led.on{background:#d3f29c;box-shadow:0 0 10px #d3f29c}.footswitch{display:block;margin:auto;width:64px;height:64px;border-radius:50%;background:conic-gradient(#d8d9d2,#70736e,#e7e8e0,#888e87,#e3e4dc);border:2px solid #656c62;box-shadow:0 5px 0 #5d625c,0 9px 9px #0005,inset 0 1px 2px white;position:relative}.footswitch span{display:block;width:43px;height:43px;margin:auto;border-radius:50%;background:linear-gradient(135deg,#f7f7ee,#9ba096);border:1px solid #888e83;box-shadow:0 3px 3px #0004}.footswitch:active{transform:translateY(3px);box-shadow:0 2px 0 #5d625c,0 4px 6px #0005}.pedal-foot{font-size:8px;letter-spacing:2.2px;text-align:center;color:#f4dbc0;margin-top:24px}.pedal-caption{display:flex;justify-content:space-between;margin-top:34px;font-size:9px;letter-spacing:1px;color:#777b72}aside{height:540px;display:flex;align-items:center;justify-content:space-between;flex-direction:column}.vertical{writing-mode:vertical-rl;font-size:9px;letter-spacing:3px}.edition{font-size:10px;line-height:1.6;color:#818578}footer{margin:0 5%;border-top:1px solid #c6c6ba;display:flex;justify-content:space-between;padding:25px 0;font-size:10px;color:#777b72}dialog{border:0;border-radius:16px;max-width:440px;padding:32px;background:#eae8df;line-height:1.7}dialog::backdrop{background:#17292399}dialog button{float:right;border:0;background:none;font-size:24px}dialog h2{font-family:'Barlow Condensed';font-size:35px}dialog p{font-size:14px}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #247057;outline-offset:4px}@media(max-width:900px){main{grid-template-columns:1fr 1fr;gap:28px}aside,.tag{display:none}.features{flex-direction:column;gap:10px}.pedal{padding:30px 22px}select{width:145px}}@media(max-width:640px){header{height:80px}main{display:flex;flex-direction:column;padding-top:32px;gap:65px}.intro{width:100%}h1{font-size:76px}.intro p{margin-bottom:0}.finishes{margin-top:22px}.features{display:none}.pedal-area{max-width:370px}.cable{top:-35px;height:55px}.pedal{transform:rotate(-1deg)}footer{gap:16px;flex-wrap:wrap;font-size:9px}footer>span:last-child{display:none}.eyebrow{margin-bottom:16px}}