:root{
  --dock-gap: 12px;
  --dock-r: 24px;
  --dock-blur: 22px;
  --dock-sat: 1.5;
  --dock-shadow: 0 8px 28px -8px rgba(0,0,0,.30);
  --dock-mix: 74%;
}

body.cmx-active .cmx-tabbar,
body.plm-active .plm-tabbar,
body.dm-body    .dm-tabbar,
body.mm-active  .mm-tabbar,
body.hm-active  .hm-tabbar{
  border-radius: var(--dock-r);
  border: 1px solid var(--dock-line, rgba(127,127,127,.18));
  border-top: 1px solid var(--dock-line, rgba(127,127,127,.18));
  background: color-mix(in srgb, var(--dock-surface) var(--dock-mix), transparent);
  -webkit-backdrop-filter: blur(var(--dock-blur)) saturate(var(--dock-sat));
  backdrop-filter: blur(var(--dock-blur)) saturate(var(--dock-sat));
  box-shadow: var(--dock-shadow);
  box-sizing: border-box;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body.cmx-active .cmx-tabbar,
  body.plm-active .plm-tabbar,
  body.dm-body    .dm-tabbar,
  body.mm-active  .mm-tabbar,
  body.hm-active  .hm-tabbar{
    background: var(--dock-surface);
  }
}

body.cmx-active{
  --dock-pill-h: 64px;
  --cmx-tabbar-h: calc(var(--dock-pill-h) + var(--dock-gap));
  --dock-surface: var(--cmx-surface);
  --dock-line: var(--cmx-line);
}
body.cmx-active .cmx-tabbar{
  position: absolute;
  left: var(--dock-gap); right: var(--dock-gap);
  bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
  min-height: var(--dock-pill-h);
  height: var(--dock-pill-h);
  padding: 6px 4px;
}
body.cmx-active .ms-body{
  padding-bottom: calc(var(--cmx-tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
}

body.plm-active{
  --dock-pill-h: 64px;
  --plm-tabbar-h: calc(var(--dock-pill-h) + var(--dock-gap));
  --dock-surface: var(--plm-surface);
  --dock-line: var(--plm-line);
}
body.plm-active .plm-tabbar{
  left: var(--dock-gap); right: var(--dock-gap);
  bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
  height: var(--dock-pill-h);
  padding: 6px 4px;
}

body.dm-body{
  --dock-pill-h: 60px;
  --dm-tabbar-h: calc(var(--dock-pill-h) + var(--dock-gap));
  --dock-surface: var(--dm-card);
  --dock-line: var(--dm-line);
}
body.dm-body .dm-tabbar{
  left: var(--dock-gap); right: var(--dock-gap);
  bottom: calc(var(--dock-gap) + var(--dm-safe-bottom));
  height: var(--dock-pill-h);
  padding: 8px 4px;
}

body.mm-active{
  --dock-pill-h: 64px;
  --dock-surface: var(--bh-surface);
  --dock-line: var(--bh-line);
}
body.mm-active .mm-tabbar{
  left: var(--dock-gap); right: var(--dock-gap);
  bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
  height: var(--dock-pill-h);
  padding: 0 4px;
}

body.hm-active{
  --dock-pill-h: 64px;
  --dock-surface: var(--color-card-solid, var(--color-card));
  --dock-line: var(--color-border);
}
body.hm-active .hm-tabbar{
  left: var(--dock-gap); right: var(--dock-gap);
  bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
  height: var(--dock-pill-h);
  padding: 0 4px;
}

body.cmx-active .cmx-tabbar__item--active,
body.plm-active .plm-tabbar__item--active,
body.dm-body    .dm-tab.is-active,
body.mm-active  .mm-tab.is-active,
body.hm-active  .hm-tab.is-active{
  background: color-mix(in srgb, var(--accent, #0A84FF) 16%, transparent);
  border-radius: calc(var(--dock-r) - 7px);
}
body.dm-body .dm-tab.is-active{
  background: color-mix(in srgb, var(--dm-accent, #7C5CFF) 16%, transparent);
}

@media (prefers-reduced-transparency: reduce){
  body.cmx-active .cmx-tabbar,
  body.plm-active .plm-tabbar,
  body.dm-body    .dm-tabbar,
  body.mm-active  .mm-tabbar,
  body.hm-active  .hm-tabbar{
    background: var(--dock-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}