@media (max-width: 900px) {
  .arq-panel-right { width: 280px; max-width: 55vw; }
  .arq-toolbar-left { width: 64px; }
  .arq-tool { width: 48px; height: 48px; }
}

@media (orientation: portrait) {
  .arq-editor-body { flex-direction: column; }
  .arq-toolbar-left {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border-right: none;
    border-bottom: 1px solid var(--arq-border);
    max-height: 200px;
  }
  .arq-tool-group {
    flex-direction: row;
    border-bottom: none;
    border-right: 1px solid var(--arq-border);
    padding: 0 0.5rem;
  }
  .arq-canvas-wrap { min-height: 45vh; }
  .arq-panel-right {
    width: 100%;
    max-width: none;
    max-height: 38vh;
    border-left: none;
    border-top: 1px solid var(--arq-border);
  }
}
