:root,.page{
  --space-0:0px;--space-1:calc(2px * var(--ui-scale,1));--space-2:calc(4px * var(--ui-scale,1));--space-3:calc(6px * var(--ui-scale,1));--space-4:calc(8px * var(--ui-scale,1));--space-5:calc(12px * var(--ui-scale,1));
  --space-6:calc(16px * var(--ui-scale,1));--space-7:calc(20px * var(--ui-scale,1));--space-8:calc(24px * var(--ui-scale,1));--space-9:calc(32px * var(--ui-scale,1));--space-10:calc(40px * var(--ui-scale,1));
  --space-11:calc(48px * var(--ui-scale,1));--space-12:calc(64px * var(--ui-scale,1));--space-13:calc(80px * var(--ui-scale,1));--space-14:calc(96px * var(--ui-scale,1));--space-15:calc(128px * var(--ui-scale,1));

  --layout-sidebar-w:248px;
  --layout-sidebar-collapsed-w:64px;
  --layout-topbar-h:60px;
  --layout-gutter:24px;
  --layout-page-max:1440px;
  --layout-grid-gap:16px;

  --pad-card:calc(20px * var(--ui-scale,1));
  --pad-card-tight:calc(14px * var(--ui-scale,1));
  --pad-control-x:calc(14px * var(--ui-scale,1));
  --pad-control-y:calc(8px * var(--ui-scale,1));
  --pad-cell-x:calc(14px * var(--ui-scale,1));
  --pad-cell-y:calc(11px * var(--ui-scale,1));

  --size-control-sm:calc(28px * var(--ui-scale,1));
  --size-control-md:calc(36px * var(--ui-scale,1));
  --size-icon-sm:calc(14px * var(--ui-scale,1));
  --size-icon:calc(18px * var(--ui-scale,1));
  --size-icon-lg:calc(28px * var(--ui-scale,1));
  --size-control-lg:calc(44px * var(--ui-scale,1));
}