:root{--unit:calc((90 / 1040) * 1vmax)}@media screen and (orientation:portrait),screen and (max-height:800px){:root{--unit:calc((95 / 1040) * 1vmin)}}*,:after,:before{box-sizing:border-box}body{background-color:#2f2a35;margin:0;padding:0;display:flex;align-items:center;justify-content:center;height:100vh;overflow:hidden}.keyboard{background:linear-gradient(276.82deg,#151416 -1.45%,#232027 101.28%);width:calc(1040 * var(--unit));height:calc(505 * var(--unit));position:relative}.keyboard-bottom{height:calc(15 * var(--unit));width:100%;background:inherit;position:absolute;bottom:calc(-15 * var(--unit));width:calc(100% - calc(60 * var(--unit)));margin-left:calc(30 * var(--unit));background:#000}.keyboard-bottom:after,.keyboard-bottom:before{content:'';background:inherit;clip-path:polygon(0 0,100% 0,100% 100%,50% 51%);position:absolute;bottom:0;width:calc(30 * var(--unit));height:calc(15 * var(--unit))}.keyboard-bottom:before{left:calc(-30 * var(--unit))}.keyboard-bottom:after{right:calc(-30 * var(--unit));transform:scaleX(-1)}.slider{width:calc(64 * var(--unit));height:calc(152 * var(--unit));position:absolute}.slider-ticks{width:calc(7.4 * var(--unit));height:100%;position:absolute;left:0;top:0;padding-top:calc(29 * var(--unit))}.slider__tick{width:calc(7.4 * var(--unit));height:calc(4 * var(--unit));transform:scaleY(.5);background:linear-gradient(98.33deg,#d3d3d3 87.23%,#fff 101.44%);box-shadow:inset calc(.8 * var(--unit)) calc(1.6 * var(--unit)) calc(1.8 * var(--unit)) rgba(197,197,197,.5),inset calc(-.8 * var(--unit)) calc(-1.6 * var(--unit)) calc(1.8 * var(--unit)) rgba(255,255,255,.5)}.slider__tick:not(:first-child){margin-top:calc(5 * var(--unit))}.slider-container{position:absolute;width:calc(100% - calc(7.4 * var(--unit)));left:calc(7.4 * var(--unit));top:0;height:100%;background:linear-gradient(145deg,#100f12 0,#232126 71.8%);box-shadow:inset calc(4.2 * var(--unit)) calc(6.1 * var(--unit)) calc(7.4 * var(--unit)) rgba(13,12,14,.5),inset calc(-4.2 * var(--unit)) calc(-6.1 * var(--unit)) calc(7.4 * var(--unit)) rgba(28,26,31,.5)}.slider__path{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(9.25 * var(--unit));height:calc(108 * var(--unit));background:linear-gradient(155deg,#000 0,#1e1c21 75.25%);box-shadow:inset calc(2.1 * var(--unit)) calc(4.5 * var(--unit)) calc(4.9 * var(--unit)) rgba(14,13,15,.5),inset calc(-2.1 * var(--unit)) calc(-4.5 * var(--unit)) calc(4.9 * var(--unit)) rgba(52,49,57,.5)}.slider__handle{position:absolute;left:50%;transform:translate(-50%,-50%);z-index:2;background:linear-gradient(180deg,#121114 0,#302d34 100%);box-shadow:calc(3.8 * var(--unit)) calc(6.2 * var(--unit)) calc(12.4 * var(--unit)) rgba(7,7,8,.8),inset calc(-2.5 * var(--unit)) calc(-4.1 * var(--unit)) calc(4.1 * var(--unit)) #0e0d0f,inset calc(2.5 * var(--unit)) calc(4.1 * var(--unit)) calc(4.1 * var(--unit)) #343138;border-radius:calc(2 * var(--unit));height:calc(32 * var(--unit));width:calc(56 * var(--unit))}.slider__handle:after,.slider__handle:before{content:'';position:absolute;z-index:3;left:0;height:calc(2 * var(--unit));width:100%;background:linear-gradient(174deg,#111013 0,#28252c 90.99%);box-shadow:inset calc(.17 * var(--unit)) calc(1.7 * var(--unit)) calc(1.7 * var(--unit)) rgba(23,22,25,.5),inset calc(-.17 * var(--unit)) calc(-1.7 * var(--unit)) calc(1.7 * var(--unit)) rgba(37,35,40,.5)}.slider__handle:before{top:calc(7.5 * var(--unit))}.slider__handle:after{bottom:calc(7.5 * var(--unit))}.slider__handle span{display:block;position:absolute;width:100%;height:calc(3 * var(--unit));left:0;top:50%;transform:translateY(-50%);background:linear-gradient(180deg,#afafaf 0,#fff 100%);box-shadow:inset calc(1.1 * var(--unit)) calc(1.9 * var(--unit)) calc(1.9 * var(--unit)) rgba(156,156,156,.5),inset calc(-1.1 * var(--unit)) calc(-1.9 * var(--unit)) calc(1.9 * var(--unit)) rgba(255,255,255,.5)}.slider--1{left:calc(52 * var(--unit));top:calc(57 * var(--unit))}.slider--1 .slider__handle{top:0}.slider--2{left:calc(136 * var(--unit));top:calc(57 * var(--unit))}.slider--2 .slider__handle{top:75%}.slider--3{left:calc(220 * var(--unit));top:calc(57 * var(--unit))}.slider--3 .slider__handle{top:20%}.slider--4{left:calc(304 * var(--unit));top:calc(57 * var(--unit))}.slider--4 .slider__handle{top:100%}.text-1{position:absolute;left:calc(62 * var(--unit));top:calc(20 * var(--unit))}.text-1 svg{width:calc(116 * var(--unit));height:calc(18 * var(--unit))}.text-2{position:absolute;top:calc(21 * var(--unit));left:calc(207 * var(--unit))}.text-2 svg{width:calc(140 * var(--unit));height:calc(14.5 * var(--unit))}.keys{position:absolute;height:calc(203 * var(--unit));bottom:0;left:calc(44 * var(--unit));display:flex}.keys div{border:calc(1 * var(--unit)) solid #151416;position:relative;border-radius:calc(4 * var(--unit));flex-shrink:0;height:calc(203 * var(--unit));width:calc(56 * var(--unit));background-color:#fcffff;box-shadow:inset 0 calc(-7.75 * var(--unit)) calc(7.75 * var(--unit)) #dbdede,inset 0 calc(7.75 * var(--unit)) calc(7.75 * var(--unit)) #dbdede}.keys div span{display:block;height:calc(122 * var(--unit));width:calc(30 * var(--unit));background-color:#000;top:calc(-1 * var(--unit));border-radius:calc(1 * var(--unit)) calc(1 * var(--unit)) calc(4 * var(--unit)) calc(4 * var(--unit));position:absolute;z-index:3}.keys div span:before{content:'';position:absolute;z-index:2;width:calc(26 * var(--unit));height:calc(119 * var(--unit));border-radius:calc(4 * var(--unit));left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(140deg,#443d4c 0,#1a171d 70.98%);box-shadow:calc(4 * var(--unit)) calc(4 * var(--unit)) calc(8 * var(--unit)) rgba(10,9,11,.4),inset calc(-4.2 * var(--unit)) calc(-5 * var(--unit)) calc(6.5 * var(--unit)) #141216,inset calc(4.2 * var(--unit)) calc(5 * var(--unit)) calc(6.5 * var(--unit)) #4a4353}.keys div:nth-child(1) span{left:calc(37 * var(--unit))}.keys div:nth-child(2) span{left:calc(45 * var(--unit))}.keys div:nth-child(4) span{left:calc(37 * var(--unit))}.keys div:nth-child(5) span{left:calc(41 * var(--unit))}.keys div:nth-child(6) span{left:calc(37 * var(--unit))}.keys div:nth-child(8) span{left:calc(37 * var(--unit))}.keys div:nth-child(9) span{left:calc(45 * var(--unit))}.keys div:nth-child(11) span{left:calc(37 * var(--unit))}.keys div:nth-child(12) span{left:calc(41 * var(--unit))}.keys div:nth-child(13) span{left:calc(45 * var(--unit))}.keys div:nth-child(15) span{left:calc(37 * var(--unit))}.keys div:nth-child(16) span{left:calc(41 * var(--unit))}.gray-btn{width:calc(40 * var(--unit));height:calc(32 * var(--unit));border-radius:calc(2 * var(--unit));background-color:#322d38;box-shadow:calc(.4 * var(--unit)) calc(4.7 * var(--unit)) calc(9.6 * var(--unit)) rgba(10,9,11,.555),inset calc(-.2 * var(--unit)) calc(-2.4 * var(--unit)) calc(2.4 * var(--unit)) #2a262f,inset calc(.2 * var(--unit)) calc(2.4 * var(--unit)) calc(2.4 * var(--unit)) #38333f;position:absolute;z-index:2}.gray-btn--small{height:calc(14 * var(--unit))}.gray-btn--1{left:calc(68 * var(--unit));top:calc(239 * var(--unit))}.gray-btn--2{left:calc(152 * var(--unit));top:calc(239 * var(--unit))}.gray-btn--3{left:calc(428 * var(--unit));top:calc(239 * var(--unit))}.gray-btn--4{left:calc(500 * var(--unit));top:calc(239 * var(--unit))}.gray-btn--5{left:calc(428 * var(--unit));top:calc(195 * var(--unit))}.gray-btn--6{left:calc(572 * var(--unit));top:calc(195 * var(--unit))}.red-btn{position:absolute;z-index:2;width:calc(40 * var(--unit));height:calc(32 * var(--unit));border-radius:calc(2 * var(--unit));background:#ff4748;box-shadow:calc(.3 * var(--unit)) calc(4.8 * var(--unit)) calc(9.7 * var(--unit)) rgba(51,14,14,.8),inset calc(-.2 * var(--unit)) calc(-3.2 * var(--unit)) calc(3.2 * var(--unit)) #c63738,inset calc(.2 * var(--unit)) calc(3.2 * var(--unit)) calc(3.2 * var(--unit)) #ff5455}.red-btn--1{left:calc(236 * var(--unit));top:calc(239 * var(--unit))}.red-btn--2{left:calc(320 * var(--unit));top:calc(239 * var(--unit))}.red-btn--3{left:calc(428 * var(--unit));top:calc(141 * var(--unit))}.red-btn--4{left:calc(572 * var(--unit));top:calc(141 * var(--unit))}.round-btn{width:calc(44 * var(--unit));height:calc(44 * var(--unit));border-radius:50%;position:absolute;background:linear-gradient(159deg,#1e1d1f 0,#000 77.4%);box-shadow:inset calc(1.1 * var(--unit)) calc(2.9 * var(--unit)) calc(3.1 * var(--unit)) rgba(17,16,19,.5),inset calc(-1.1 * var(--unit)) calc(-2.9 * var(--unit)) calc(-3.1 * var(--unit)) rgba(42,39,46,.5)}.round-btn .inner-circle{border-radius:inherit;width:calc(39 * var(--unit));height:calc(39 * var(--unit));position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(154deg,#403948 0,#18161c 74.79%);box-shadow:calc(2.2 * var(--unit)) calc(4.6 * var(--unit)) calc(10.4 * var(--unit)) rgba(9,8,11,.8),inset calc(-1.5 * var(--unit)) calc(-3.1 * var(--unit)) calc(3.4 * var(--unit)) #131115,inset calc(1.5 * var(--unit)) calc(3.1 * var(--unit)) calc(3.4 * var(--unit)) #463e4e}.round-btn--1{left:calc(570 * var(--unit));top:calc(234 * var(--unit))}.dial-1{border-radius:50%;position:absolute;width:calc(64 * var(--unit));height:calc(64 * var(--unit));background:linear-gradient(141deg,#0b0b0d 0,#1c1a1f 71.1%);box-shadow:inset calc(3.5 * var(--unit)) calc(4.4 * var(--unit)) calc(5.6 * var(--unit)) rgba(11,10,12,.5),inset calc(-3.5 * var(--unit)) calc(-4.4 * var(--unit)) calc(5.6 * var(--unit)) rgba(31,29,33,.5)}.dial-1 .inner-circle{border-radius:inherit;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(50.5 * var(--unit));height:calc(50.5 * var(--unit));background:linear-gradient(147deg,#3f3847 0,#1a171d 72.29%);box-shadow:calc(3.6 * var(--unit)) calc(5.6 * var(--unit)) calc(13.4 * var(--unit)) rgba(9,8,11,.758),inset calc(-2.3 * var(--unit)) calc(-3.6 * var(--unit)) calc(4.3 * var(--unit)) #141217,inset calc(2.3 * var(--unit)) calc(3.6 * var(--unit)) calc(4.3 * var(--unit)) #443d4d}.dial-1 .inner-circle:before{content:'';position:absolute;width:calc(8.4 * var(--unit));height:calc(8.4 * var(--unit));border-radius:50%;background:linear-gradient(140deg,#868686 0,#fff 70.98%);box-shadow:inset calc(.4 * var(--unit)) calc(.5 * var(--unit)) calc(.7 * var(--unit)) rgba(103,103,103,.5),inset calc(-.4 * var(--unit)) calc(-.5 * var(--unit)) calc(.7 * var(--unit)) rgba(255,255,255,.5);left:calc(27 * var(--unit));top:calc(11 * var(--unit))}.dial-1--1{left:calc(488 * var(--unit));top:calc(132 * var(--unit))}.dial-2{position:absolute;width:calc(64 * var(--unit));height:calc(64 * var(--unit));border-radius:50%;background:#1f1d22;box-shadow:calc(5.2 * var(--unit)) calc(8.5 * var(--unit)) calc(17 * var(--unit)) rgba(6,6,7,.2505),inset calc(-1.6 * var(--unit)) calc(-2.7 * var(--unit)) calc(2.7 * var(--unit)) #1d1b1f,inset calc(1.6 * var(--unit)) calc(2.7 * var(--unit)) calc(2.7 * var(--unit)) #211f24}.dial-2 .inner-circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(40 * var(--unit));height:calc(40 * var(--unit));border-radius:inherit;background:linear-gradient(180deg,#3a3441 0,#201d25 100%);box-shadow:calc(3.2 * var(--unit)) calc(5.3 * var(--unit)) calc(10.6 * var(--unit)) rgba(9,8,11,.5025),inset calc(-1.5 * var(--unit)) calc(-2.5 * var(--unit)) calc(2.5 * var(--unit)) #1d1a20,inset calc(1.5 * var(--unit)) calc(2.5 * var(--unit)) calc(2.5 * var(--unit)) #3e3745}.dial-2 .inner-circle span{display:block;position:absolute;left:0;top:0;width:100%;height:100%;border-radius:inherit}.dial-2 .inner-circle span:before{content:'';width:calc(3.2 * var(--unit));height:calc(12.8 * var(--unit));position:absolute;top:calc(7.2 * var(--unit));left:50%;transform:translateX(-50%);z-index:2;background:linear-gradient(159deg,#c2c2c2 0,#fff 77.4%);box-shadow:inset calc(.15 * var(--unit)) calc(.4 * var(--unit)) calc(.4 * var(--unit)) rgba(179,179,179,.5),inset calc(-.15 * var(--unit)) calc(-.4 * var(--unit)) calc(.4 * var(--unit)) rgba(255,255,255,.5)}.dial-2--1{top:calc(36 * var(--unit));left:calc(672 * var(--unit))}.dial-2--2{top:calc(36 * var(--unit));left:calc(758 * var(--unit))}.dial-2--2 span{transform:rotate(40deg)}.dial-2--3{top:calc(36 * var(--unit));left:calc(845 * var(--unit))}.dial-2--3 span{transform:rotate(120deg)}.dial-2--4{top:calc(36 * var(--unit));left:calc(931 * var(--unit))}.dial-2--4 span{transform:rotate(320deg)}.neon-pad{position:absolute;width:calc(80 * var(--unit));height:calc(64 * var(--unit));border-radius:calc(3.1 * var(--unit));background:linear-gradient(141deg,#070607 0,#111013 71.1%)}.neon-pad:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;box-shadow:inset calc(4.2 * var(--unit)) calc(5.2 * var(--unit)) calc(6.7 * var(--unit)) rgba(11,10,12,.5),inset calc(-4.2 * var(--unit)) calc(-5.2 * var(--unit)) calc(6.7 * var(--unit)) rgba(31,29,33,.5);z-index:10;pointer-events:none}.neon-pad:after{content:'';width:calc(72 * var(--unit));height:calc(56 * var(--unit));position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;background-color:var(--border-color);filter:blur(calc(5 * var(--unit)))}.neon-pad>div{border-radius:inherit;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(72 * var(--unit));height:calc(56 * var(--unit))}.neon-pad-inner{background:linear-gradient(150deg,#27242a 0,#131114 73.21%);border:calc(2 * var(--unit)) solid var(--border-color);box-shadow:calc(4.2 * var(--unit)) calc(7.3 * var(--unit)) calc(17 * var(--unit)) rgba(6,6,7,.625),inset calc(-2.3 * var(--unit)) calc(-4.1 * var(--unit)) calc(4.7 * var(--unit)) #100f11,inset calc(2.3 * var(--unit)) calc(4.1 * var(--unit)) calc(4.7 * var(--unit)) #29272e;z-index:7}.neon-pad--red{--border-color:#6c090c}.neon-pad--green{--border-color:#072827}.neon-pad--purple{--border-color:#3c076e}.neon-pad--orange{--border-color:#4c2209}.neon-pad--blue{--border-color:#08155c}.neon-pad--1{left:calc(661 * var(--unit));top:calc(128 * var(--unit))}.neon-pad--2{left:calc(749 * var(--unit));top:calc(128 * var(--unit))}.neon-pad--3{left:calc(837 * var(--unit));top:calc(128 * var(--unit))}.neon-pad--4{left:calc(925 * var(--unit));top:calc(128 * var(--unit))}.neon-pad--5{left:calc(661 * var(--unit));top:calc(212 * var(--unit))}.neon-pad--6{left:calc(749 * var(--unit));top:calc(212 * var(--unit))}.neon-pad--7{left:calc(837 * var(--unit));top:calc(212 * var(--unit))}.neon-pad--8{left:calc(925 * var(--unit));top:calc(212 * var(--unit))}.smart-chord{width:calc(186 * var(--unit));height:calc(72 * var(--unit));position:absolute;top:calc(36 * var(--unit));left:calc(428 * var(--unit));background:linear-gradient(143deg,#070708 0,#131316 71.41%);box-shadow:inset calc(6.9 * var(--unit)) calc(9.1 * var(--unit)) calc(11.4 * var(--unit)) rgba(6,6,6,.5),inset calc(-6.9 * var(--unit)) calc(-9.1 * var(--unit)) calc(11.4 * var(--unit)) rgba(21,21,24,.5);border-radius:calc(9.2 * var(--unit))}.smart-chord svg{position:absolute;width:calc(55 * var(--unit));height:calc(37 * var(--unit));top:calc(17 * var(--unit));left:calc(20 * var(--unit))}.smart-chord .toggle{display:block;position:absolute;width:calc(58 * var(--unit));height:calc(29 * var(--unit));border-radius:calc(29/2 * var(--unit));background:linear-gradient(143deg,#171418 0,#332e36 71.41%);box-shadow:inset calc(2.3 * var(--unit)) calc(3 * var(--unit)) calc(3.8 * var(--unit)) rgba(12,11,13,.5),inset calc(-2.3 * var(--unit)) calc(-3 * var(--unit)) calc(3.8 * var(--unit)) rgba(38,34,40,.5);top:calc(21 * var(--unit));left:calc(110 * var(--unit));cursor:pointer}.smart-chord .toggle input{display:none}.smart-chord .toggle-knob{transition:.3s;width:calc(20 * var(--unit));height:calc(20 * var(--unit));border-radius:50%;position:absolute;top:50%;left:calc(4.5 * var(--unit));transform:translateY(-50%);background:linear-gradient(163deg,#3f3846 0,#211e25 80.08%);box-shadow:calc(.8 * var(--unit)) calc(2.5 * var(--unit)) calc(5.4 * var(--unit)) rgba(10,9,11,.548),inset calc(.4 * var(--unit)) calc(1.3 * var(--unit)) calc(1.3 * var(--unit)) #1d1a20,inset calc(-.4 * var(--unit)) calc(-1.3 * var(--unit)) calc(1.3 * var(--unit)) #433c4b}.smart-chord .toggle-knob:before{content:'';transition:inherit;width:calc(16 * var(--unit));height:calc(16 * var(--unit));border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#272727;box-shadow:0 0 calc(21 * var(--unit)) rgba(0,0,0,.6)}.smart-chord .toggle input:checked+.toggle-knob{left:calc(32 * var(--unit))}.smart-chord .toggle input:checked+.toggle-knob:before{background:#58c426;box-shadow:0 0 calc(21 * var(--unit)) rgba(131,220,87,.6)}