@layer layout {
  .app {
    --rail-w: 108px;
    --rail-r: clamp(216px, 18vw, 272px);
    --rail-min: 180px;
    --rail-side: clamp(var(--rail-min), calc((100vw - var(--safe-left) - var(--safe-right) - (100vh - var(--safe-top) - var(--safe-bottom) - var(--topbar-h) - var(--dock-h) - 16px) * 1.418 - 8px) / 2), var(--rail-r));
    --bubble: 66px;
    --bubble-cap: 66px;
    --topbar-h: 68px;
    --dock-h: 120px;
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: var(--rail-side) minmax(0, 1fr) var(--rail-side);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--dock-h);
    grid-template-areas:
      'top top top'
      'left stage right'
      'dock dock dock';
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  }

  .topbar {
    grid-area: top;
    min-width: 0;
  }

  .rail {
    min-width: 0;
    min-height: 0;
  }

  .rail--left {
    grid-area: left;
  }

  .rail--right {
    grid-area: right;
  }

  .stage {
    grid-area: stage;
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 10px 4px 6px;
    container-type: size;
    container-name: stage;
  }

  .dock {
    grid-area: dock;
    min-width: 0;
    position: relative;
  }

  .fx-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
    pointer-events: none;
    contain: strict;
  }

  .overlay-root {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
  }

  .toast-root {
    position: fixed;
    left: 50%;
    top: calc(var(--safe-top) + 78px);
    z-index: 95;
    width: min(440px, calc(100vw - 24px));
    transform: translateX(-50%);
    display: grid;
    gap: 8px;
    pointer-events: none;
  }

  @media (max-width: 1100px) {
    .app {
      --rail-w: 92px;
      --rail-r: 200px;
      --bubble: 58px;
      --bubble-cap: 58px;
    }
  }

  @media (max-width: 820px) {
    .app {
      --rail-r: 180px;
      --rail-min: 156px;
      --bubble: 54px;
      --bubble-cap: 54px;
    }
  }

  @media (orientation: portrait) and (max-aspect-ratio: 4/5) {
    .app {
      --topbar-h: 60px;
      --dock-h: 110px;
      --bubble: 54px;
      --lane-h: 0px;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: var(--topbar-h) auto minmax(0, 1fr) auto var(--lane-h) var(--dock-h);
      grid-template-areas:
        'top'
        'left'
        'stage'
        'right'
        'lane'
        'dock';
    }

    .app[data-announcer='on'] {
      --lane-h: 88px;
    }

    .stage {
      padding: 6px 6px 4px;
    }

    .toast-root {
      top: calc(var(--safe-top) + 66px);
    }
  }

  @media (orientation: portrait) and (max-aspect-ratio: 4/5) and (max-width: 380px) {
    .app {
      --bubble: 48px;
      --dock-h: 110px;
    }
  }

  @media (orientation: portrait) and (max-aspect-ratio: 4/5) and (max-height: 800px) {
    .app {
      --topbar-h: 54px;
      --dock-h: 98px;
      --bubble: 46px;
    }

    .app[data-announcer='on'] {
      --lane-h: 68px;
    }

    .stage {
      padding: 4px 6px 2px;
    }
  }

  @media (orientation: portrait) and (max-aspect-ratio: 4/5) and (max-height: 620px) {
    .app {
      --topbar-h: 50px;
      --dock-h: 94px;
      --bubble: 40px;
    }

    .app[data-announcer='on'] {
      --lane-h: 58px;
    }
  }

  @media (min-width: 1240px) and (min-aspect-ratio: 801/1000) {
    .app {
      grid-template-areas:
        'top top top'
        'left stage right'
        'left dock right';
    }
  }

  @media (max-height: 540px) and (orientation: landscape) {
    .app {
      --rail-w: 70px;
      --rail-r: 124px;
      --stage-shift: calc((var(--rail-r) - var(--rail-w)) / 2);
      --bubble: 42px;
      --bubble-cap: 42px;
      --topbar-h: 48px;
      --dock-h: 64px;
      grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rail-r);
      grid-template-areas:
        'top top top'
        'left stage right'
        'left dock right';
    }

    .stage {
      padding: 6px 2px 2px;
    }

    .toast-root {
      top: calc(var(--safe-top) + 54px);
    }
  }

  @media (max-height: 360px) and (orientation: landscape) {
    .app {
      --bubble: 36px;
      --bubble-cap: 36px;
    }
  }
}