:root{
  --hp-current:rgba(91,126,93,.86);
  --hp-ghost:rgba(91,126,93,.18);
  --hp-track:rgba(91,126,93,.10);
  --mp-current:rgba(191,105,135,.84);
  --mp-ghost:rgba(191,105,135,.18);
  --mp-track:rgba(191,105,135,.10);
}

.hp-dock,
.mp-dock{
  position:fixed;
  z-index:70;
  left:50%;
  bottom:var(--hp-dock-bottom,114px);
  transform:translateX(-50%);
  width:min(460px,calc(100vw - 32px));
  height:18px;
  display:flex;
  align-items:center;
  pointer-events:none;
  filter:drop-shadow(0 8px 18px rgba(37,34,29,.10));
}
.hp-compact,
.mp-compact{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:18px;
  border:0;
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 24px rgba(37,34,29,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
}
.hp-track,
.hp-editor-track,
.mp-track,
.mp-editor-track{
  display:block;
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--hp-track);
}
.hp-track,
.mp-track{
  height:6px;
  border-radius:999px;
}
.hp-fill,
.hp-ghost,
.mp-fill,
.mp-ghost{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:100%;
  border-radius:inherit;
  transition:width .18s ease,opacity .18s ease;
}
.hp-ghost{background:var(--hp-ghost)}
.hp-fill{background:var(--hp-current)}
.mp-ghost{background:var(--mp-ghost)}
.mp-fill{background:var(--mp-current)}
.mp-track,.mp-editor-track{background:var(--mp-track)}
.hp-compact:not(.has-value) .hp-fill,
.mp-compact:not(.has-value) .mp-fill{opacity:0}
.hp-compact:not(.has-ghost) .hp-ghost,
.mp-compact:not(.has-ghost) .mp-ghost{opacity:0}
.hp-compact:focus-visible,
.mp-compact:focus-visible{
  outline:1px solid rgba(41,41,36,.35);
  outline-offset:3px;
  border-radius:4px;
}

.hp-sheet,
.mp-sheet{
  position:fixed;
  z-index:140;
  inset:0;
  display:none;
}
.hp-sheet.open,.mp-sheet.open{display:block}
.hp-sheet-backdrop,
.mp-sheet-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:rgba(42,40,35,.18);
}
.hp-panel,
.mp-panel{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(620px,100%);
  padding:18px 20px calc(18px + env(safe-area-inset-bottom));
  border-radius:16px 16px 0 0;
  background:#f8f7f2;
  box-shadow:0 -18px 50px rgba(30,28,24,.16);
}
.hp-panel-head,
.mp-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
}
.hp-panel-title,
.mp-panel-title{
  font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
  color:#77736c;
}
.hp-close,
.mp-close{
  border:0;
  padding:5px 0 5px 12px;
  background:transparent;
  color:#8b8880;
  font:700 8px/1 ui-monospace,monospace;
  letter-spacing:.08em;
}
.hp-editor,
.mp-editor{
  position:relative;
  padding:14px 0;
}
.hp-editor-track,
.mp-editor-track{
  height:12px;
  border-radius:999px;
}
.hp-editor .hp-ghost{background:rgba(91,126,93,.20)}
.mp-editor .mp-ghost{background:rgba(191,105,135,.20)}
.hp-preview,
.mp-preview{
  position:absolute;
  left:0;
  top:0;
  width:50%;
  height:100%;
  border-radius:inherit;
  background:rgba(91,126,93,.90);
}
.mp-preview{background:rgba(191,105,135,.90)}
.hp-range,
.mp-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:.001;
  cursor:ew-resize;
  touch-action:none;
}
.hp-panel-foot,
.mp-panel-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:14px;
}
.hp-status,
.mp-status{
  min-width:0;
  color:#8b8880;
  font:650 8px/1.35 ui-monospace,monospace;
  letter-spacing:.06em;
}
.hp-save,
.mp-save{
  flex:0 0 auto;
  min-width:82px;
  height:34px;
  border:0;
  border-radius:7px;
  background:#292924;
  color:#faf9f5;
  font:700 9px/1 ui-monospace,monospace;
  letter-spacing:.08em;
}
.hp-save:disabled,.mp-save:disabled{opacity:.42;cursor:default}
.hp-sheet.saving .hp-range,.mp-sheet.saving .mp-range{pointer-events:none}

@media(max-width:720px){
  .hp-dock,
  .mp-dock{
    left:16px;
    right:16px;
    transform:none;
    width:auto;
  }
  .hp-dock{bottom:var(--hp-dock-bottom,158px)}
  .mp-dock{bottom:var(--mp-dock-bottom,184px)}
  .hp-compact,.mp-compact{height:18px;padding:6px 10px}
  .hp-panel,.mp-panel{padding-left:18px;padding-right:18px}
}

.mp-dock{
  bottom:var(--mp-dock-bottom,140px);
}