:root {
  --bg: #ffffff;
  --bg-soft: #f7f8fb;
  --bg-highlight: #dfe1ed;
  --ink: #101425;
  --muted: #647084;
  --line: #e8ebf2;
  --line-strong: #dce2ee;
  --purple: #393e7e;
  --purple-hover: #9199c8;
  --purple-deep: #2d3163;
  --shadow-sm: 0 10px 26px rgba(16, 20, 37, 0.08);
  --shadow-md: 0 22px 60px rgba(16, 20, 37, 0.12);
  --radius-sm: 14px;
  --radius-md: 24px;
  --wrap: calc(1160px * var(--mx-wrap-scale, 1));
  --page-gutter: 2rem;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 92px;
  --header-bar-height: 84px;
  --header-height: calc(var(--header-bar-height) + env(safe-area-inset-top, 0px));
  --anchor-offset: calc(var(--header-height) + 40px);
  --work-card-pad: calc(28px * 2 / 3);
  --text-label-sm: 0.790625rem;
  --text-meta: 0.71875rem;
  --text-label: 0.8625rem;
  --text-label-md: 0.934375rem;
}

@media (max-width: 850px) {
  :root {
    --page-gutter: 1.6875rem;
    --space-2xl: 64px;
  }
}