body{display:grid;place-content:center;min-height:100vh}html{font-size:calc(100vw / 1440 * 10);overflow:hidden}@media (max-width: 600px){html{font-size:calc(100vw / 1124 * 10)}}.p9-knob{background:#121212;width:52.6rem;height:52.6rem;border-radius:50%;padding:7rem;display:none;border:.1rem dashed #333;display:grid;place-content:center;position:relative}.p9-knob>svg{position:absolute;inset:-.2prem;width:calc(100% + .4rem);height:calc(100% + .4rem)}.p9-knob-out{width:51.2rem;height:51.2rem;display:grid;place-content:center;border-radius:50%;background:#22112212;box-shadow:0 .4rem 1rem #333 inset;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);transition:transform .6s cubic-bezier(.25,1,.5,1);cursor:grab;position:relative}.p9-knob-out:hover{transform:scale(1.025)}.p9-knob-out>svg{position:absolute;inset:0;width:100%;height:100%}.p9-knob-in{width:49.2rem;height:49.2rem;border-radius:50%;border:.05rem solid #e6e6e6;background:#3333;-webkit-backdrop-filter:blur(.6rem);backdrop-filter:blur(.6rem);position:relative;display:grid;place-content:center}.p9-knob-in>svg{position:absolute;inset:1.2rem 1.2rem 1.8rem;width:calc(100% - 2.4rem);height:calc(100% - 2.4rem)}.p9-knob-handle{width:36.2rem;height:36.2rem;border-radius:50%;background:#212121;box-shadow:0 .4rem 2rem 1rem #00000040 inset,0 .4rem 3.4rem #ffffff40 inset;position:relative;display:grid;place-content:center}.p9-knob-handle>svg{position:absolute;inset:1.2rem 1.2rem 1.8rem;width:calc(100% - 2.4rem);height:calc(100% - 2.4rem)}.p9-knob-handle-in{background:radial-gradient(50% 50% at 50% 50%,#191c1e33,#10101033 52.88%,#21212133),#323739;box-shadow:0 .4rem 2rem 1rem #00000040 inset,0 .4rem 3.4rem #ffffff40 inset;filter:blur(.4rem);width:calc(52.6rem - 1.4rem - 2rem - 13rem - 9rem);height:calc(52.6rem - 1.4rem - 2rem - 13rem - 9rem);border-radius:50%;position:relative;display:grid;place-content:center}.p9-knob-handle-in>svg{position:absolute;inset:1.2rem 1.2rem 1.8rem;width:calc(100% - 2.4rem);height:calc(100% - 2.4rem)}.p9-knob-handle-inner{background:radial-gradient(50% 50% at 50% 50%,#191c1e33,#272a2c33 52.88%,#393d3e33),#111314;box-shadow:0 .4rem 2rem 1rem #00000040 inset,0 .4rem 3.4rem #ffffff40 inset;width:calc(52.6rem - 1.4rem - 2rem - 13rem - 9rem - 2.4rem);height:calc(52.6rem - 1.4rem - 2rem - 13rem - 9rem - 2.4rem);border-radius:50%;position:relative}.p9-knob-handle-inner>svg{position:absolute;inset:1.2rem 1.2rem 1.8rem;width:calc(100% - 2.4rem);height:calc(100% - 2.4rem)}