function main() {
  const speed = $data.current.speed;
  const maxSpeed = $data.current.speedUnit === 'mph' ? 100 : 160;
  const ratio = speed === null ? 0 : Math.max(0, Math.min(1, speed / maxSpeed));
  return <CardContent title="速度范围" trailing={String(maxSpeed)} renderer={m => {
    const w = Math.max(0, $env.width - m.supportedGapLeft - m.supportedGapRight);
    const h = Math.max(0, $env.height - m.headerHeight - m.supportedGapTop - m.supportedGapBottom);
    return <Group width={w} height={h}>
      <Text width={w} height={64} fontSize={48} color={$env.foreground}
        minimumScaleFactor={0.5}>{speed === null ? '—' : Math.round(speed)}</Text>
      <Rectangle x={0} y={Math.max(68, h - 20)} width={w} height={12}
        cornerRadius={6} fill={$env.dark ? '#FFFFFF18' : '#12171C12'}/>
      <Rectangle x={0} y={Math.max(68, h - 20)} width={w * ratio} height={12}
        cornerRadius={6} gradient={{angle: 0, colors: ['#54800A', '#C2F54F']}}
        animations={[{property: 'width', duration: 0.2}]}/>
    </Group>;
  }}/>;
}