.effort-control {
  --effort-fill: 40%;
  position: relative;
  min-width: 138px;
  width: 148px;
  height: 36px;
  padding: 10px 12px;
  border: 1px solid #3e3844;
  border-radius: 12px;
  background: #221e25;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.effort-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  color: #d6d0dd;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
}

.effort-heading #effort-position {
  color: #8e8299;
  font-size: 15px;
  line-height: 10px;
  transform: translateY(-2px);
}

.effort-control input[type="range"] {
  position: absolute;
  z-index: 3;
  inset: 0;
  appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  pointer-events:none;
}

.effort-control input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 42px;
}

.effort-control:hover { border-color: #5a5164; background: #27232b; }
.effort-control.ultracode { border-color: #8050a4; background: #432a553d; box-shadow: inset 0 0 14px #9b58cb12, 0 0 12px #8f4bc329; }
.ultracode .effort-heading { color: #eedaff; }
.ultracode #effort-position { color: #cc9bed; }
@media (max-width: 700px) {
  .effort-control { min-width: 112px; width: 124px; }
}
.composer{position:relative}.effort-popup{--popup-fill:25%;position:absolute;z-index:8;right:78px;bottom:58px;width:300px;padding:18px;border:1px solid #48404e;border-radius:14px;background:#242126;box-shadow:0 18px 45px #0009}.effort-popup-head{display:flex;gap:8px;align-items:center;font-size:13px;color:#aaa4ad}.effort-popup-head b{color:#d9b8e8}.effort-popup-ends{display:flex;justify-content:space-between;color:#99949d;font-size:11px;margin:20px 0 10px}.effort-popup-track{height:26px;position:relative;border-radius:8px;overflow:hidden;background:#3a363d}.effort-popup-track>span{position:absolute;inset:0 auto 0 0;width:var(--popup-fill);background:linear-gradient(90deg,#6b3485,#a15dc1);box-shadow:inset 0 0 10px #d394ef33}.effort-popup input[type=range]{appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:ew-resize}.effort-popup input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:26px;border-radius:7px;background:#f7f4f8;border:1px solid white;box-shadow:0 1px 6px #0008}.effort-popup.ultracode{border-color:#8952aa;background:#2c2431}.effort-popup.ultracode .effort-popup-head b{color:#e0affc}.effort-popup.ultracode .effort-popup-track>span{background:linear-gradient(90deg,#713990,#bd6ce4)}