.workspace {
  grid-template-areas:
    "preview controls"
    "preview export";
  grid-template-rows: minmax(0, 1fr) auto;
}

.preview-panel {
  grid-area: preview;
}

.controls {
  grid-area: controls;
}

.export-section {
  grid-area: export;
}

.fullscreen-export {
  display: none;
  position: absolute;
  z-index: 5;
  right: max(16px, env(safe-area-inset-right));
  top: max(56px, calc(env(safe-area-inset-top) + 48px));
  width: min(240px, calc(100% - 32px));
  margin: 0;
  box-shadow: 0 4px 24px #0009;
}

#stage:fullscreen .fullscreen-export,
#stage:-webkit-full-screen .fullscreen-export {
  display: flex;
}

@media (max-width: 720px) {
  .workspace {
    grid-template-areas:
      "preview"
      "export"
      "controls";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .export-section {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 -12px 24px #0b0e0d99;
  }

  .icon-button,
  .play-button {
    min-width: 44px;
    min-height: 44px;
  }

  .play-button {
    width: 44px;
    height: 44px;
  }

  .theme,
  .switch-row {
    min-height: 44px;
  }

  input[type="range"] {
    height: 44px;
    background: linear-gradient(
      to right,
      var(--accent) 0%,
      var(--accent) var(--fill, 30%),
      #354338 var(--fill, 30%)
    ) center / 100% 3px no-repeat;
    touch-action: pan-y;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }

  input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
}