:root {
  font-size: clamp(12px, 2.962963vmin, 32px);
  --hm-ui-touch: max(44px, 4rem);
  --hm-ui-space: 1.5rem; --hm-ui-gap: 0.75rem;
  --hm-ui-font: 1rem; --hm-ui-title: 1.75rem; --hm-ui-caption: 0.75rem;
}
:where([data-hm-ui]) {
  position: fixed; inset: 0; box-sizing: border-box; z-index: 10;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--hm-ui-gap);
  padding: max(var(--hm-ui-space), env(safe-area-inset-top)) max(var(--hm-ui-space), env(safe-area-inset-right)) max(var(--hm-ui-space), env(safe-area-inset-bottom)) max(var(--hm-ui-space), env(safe-area-inset-left));
  font-size: var(--hm-ui-font); line-height: 1.3; pointer-events: none;
}
:where([data-hm-ui] *, [data-hm-ui] *::before, [data-hm-ui] *::after) { box-sizing: border-box; }
:where([data-hm-ui] .hm-ui-top, [data-hm-ui] .hm-ui-bottom) {
  min-width: 0; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--hm-ui-gap);
}
:where([data-hm-ui] .hm-ui-top) { grid-row: 1; }
:where([data-hm-ui] .hm-ui-bottom) { grid-row: 3; }
:where([data-hm-ui] .hm-ui-actions) {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--hm-ui-gap); min-width: 0; max-width: 100%;
}
:where([data-hm-ui] .hm-ui-center) {
  grid-row: 2; align-self: stretch; justify-self: stretch;
  display: grid; place-items: center; min-width: 0;
  max-width: 100%; max-height: 100%; min-height: 0; overflow: auto; pointer-events: auto;
}
:where([data-hm-ui] button, [data-hm-ui] [role="button"]) {
  min-width: var(--hm-ui-touch); min-height: var(--hm-ui-touch);
  flex-shrink: 0; font: inherit; line-height: inherit;
  touch-action: manipulation; pointer-events: auto;
}
:where([data-hm-ui] h1, [data-hm-ui] h2) { font-size: var(--hm-ui-title); margin: 0; }