:root {
  --sidebar-w: 220px;
  --sidebar-collapsed-w: 64px;
  --sidebar-content-w: 220px;
  --tutorial-top-space: 20px;
  --tutorial-bottom-space: 80px;
  --container-top-space: 36px;
  --page-max-w: 820px;
  --page-pad: 22px;
  --muted: #6b7280;
  --accent: #ff2b8a;
  --red-alert: #b91c1c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html.site-sidebar-collapsed {
  --sidebar-content-w: 0px;
}

html, body {
  margin: 0;
  background: #fff;
  color: #0f172a;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

main.page-content {
  margin-left: var(--sidebar-content-w);
  width: calc(100% - var(--sidebar-content-w));
  min-height: 100vh;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--tutorial-top-space) var(--page-pad) var(--tutorial-bottom-space);
}

main.page-content > .container {
  max-width: var(--page-max-w);
  width: 100%;
  margin: var(--container-top-space) auto 0;
  padding: 0;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  :root {
    --sidebar-content-w: 0px;
    --container-top-space: 24px;
    --tutorial-top-space: 16px;
    --tutorial-bottom-space: 80px;
    --page-pad: 12px;
  }

  main.page-content {
    margin-left: 0;
    width: 100%;
    padding: var(--tutorial-top-space) var(--page-pad) var(--tutorial-bottom-space);
  }

  main.page-content > .container {
    margin-top: var(--container-top-space);
    width: 100%;
  }
}