:root {
  --layout-height: 100vh;
  --layout-width: 100vw;
  --viewport-top: 0px;
  --viewport-bottom: 0px;
  --viewport-left: 0px;
  --viewport-right: 0px;
  /* Intersect the visible viewport with the device's safe rectangle.
     Using max avoids counting an inset again when the WebView already excludes it. */
  --app-top: max(var(--viewport-top), env(safe-area-inset-top, 0px));
  --app-bottom: max(var(--viewport-bottom), env(safe-area-inset-bottom, 0px));
  --app-left: max(var(--viewport-left), env(safe-area-inset-left, 0px));
  --app-right: max(var(--viewport-right), env(safe-area-inset-right, 0px));
  --app-height: max(1px, calc(var(--layout-height) - var(--app-top) - var(--app-bottom)));
  --app-width: max(1px, calc(var(--layout-width) - var(--app-left) - var(--app-right)));
  --vh: calc(var(--app-height) / 100);
}

@supports (height: 100dvh) {
  :root {
    --layout-height: 100dvh;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #12141e;
}

#app {
  position: fixed;
  top: var(--app-top);
  left: var(--app-left);
  width: var(--app-width);
  height: var(--app-height);
}